From dc1aa0aa39de7c04cdd29dbd6fc24ed7350983be Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Wed, 16 Jul 2025 13:31:05 -0700
Subject: [PATCH] adjusting sidebar btn flex directions

---
 client/src/App.jsx                |  2 +-
 client/src/components/sidebar.jsx | 12 ++++++------
 client/src/theme.js               |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 4f55612..cad1a7d 100644
--- a/client/src/App.jsx
+++ b/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"
     >
diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 05c7f35..80d0604 100644
--- a/client/src/components/sidebar.jsx
+++ b/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" }} /> */}
diff --git a/client/src/theme.js b/client/src/theme.js
index 68926d3..6d14d11 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -44,7 +44,7 @@ const sidebarRecipe = defineSlotRecipe({
       fontSize: "xl",
       color: {base: "#19332D", _dark: "#CBCBCB"},
       variant: "ghost",
-      width: "100%"
+      width: "100%",
     },
   }
 });