adjusting sidebar btn flex directions

client/src/App.jsx

@@ -13,7 +13,7 @@ function App() {
   return (
     <Grid css={styles}
       templateRows="1fr 11fr"
-      templateColumns="0.25fr 11.75fr"
+      templateColumns="1fr 20fr"
       height="100vh"
       width="100vw"
     >

client/src/components/sidebar.jsx

@@ -92,7 +92,7 @@ export default function Sidebar() {
       </IconButton>
       
       {/* Dashboard */}
-      <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
+      <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined} justifyContent="flex-start">
         {isOpen ? (
           <>
             <PushPin fill="white" />
@@ -109,7 +109,7 @@ export default function Sidebar() {
                 transitionProperty: "opacity, max-width",
                 transitionDuration: "0.3s",
                 transitionTimingFunction: "ease",
-                transitionDelay: isOpen ? "0.1s" : "0s",
+                transitionDelay: "0.1s",
                 visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
               }}
             >
@@ -122,7 +122,7 @@ export default function Sidebar() {
       </Button>
 
       {/* Global Map */}
-      <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
+      <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined} justifyContent="flex-start">
         {isOpen ? (
           <>            
             <Globe fill="white" stroke="black" />
@@ -152,7 +152,7 @@ export default function Sidebar() {
       </Button>
 
       {/* Regional Map */}
-      <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
+      <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined} justifyContent="flex-start">
         {isOpen ? (
           <>
             <MapMarker fill="white" stroke="black"/>
@@ -181,7 +181,7 @@ export default function Sidebar() {
       </Button>
 
       {/* Volcano */}
-      <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
+      <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined} justifyContent="flex-start">
         {isOpen ? (
           <>
             {/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */}
@@ -211,7 +211,7 @@ export default function Sidebar() {
       </Button>
 
       {/* Admin */}
-      <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
+      <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined} justifyContent="flex-start">
         {isOpen ? (
           <>
             {/* <Users boxSize={5} style={{ marginRight: "8px" }} /> */}

client/src/theme.js

@@ -44,7 +44,7 @@ const sidebarRecipe = defineSlotRecipe({
       fontSize: "xl",
       color: {base: "#19332D", _dark: "#CBCBCB"},
       variant: "ghost",
-      width: "100%"
+      width: "100%",
     },
   }
 });