fixed sidebar animation issues by truncating btn text and using css transitions on footer icons

client/src/components/layout/Sidebar.jsx

@@ -1,9 +1,8 @@
-import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/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 Tooltip from "../ui/Tooltip.jsx";
-import {Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
+import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
 
 const SIDEBAR_DEFAULT_BUTTONS = [
   {icon: House, name: "Home", url: "/home"},
@@ -27,17 +26,19 @@ export default function Sidebar() {
 
   return (
     <Box css={styles.root}>
-      {/* Home Link Logo */}
+       {/* Logo Navigates to Home Page */}
       <Button
         as={NavLink}
         to="/home"
         css={styles.logo}
         variant="plain"
       >
-        {isOpen ? "🌋 VDAP" : "🌋"}
+        <Flex direction="row" justify="space-between">
+          <Text>🌋</Text>
+          <Text css={styles.logo_text}>VDAP</Text>
+        </Flex>
       </Button>
 
-
       {/* Navigation Buttons */}
       {visibleButtons.map((button) => {
         const Icon = button.icon;
@@ -55,21 +56,26 @@ export default function Sidebar() {
           </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 */}
+      <Flex css={styles.footer}>
+        <Flex css={styles.closed_theme_button}>
           <ColorModeButton _hover={{ bg: "transparent" }} />
-        </Box>
-      </Box>
+        </Flex>
+        <Flex direction="row" justify="space-between">
+          <IconButton
+            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" }} />
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
   );
 }