Refactor still working on UI changes

client/src/components/layout/Header.jsx

@@ -2,6 +2,7 @@ import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
 import { NavLink } from "react-router-dom";
 import useAuthStore from "@/store/authStore";
+import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
 
 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
@@ -13,7 +14,8 @@ export default function Header() {
 
     const { user } = useAuthStore();
     console.log(user);
-    const displayName = user ? (user.fullName || user.username) : "Loading...";
+    const displayName = user ? (user.firstName || user.username) : "Loading...";
+    const avatarname = user ? (user.fullName || user.username) : "Loading...";
 
     const displayEmail = user?.email || "LDAP User";
 
@@ -23,15 +25,17 @@ export default function Header() {
             {/*<Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">*/}
             {/*    VDAP*/}
             {/*</Button>*/}
+            <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
 
             {/* User Profile Section */}
             <Flex align="center" gap={3} pr={6}>
-                <Stack gap="0" textAlign="right" cursor="default">
-                    <Text color="color" fontWeight="bold" textStyle="lg">{displayName}</Text>
-                    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>
-                </Stack>
+                <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>*/}
                 <UserAvatarMenu
-                    name={displayName}
+                    name={avatarname}
                     // avatar={user.avatar}
                 />
             </Flex>

client/src/components/layout/Sidebar.jsx

@@ -40,15 +40,15 @@ export default function Sidebar() {
             to="/home"
             color="color"
             variant="plain"
-            textStyle={isOpen ? "5xl" : "4xl"} // Scale down slightly when closed
             fontWeight="bold"
             height="auto" // Prevents the large text from squashing vertically
             overflow="hidden"
             px={0}
-            justifyContent={isOpen ? "flex-start" : "center"} // Center the 'V' when collapsed
+            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" : "V"}
+          {isOpen ? "🌋 VDAP" : "🌋"}
         </Button>
 
         {/* Menu Trigger */}