Refactor CSS on mydashboard started needs completed

client/src/components/dashboard/SettingsButton.jsx

@@ -1,4 +1,4 @@
-import {useState, useMemo, useRef} from "react";
+import {useState, useMemo, useRef, useEffect, useCallback} from "react";
 import {
   Button,
   Box,
@@ -13,13 +13,13 @@ import {
   useRecipe,
   useSlotRecipe
 } from "@chakra-ui/react";
-import {Settings, LayoutGrid, Move, Save, X} from 'lucide-react';
+import {Settings, LayoutGrid, Move, Save, X, ChevronRight, ChevronLeft} from 'lucide-react';
 import {useDashboardStore} from "../../store/useDashboardStore.jsx";
 import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";
 
 // 🚨 NEW: Tiny helper to convert size keys into abbreviations
 const getSizeAbbreviation = (key) => {
-  const mapping = { small: "S", medium: "M", large: "L", xlarge: "XL" };
+  const mapping = {small: "S", medium: "M", large: "L", xlarge: "XL"};
   return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
 };
 
@@ -41,6 +41,29 @@ export function SettingsButton() {
 
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
+  // ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
+  const tabsRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const checkScroll = useCallback(() => {
+    if (tabsRef.current) {
+      const {scrollLeft, scrollWidth, clientWidth} = tabsRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      // We use -1 here to account for sub-pixel rendering in some browsers
+      setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isLibraryOpen) {
+      // Small timeout ensures the DOM has rendered the tabs before measuring
+      setTimeout(checkScroll, 50);
+      window.addEventListener('resize', checkScroll);
+      return () => window.removeEventListener('resize', checkScroll);
+    }
+  }, [isLibraryOpen, checkScroll]);
+
   // Smart Add Handler
   const handleAddWidget = (widgetId, sizeKey) => {
     enterEditMode();
@@ -76,10 +99,10 @@ export function SettingsButton() {
             css={tabStyles}
             data-state="open"
             onClick={() => setIsLibraryOpen(true)}
-            color={{ base: "blue.500", _dark: "blue.300" }}
-            _hover={{ bg: "rgba(66, 153, 225, 0.1)" }}
+            color={{base: "blue.500", _dark: "blue.300"}}
+            _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
           >
-            <LayoutGrid size={20} style={{ flexShrink: 0 }} />
+            <LayoutGrid size={20} style={{flexShrink: 0}}/>
             <Box as="span">Widget Library</Box>
           </Box>
 
@@ -89,10 +112,10 @@ export function SettingsButton() {
             css={tabStyles}
             data-state="open"
             onClick={saveEdit}
-            color={{ base: "green.600", _dark: "green.400" }}
-            _hover={{ bg: "rgba(72, 187, 120, 0.1)" }}
+            color={{base: "green.600", _dark: "green.400"}}
+            _hover={{bg: "rgba(72, 187, 120, 0.1)"}}
           >
-            <Save size={20} style={{ flexShrink: 0 }} />
+            <Save size={20} style={{flexShrink: 0}}/>
             <Box as="span">Save Layout</Box>
           </Box>
 
@@ -102,20 +125,20 @@ export function SettingsButton() {
             css={tabStyles}
             data-state="open"
             onClick={cancelEdit}
-            color={{ base: "red.500", _dark: "red.400" }}
-            _hover={{ bg: "rgba(245, 101, 101, 0.1)" }}
+            color={{base: "red.500", _dark: "red.400"}}
+            _hover={{bg: "rgba(245, 101, 101, 0.1)"}}
           >
-            <X size={20} style={{ flexShrink: 0 }} />
+            <X size={20} style={{flexShrink: 0}}/>
             <Box as="span">Discard</Box>
           </Box>
         </HStack>
       ) : (
         // 👀 VIEW MODE: The Static Dropdown Menu
-        <Menu.Root positioning={{ getAnchorRect }}>
+        <Menu.Root positioning={{getAnchorRect}}>
           <Menu.Trigger asChild>
             <Box ref={menuRef} as="button" css={tabStyles}>
               {/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
-              <Settings size={24} style={{ flexShrink: 0 }} />
+              <Settings size={24} style={{flexShrink: 0}}/>
               <Box as="span">Dashboard Settings</Box>
             </Box>
           </Menu.Trigger>
@@ -125,123 +148,228 @@ export function SettingsButton() {
               <Menu.Item
                 onClick={enterEditMode}
                 cursor="pointer"
-                _hover={{ WebkitTextStroke: "0.5px currentColor" }}
+                _hover={{WebkitTextStroke: "0.5px currentColor"}}
               >
-                <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
+                <Move size={16} style={{marginRight: '8px'}}/> Edit Layout
               </Menu.Item>
 
-                    <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
+              <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
 
-                    <Menu.Item
-                      onClick={() => setIsLibraryOpen(true)}
+              <Menu.Item
+                onClick={() => setIsLibraryOpen(true)}
+                cursor="pointer"
+                _hover={{
+                  bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
+                  WebkitTextStroke: "0.5px currentColor"
+                }}
+              >
+                <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Menu.Root>
+      )}
+
+      {/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
+      <Dialog.Root
+        open={isLibraryOpen}
+        onOpenChange={(e) => setIsLibraryOpen(e.open)}
+        size="xl"
+        placement="center"
+        closeOnInteractOutside={true}
+        closeOnEscapeKeyDown={true}
+      >
+        {/* Soft blur can be added to the background behind the modal */}
+        {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
+        <Dialog.Positioner>
+
+          <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="60%" minH="80%" p={0}>
+
+            <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
+                           borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
+              <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
+            </Dialog.Header>
+
+            <Dialog.Body p={0}>
+              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
+                <Box position="relative" display="flex" mx="auto" maxWidth="100%" mx={5} mt={4} mb={6}>
+
+                  {/* LEFT GLASS CRESCENT */}
+                  {canScrollLeft && (
+                    <Flex
+                      position="absolute"
+                      left="0" top="0" bottom="0"
+                      w="50px"
+                      align="center" justify="center"
+                      zIndex={2}
                       cursor="pointer"
+                      onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
+                      bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
+                      backdropFilter="blur(1px)"
+                      borderTopLeftRadius="full"
+                      borderBottomLeftRadius="full"
+
+                      // THE MAGIC: Bites a transparent circle out of the flat right side!
+                      WebkitMaskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 19px)"
+                      maskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
+
+                      color={{base: "gray.600", _dark: "gray.300"}}
+                      transition="background-color 0.2s"
                       _hover={{
-                        bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
-                        WebkitTextStroke: "0.5px currentColor"
+                        color: {base: "blue.500", _dark: "blue.300"},
+                        bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
                       }}
                     >
-                      <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
-                    </Menu.Item>
-                  </Menu.Content>
-                </Menu.Positioner>
-              </Menu.Root>
-            )}
+                      {/* Shifted slightly left to optically center it in the crescent mass */}
+                      <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/>
+                    </Flex>
+                  )}
+                  <Tabs.List
+                    ref={tabsRef}
+                    onScroll={checkScroll}
+                    bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
+                    p={1}
+                    borderRadius="full"
+                    display="flex"
+                    flexWrap="nowrap"
+                    overflowX="auto"
+                    maxWidth="100%"
+                    border="1px solid"
+                    borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
+                    css={{
+                      scrollbarWidth: "none",
+                      "&::-webkit-scrollbar": {display: "none"},
+                    }}
+                    // This is for desktop users not on trackpad to scroll the
+                    onWheel={(e) => {
+                      if (e.currentTarget) {
+                        e.currentTarget.scrollLeft += e.deltaY;
+                      }
+                    }}
+                  >
+                    {categories.map(cat => (
+                      <Tabs.Trigger
+                        key={cat}
+                        value={cat}
+                        px={5}
+                        py={2}
+                        borderRadius="full"
+                        whiteSpace="nowrap"
+                        flexShrink={0}
+                        color={{base: "gray.500", _dark: "gray.400"}}
+                        fontWeight="medium"
+                        transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
+                        _hover={{
+                          color: {base: "gray.800", _dark: "gray.200"}
+                        }}
+                        _selected={{
+                          bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
+                          color: {base: "blue.600", _dark: "blue.200"},
+                          boxShadow: "sm",
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {cat}
+                      </Tabs.Trigger>
+                    ))}
+                  </Tabs.List>
+                  {canScrollRight && (
+                    <Flex
+                      position="absolute"
+                      right="0" top="0" bottom="0"
+                      w="50px"
+                      align="center" justify="center"
+                      zIndex={2}
+                      cursor="pointer"
+                      onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
+                      bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
+                      backdropFilter="blur(1px)"
+                      borderTopRightRadius="full"
+                      borderBottomRightRadius="full"
 
-              {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
-              <Dialog.Root
-                open={isLibraryOpen}
-                onOpenChange={(e) => setIsLibraryOpen(e.open)}
-                size="xl"
-                placement="center"
-                closeOnInteractOutside={true}
-                closeOnEscapeKeyDown={true}
-              >
-                {/* Soft blur can be added to the background behind the modal */}
-                {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
-                <Dialog.Positioner>
+                      // THE MAGIC: Bites a transparent circle out of the flat left side!
+                      WebkitMaskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 19px)"
+                      maskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
 
-                  <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>
+                      color={{base: "gray.600", _dark: "gray.300"}}
+                      transition="background-color 0.2s"
+                      _hover={{
+                        color: {base: "blue.500", _dark: "blue.300"},
+                        bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
+                      }}
+                    >
+                      {/* Shifted slightly right to optically center it in the crescent mass */}
+                      <ChevronRight size={18} style={{ marginRight: "-30px" }}/>
+                    </Flex>
+                  )}
 
-                    <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
-                                    borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
-                      <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
-                    </Dialog.Header>
+                </Box>
+                {categories.map(cat => (
+                  <Tabs.Content key={cat} value={cat} p={6}>
+                    <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
+                      {categorizedWidgets[cat].map(widget => (
+                        <Flex
+                          key={widget.id}
+                          direction="column"
+                          bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
+                          p={4}
+                          borderRadius="xl"
+                          border="1px solid"
+                          borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
+                          boxShadow="sm"
+                        >
+                          <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
+                          <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
 
-                    <Dialog.Body p={0}>
-                      <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
-                        <Tabs.List bg="transparent" px={4} pt={4}
-                                   borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
-                          {categories.map(cat => (
-                            <Tabs.Trigger key={cat} value={cat} pb={2}
-                                          _selected={{color: "blue.500", borderColor: "blue.500"}}>{cat}</Tabs.Trigger>
-                          ))}
-                        </Tabs.List>
-
-                        {categories.map(cat => (
-                          <Tabs.Content key={cat} value={cat} p={6}>
-                            <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
-                              {categorizedWidgets[cat].map(widget => (
-                                <Flex
-                                  key={widget.id}
-                                  direction="column"
-                                  bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
-                                  p={4}
-                                  borderRadius="xl"
-                                  border="1px solid"
-                                  borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
-                                  boxShadow="sm"
+                          <Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
+                               pt={3}>
+                            <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
+                                  mb={2}>
+                              Add to Dashboard:
+                            </Text>
+                            <HStack gap={2} flexWrap="wrap">
+                              {Object.keys(widget.allowedSizes).map(sizeKey => (
+                                <Box
+                                  key={sizeKey}
+                                  as="button"
+                                  css={tabStyles}
+                                  onClick={() => handleAddWidget(widget.id, sizeKey)}
+                                  color={{base: "blue.600", _dark: "blue.300"}}
                                 >
-                                  <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
-                                  <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
+                                  {/* THE ABBREVIATION ICON: Always visible */}
+                                  <Flex
+                                    align="center"
+                                    justify="center"
+                                    w="24px"
+                                    h="24px"
+                                    flexShrink={0}
+                                    borderRadius="full"
+                                    bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
+                                    fontWeight="black"
+                                    fontSize="xs"
+                                    bg='transparent'
+                                  >
+                                    {getSizeAbbreviation(sizeKey)}
+                                  </Flex>
 
-                                  <Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
-                                       pt={3}>
-                                    <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
-                                          mb={2}>
-                                      Add to Dashboard:
-                                    </Text>
-                                    <HStack gap={2} flexWrap="wrap">
-                                      {Object.keys(widget.allowedSizes).map(sizeKey => (
-                                        <Box
-                                          key={sizeKey}
-                                          as="button"
-                                          css={tabStyles}
-                                          onClick={() => handleAddWidget(widget.id, sizeKey)}
-                                          color={{base: "blue.600", _dark: "blue.300"}}
-                                        >
-                                          {/* 🚨 THE ABBREVIATION ICON: Always visible */}
-                                          <Flex
-                                            align="center"
-                                            justify="center"
-                                            w="24px"
-                                            h="24px"
-                                            flexShrink={0}
-                                            borderRadius="full"
-                                            bg={{ base: "blue.50", _dark: "whiteAlpha.200" }}
-                                            fontWeight="black"
-                                            fontSize="xs"
-                                            bg='transparent'
-                                          >
-                                            {getSizeAbbreviation(sizeKey)}
-                                          </Flex>
-
-                                          {/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
-                                          <Box as="span">Add Widget</Box>
-                                        </Box>
-                                      ))}
-                                    </HStack>
-                                  </Box>
-                                </Flex>
+                                  {/* THE EXPANDED TEXT: Only visible on hover */}
+                                  <Box as="span">Add Widget</Box>
+                                </Box>
                               ))}
-                            </Grid>
-                          </Tabs.Content>
-                        ))}
-                      </Tabs.Root>
-                    </Dialog.Body>
-                    <Dialog.CloseTrigger position="absolute" top={3} right={3} color={{ base: "gray.500", _dark: "whiteAlpha.800" }} _hover={{ color: "red.400" }} />
-                  </Dialog.Content>
-                </Dialog.Positioner>
-              </Dialog.Root>
+                            </HStack>
+                          </Box>
+                        </Flex>
+                      ))}
+                    </Grid>
+                  </Tabs.Content>
+                ))}
+              </Tabs.Root>
+            </Dialog.Body>
+            <Dialog.CloseTrigger position="absolute" top={3} right={3}
+                                 color={{base: "gray.500", _dark: "whiteAlpha.800"}} _hover={{color: "red.400"}}/>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
     </>
   );
 }

client/src/components/layout/Header.jsx

@@ -20,20 +20,11 @@ export default function Header() {
     const displayEmail = user?.email || "LDAP User";
 
     return (
-        <Flex css={styles} justify="space-between" align="center" width="100%">
-            {/*/!* Home Link Logo *!/*/}
-            {/*<Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">*/}
-            {/*    VDAP*/}
-            {/*</Button>*/}
+        <Flex css={styles} >
             <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
-
             {/* User Profile Section */}
             <Flex align="center" gap={3} pr={6}>
-                <Text color="color" fontWeight="bold" textStyle="md" >{displayName}</Text>
-                {/*<Stack gap="0" textAlign="right" cursor="default">*/}
-                {/*    <Text color="color" fontWeight="bold" textStyle="md" width="100%" >{displayName}</Text>*/}
-                {/*    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>*/}
-                {/*</Stack>*/}
+                <Text fontWeight="bold" textStyle="md" >{displayName}</Text>
                 <UserAvatarMenu
                     name={avatarname}
                     // avatar={user.avatar}

client/src/components/layout/Sidebar.jsx

@@ -1,22 +1,24 @@
-import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
-import { ColorModeButton } from "@/components/ui/color-mode.jsx";
-import { useState } from "react";
-import { NavLink } from "react-router-dom";
+import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/react";
+import {ColorModeButton} from "@/components/ui/color-mode.jsx";
+import {useState} from "react";
+import {NavLink} from "react-router-dom";
 import Tooltip from "../ui/Tooltip.jsx";
-import { Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import {Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
 
 const SIDEBAR_DEFAULT_BUTTONS = [
-  { icon: House, name: "Home", url: "/home" },
-  { icon: Earth, name: "Global Map", url: "/global-map" },
-  { icon: MapPin, name: "Regional Map", url: "/regional-map" },
-  { icon: Mountain, name: "Volcano", url: "/volcano" },
-  { icon: ShieldUser, name: "Admin", url: "/admin" } // TODO remove in the future as default should not have admin
+  {icon: House, name: "Home", url: "/home"},
+  {icon: Earth, name: "Global Map", url: "/global-map"},
+  {icon: MapPin, name: "Regional Map", url: "/regional-map"},
+  {icon: Mountain, name: "Volcano", url: "/volcano"},
+  {icon: ShieldUser, name: "Admin", url: "/admin"} // TODO remove in the future as default should not have admin
 ];
 
 export default function Sidebar() {
+
   const [isOpen, setIsOpen] = useState(true);
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
+
+  const recipe = useSlotRecipe({key: "sidebar"});
+  const styles = recipe({state: isOpen ? "open" : "closed"});
 
   // 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;
@@ -24,89 +26,49 @@ export default function Sidebar() {
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
-      <Box
-          css={styles.root}
-          width={isOpen ? "190px" : "71px"}
-          transition="width 0.4s ease"
-          position="relative"
-          display="flex"
-          flexDirection="column"
-          gap={4} // Increased gap slightly to help with the squashed look
-          pt={4} // Added top padding to give the logo room to breathe
+    <Box css={styles.root}>
+      {/* Home Link Logo */}
+      <Button
+        as={NavLink}
+        to="/home"
+        css={styles.logo}
+        variant="plain"
       >
-        {/* Home Link Logo */}
-        <Button
+        {isOpen ? "🌋 VDAP" : "🌋"}
+      </Button>
+
+
+      {/* Navigation Buttons */}
+      {visibleButtons.map((button) => {
+        const Icon = button.icon;
+        return (
+          <Button
             as={NavLink}
-            to="/home"
-            color="color"
-            variant="plain"
-            fontWeight="bold"
-            height="auto" // Prevents the large text from squashing vertically
-            overflow="hidden"
-            px={0}
-            justifyContent={isOpen ? "center" : "center"} // Center the 'V' when collapsed
-            ml={isOpen ? 3 : 0} // Align with other buttons when open
-            textStyle={isOpen ? "4xl" : "3xl"} // Scale down slightly when closed
-        >
-          {isOpen ? "🌋 VDAP" : "🌋"}
-        </Button>
-
-
-
-        {/* Navigation Buttons */}
-        {visibleButtons.map((button) => {
-          const Icon = button.icon;
-          return (
-              // <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
-                <Button
-                    as={NavLink}
-                    to={button.url}
-                    css={styles.buttons}
-                    justifyContent="flex-start"
-                    width="100%"
-                    // overflow="hidden" // Prevents text popout on collapse
-                >
-                  <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
-
-                  {/* Cleaned conditional transition styling */}
-                  <Box
-                      as="span"
-                      ml={isOpen ? 3 : 0}
-                      opacity={isOpen ? 1 : 0}
-                      visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
-                      transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
-                      whiteSpace="nowrap"
-                  >
-                    {button.name}
-                  </Box>
-                </Button>
-              // </Tooltip>
-          );
-        })}
-        <Box
-            mt="auto"
-            display="flex"
-            flexDirection={isOpen ? "row" : "column-reverse"}
-            justifyContent="center"
-            alignItems="center"
-            gap={isOpen ? 16 : 2}
-            pb={4}
-            pr={2}
-            transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
-        >
-          {/* Menu Trigger */}
-          <IconButton
-              aria-label="Toggle Sidebar"
-              variant="plain"
-              size="md"
-              onClick={toggleSidebar}
-              transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
+            to={button.url}
+            css={styles.buttons}
           >
-            {isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
-          </IconButton>
+            {/* Navigation buttons are [icon text] */}
+            <Icon/>
+            <Box as="span" css={styles.button_text}>
+              {button.name}
+            </Box>
+          </Button>
+        );
+      })}
+      <Box css={styles.footer}>
+        {/* Menu Trigger */}
+        <IconButton
+          aria-label="Toggle Sidebar"
+          variant="plain"
+          size="md"
+          onClick={toggleSidebar}
+          css={styles.collapse_button}
+        >
+          {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
+        </IconButton>
 
           {/* Theme Toggler */}
-          <ColorModeButton />
+          <ColorModeButton _hover={{ bg: "transparent" }} />
         </Box>
       </Box>
   );

client/src/pages/home/tabs/MyDashboard.jsx

@@ -3,7 +3,7 @@ import {X, MoreVertical} from "lucide-react";
 import {Responsive, WidthProvider} from "react-grid-layout";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {Suspense, useEffect, useRef} from 'react';
-import {useColorModeValue} from "@/components/ui/color-mode";
+
 // 1. Import database messenger
 import useAuthStore from "@/store/authStore";
 
@@ -14,11 +14,6 @@ import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
-  // 🌗 Let's adjust for our light and dark mode
-  const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
-  const titleColor = useColorModeValue("gray.800", "#FFFFFF");
-  const iconColor = useColorModeValue("gray.600", "#FFFFFF");
-  const iconHoverBg = useColorModeValue("gray.100", "gray.700");
 
   // ☁️ Database Connection
   const {user} = useAuthStore();

client/src/theme.js

@@ -14,22 +14,8 @@ const headerRecipe = defineRecipe({
   }
 });
 
-const dashboardRecipe = defineRecipe({
-  base: {
-    bg: "{MainBackground}"
-  }
-});
-
-const canvasRecipe = defineRecipe({
-  base: {
-    bg: "{transparent}",
-    zIndex: "-1",
-    color: "{text}"
-  }
-});
-
 const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "close_button", "buttons", "dark_mode_button"],
+  slots: ["root", "logo", "footer", "button_text","buttons", "collapse_button"],
   base: {
     root: {
       // 1. Semi-transparent backgrounds
@@ -57,14 +43,17 @@ const sidebarRecipe = defineSlotRecipe({
       margin: "8px",
       display: "flex",
       flexDirection: "column",
+      position: "relative",
       justifyContent: "start",
       alignItems: "stretch",
-      gap: 2,
+      gap: 4,
+      transition: "width 0.4s ease",
 
       // CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
       pl: 2, // Keep left padding
       py: 2, // Keep top/bottom padding
       pr: 0, // Remove right padding
+      pt: 4, // Added top padding to give the logo room to breathe
       overflow: "visible", // Allows the curved corner patches to render outside the button
       zIndex: 10,
     },
@@ -72,10 +61,12 @@ const sidebarRecipe = defineSlotRecipe({
       position: "relative", // Required to anchor the corner patches
       bg: "transparent",
 
+      justifyContent: "flex-start",
       transition: "background-color 0.4s ease, color 0.4s ease",
 
       "& svg": {
-        transition: "stroke-width 0.4s ease"
+        transition: "stroke-width 0.4s ease",
+        flexShrink: "0"
       },
 
       _hover: {
@@ -138,6 +129,59 @@ const sidebarRecipe = defineSlotRecipe({
         }
       },
     },
+    logo: {
+      width: "100%",
+      height: "auto",
+      overflow: "hidden",
+      fontWeight: "bold",
+      px: 0,
+    },
+    footer: {
+      mt: "auto",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      pb: 4,
+      pr: 2,
+      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
+    },
+    button_text: {
+      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+      whiteSpace: "nowrap"
+    },
+    collapse_button: {
+      "& svg": { flexShrink: "0" },
+    },
+  },
+  variants: {
+    state: {
+      open: {
+        root: { width: "190px" },
+        logo: { justifyContent: "flex-start", ml: 2, textStyle: "4xl" },
+        footer: { gap: 16, flexDirection: "row" },
+        button_text: {ml: 3, opacity: 1, visibility: "visible"},
+      },
+      closed: {
+        root: { width: "71px" },
+        logo: { justifyContent: "center", ml: -1, textStyle: "3xl" },
+        footer: { gap: 2, flexDirection: "column-reverse"  },
+        button_text: {ml: 0, opacity: 0, visibility: "hidden"},
+      }
+    }
+  }
+});
+
+const dashboardRecipe = defineRecipe({
+  base: {
+    bg: "{MainBackground}"
+  }
+});
+
+const canvasRecipe = defineRecipe({
+  base: {
+    bg: "{transparent}",
+    zIndex: "-1",
+    color: "{text}"
   }
 });
 
@@ -224,6 +268,17 @@ const glassPanelRecipe = defineSlotRecipe({
           WebkitBackdropFilter: "blur(15px)",
         }
       }
+    },
+    mode: {
+      editing: {
+        root: {
+          boxShadow: "outline",
+          borderStyle: "dashed",
+          borderWidth: "2px",
+          borderColor: "orange.300",
+          cursor: "grab",
+        }
+      }
     }
   },
 
@@ -231,6 +286,7 @@ const glassPanelRecipe = defineSlotRecipe({
     layout: "widget"
   }
 });
+
 const glassTabRecipe = defineRecipe({
   base: {
     display: "flex",