chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'refactor/sidebar-transition2' into 'main'

Browse Source 
Refactor Header.jsx to place users name, email, and avatar in a group to the right side of the header

See merge request vkuchenik/website-framework!14
This commit is contained in:
Dan Hansen
2025-07-17 18:36:02 +00:00
parent f49486d234 02b4b8ee45
commit 0b7547cdc2
4 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Header.jsx
+27 -24
View File
@@ -1,4 +1,4 @@
import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react" import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal, Flex } from "@chakra-ui/react"
export default function Header() { export default function Header() {
const recipe = useRecipe({ key: "header" }); const recipe = useRecipe({ key: "header" });
@@ -7,29 +7,32 @@ export default function Header() {
return ( return (
<chakra.div css={styles}> <chakra.div css={styles}>
<Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button> <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
<Stack gap="0"> <Flex align="center" gap={3} pr={6}>
<Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text> <Stack gap="0" textAlign="right">
<Text color="fg.muted" textStyle="sm">{user.email}</Text> <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
</Stack> <Text color="fg.muted" textStyle="sm">{user.email}</Text>
{/* Add a drop down menu to the avatar */} </Stack>
<Menu.Root>
<Menu.Trigger rounded="full" focusRing="outside"> {/* Add a drop down menu to the avatar */}
<Avatar.Root> <Menu.Root>
<Avatar.Fallback name={user.name} /> <Menu.Trigger rounded="full" focusRing="outside">
<Avatar.Image src={user.avatar} /> <Avatar.Root>
</Avatar.Root> <Avatar.Fallback name={user.name} />
</Menu.Trigger> <Avatar.Image src={user.avatar} />
<Portal> </Avatar.Root>
<Menu.Positioner zIndex="popover"> </Menu.Trigger>
<Menu.Content> <Portal>
<Menu.Item value="account">Account</Menu.Item> <Menu.Positioner zIndex="popover">
<Menu.Item value="settings">Settings</Menu.Item> <Menu.Content>
<Menu.Item value="logout">Logout</Menu.Item> <Menu.Item value="account">Account</Menu.Item>
</Menu.Content> <Menu.Item value="settings">Settings</Menu.Item>
</Menu.Positioner> <Menu.Item value="logout">Logout</Menu.Item>
</Portal> </Menu.Content>
</Menu.Root> </Menu.Positioner>
{/* End drop down menu */} </Portal>
</Menu.Root>
{/* End drop down menu */}
</Flex>
</chakra.div> </chakra.div>
); );
} }
client/src/components/SearchBar.jsx
+8 -2
View File
@@ -1,10 +1,16 @@
import { Input, InputGroup } from "@chakra-ui/react"; import { Input, InputGroup } from "@chakra-ui/react";
import { FiSearch } from "react-icons/fi" import { FiSearch } from "react-icons/fi"
export function SearchBar({ placeholder="Search...", size="sm", width="200px"}) { export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) {
return ( return (
<InputGroup startElement={<FiSearch />}> <InputGroup startElement={<FiSearch />}>
<Input placeholder="Enter volcano to search" /> <Input
placeholder={placeholder}
size={size}
width={width}
borderRadius="full"
/>
</InputGroup> </InputGroup>
); );
} }
client/src/components/Sidebar.jsx
+1 -1
View File
@@ -83,7 +83,7 @@ export default function Sidebar() {
return ( return (
<Box <Box
css={styles.root} css={styles.root}
width={isOpen ? "100%" : "86px"} width={isOpen ? "210px" : "71px"}
transition="width 0.4s ease" transition="width 0.4s ease"
> >
<IconButton <IconButton
client/src/theme.js
+4 -2
View File
@@ -56,8 +56,10 @@ const config = defineConfig({
base100: { value: {base: "#f7f9fa", _dark: "#787b73"}}, base100: { value: {base: "#f7f9fa", _dark: "#787b73"}},
base200: { value: {base: "#eef2f6", _dark: "#242424"}}, base200: { value: {base: "#eef2f6", _dark: "#242424"}},
base300: { value: {base: "#dfe5ed", _dark: "#60645a"}}, base300: { value: {base: "#dfe5ed", _dark: "#60645a"}},
primary: { value: {base: "#9cd855", _dark: "#629631"}}, // primary: { value: {base: "#9cd855", _dark: "#629631"}},
primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}}, primary: { value: {base: "#2B98F8", _dark: "#629631"}},
// primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
primaryLt: { value: {base: "#2BCFF8", _dark: "#92948e"}},
secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}}, secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
border: {value: {base: "#000000", _dark: "#CBCBCB"}}, border: {value: {base: "#000000", _dark: "#CBCBCB"}},
text: {value: {base: "#19332D", _dark: "#CBCBCB"}}, text: {value: {base: "#19332D", _dark: "#CBCBCB"}},