updated themes file to further reduce styling in sidebar component page

client/src/components/layout/Sidebar.jsx

@@ -1,8 +1,8 @@
+import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
 import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
 import {ColorModeButton} from "@/components/ui/color-mode.jsx";
-import {useState} from "react";
 import {NavLink} from "react-router-dom";
-import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
+import {useState} from "react";
 
 const SIDEBAR_DEFAULT_BUTTONS = [
   {icon: House, name: "Home", url: "/home"},
@@ -13,27 +13,18 @@ const SIDEBAR_DEFAULT_BUTTONS = [
 ];
 
 export default function Sidebar() {
-
   const [isOpen, setIsOpen] = useState(true);
-
   const recipe = useSlotRecipe({key: "sidebar"});
   const styles = recipe({state: isOpen ? "open" : "closed"});
-
+  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization
-  // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
-  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
 
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
     <Box css={styles.root}>
        {/* Logo Navigates to Home Page */}
-      <Button
+      <Button as={NavLink} to="/home" variant="plain" css={styles.logo}>
-        as={NavLink}
+        <Flex>
-        to="/home"
-        css={styles.logo}
-        variant="plain"
-      >
-        <Flex direction="row" justify="space-between">
           <Text>🌋</Text>
           <Text css={styles.logo_text}>VDAP</Text>
         </Flex>
@@ -43,12 +34,7 @@ export default function Sidebar() {
       {visibleButtons.map((button) => {
         const Icon = button.icon;
         return (
-          <Button
+          <Button as={NavLink} to={button.url} css={styles.buttons}> {/* Navigation buttons are [icon text] */}
-            as={NavLink}
-            to={button.url}
-            css={styles.buttons}
-          >
-            {/* Navigation buttons are [icon text] */}
             <Icon/>
             <Box as="span" css={styles.button_text}>
               {button.name}
@@ -57,22 +43,17 @@ export default function Sidebar() {
         );
       })}
 
+      {/* Collapse Sidebar and Theme Footer Buttons */}
       <Flex css={styles.footer}>
         <Flex css={styles.closed_theme_button}>
-          <ColorModeButton _hover={{ bg: "transparent" }} />
+          <ColorModeButton />
         </Flex>
-        <Flex direction="row" justify="space-between">
+        <Flex>
-          <IconButton
+          <IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
-            aria-label="Toggle Sidebar"
-            variant="plain"
-            size="md"
-            onClick={toggleSidebar}
-            css={styles.collapse_button}
-          >
             {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
           </IconButton>
           <Flex css={styles.opened_theme_button}>
-            <ColorModeButton _hover={{ bg: "transparent" }} />
+            <ColorModeButton />
           </Flex>
         </Flex>
       </Flex>

client/src/theme.js

@@ -136,9 +136,8 @@ const sidebarRecipe = defineSlotRecipe({
       justifyContent: "flex-start",
       ml: 2,
       textStyle: "4xl",
-      overflow: "hidden",
       fontWeight: "bold",
-      fontSize: "2rem",
+      overflow: "hidden",
       px: 0,
     },
     logo_text: {
@@ -167,6 +166,11 @@ const sidebarRecipe = defineSlotRecipe({
       align: "center",
       justifyContent: "right",
       mr: 6,
+      "& .chakra-button": { // targets the chakra button class in ColorModeButton component to set bg transparency
+        "&:hover": {
+          bg: "transparent",
+        }
+      },
       "& button": {
         alignSelf: "center",
         transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
@@ -174,6 +178,11 @@ const sidebarRecipe = defineSlotRecipe({
     },
     closed_theme_button: {
       ml: 0.9,
+      "& .chakra-button": { // targets the chakra button class to set bg transparency
+        "&:hover": {
+          bg: "transparent",
+        }
+      },
       "& button": {
         transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
       }