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

sidebar collapsible feature

Browse Source 
The sidebar can now be collapsed to just its icons
This commit is contained in:
vkuchenik
2025-07-09 10:25:54 -07:00
parent b8852b20bf
commit bfacfd302c
2 changed files with 49 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+1 -1
View File
@@ -8,7 +8,7 @@ function App() {
return ( return (
<Grid <Grid
templateRows="0.75fr 11.25fr" templateRows="0.75fr 11.25fr"
templateColumns="1fr 11fr" templateColumns="0.25fr 11.75fr"
height="100vh" height="100vh"
width="100vw" width="100vw"
> >
client/src/components/sidebar.jsx
+48 -17
View File
@@ -2,6 +2,8 @@ import { Box, Button } from "@chakra-ui/react";
import { FaVolcano } from "react-icons/fa6"; import { FaVolcano } from "react-icons/fa6";
import { createIcon } from "@chakra-ui/react"; import { createIcon } from "@chakra-ui/react";
import { CloseButton } from "@chakra-ui/react"; import { CloseButton } from "@chakra-ui/react";
import { IconButton } from "@chakra-ui/react";
import { RxHamburgerMenu } from "react-icons/rx";
import { useState } from "react" import { useState } from "react"
// ICONS // ICONS
@@ -58,23 +60,52 @@ export const Users = createIcon({
}); });
export default function Sidebar () { export default function Sidebar () {
const [isOpen, setIsOpen] = useState(true);
return ( return (
<Box w="100%" h="100%" <>
borderRight="1px" {isOpen && (
borderColor="black" <Box w="100%" h="100%"
borderStyle="solid" borderRight="1px"
display="flex" borderColor="black"
flexDirection="column" borderStyle="solid"
justifyContent="start" display="flex"
alignItems="start" flexDirection="column"
gap={4} padding={14} justifyContent="start"
> alignItems="start"
<CloseButton color="#19332D" bg="#EDF1F1" size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton> gap={4} paddingTop={4}
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button> paddingLeft={8} paddingRight={8}
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button> >
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button> <CloseButton color="#19332D" bg= "#EDF1F1" variant="subtle" left="-4" onClick={() => setIsOpen(!isOpen)}></CloseButton>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
</Box> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button>
</Box>
)}
{!isOpen && (
<Box w="100%" h="100%"
borderRight="1px"
borderColor="black"
borderStyle="solid"
display="flex"
flexDirection="column"
justifyContent="start"
alignItems="start"
gap={4} padding={4}
>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" onClick={() => setIsOpen(!isOpen)}>
<RxHamburgerMenu />
</IconButton>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><PushPin /> </IconButton>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><Globe fill="white" stroke="black" /> </IconButton>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><MapMarker fill="white" stroke="black" /> </IconButton>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><FaVolcano /> </IconButton>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><Users fill="white" stroke="black" /> </IconButton>
</Box>
)}
</>
); );
} }