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

Edit sidebar close symbol from 'X' to 'RxHamburgerMenu' and aligned to the right

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-14 13:31:11 -07:00
parent 94aa70a307
commit 6cbfb4e29a
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/sidebar.jsx
+14 -2
View File
@@ -74,7 +74,19 @@ export default function Sidebar () {
gap={4} paddingTop={4} gap={4} paddingTop={4}
paddingLeft={14} paddingRight={3} paddingLeft={14} paddingRight={3}
> >
<CloseButton color="secondary" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton> {/* <CloseButton color="secondary" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton> */}
{/* <RxHamburgerMenu color="secondary" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></RxHamburgerMenu> */}
<Button
aria-lable="Toggle Sidebar"
color="secondary"
_hover={{bg: "#EDF1F1"}}
size="md" variant="ghost"
// left="-10"
ml="auto" // Margin-left: auto, pushes hamburger menu to right side
onClick={() => setIsOpen(!isOpen)}
>
<RxHamburgerMenu />
</Button>
<Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}> <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
<PushPin fill="white" /> Dashboard <PushPin fill="white" /> Dashboard
</Button> </Button>
@@ -104,7 +116,7 @@ export default function Sidebar () {
alignItems="start" alignItems="start"
gap={4} padding={4} gap={4} padding={4}
> >
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" onClick={() => setIsOpen(!isOpen)}> <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="md" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
<RxHamburgerMenu /> <RxHamburgerMenu />
</IconButton> </IconButton>
<IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}> <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>