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 (
<Grid
templateRows="0.75fr 11.25fr"
templateColumns="1fr 11fr"
templateColumns="0.25fr 11.75fr"
height="100vh"
width="100vw"
>
client/src/components/sidebar.jsx
+33 -2
View File
@@ -2,6 +2,8 @@ import { Box, Button } from "@chakra-ui/react";
import { FaVolcano } from "react-icons/fa6";
import { createIcon } 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"
// ICONS
@@ -58,7 +60,11 @@ export const Users = createIcon({
});
export default function Sidebar () {
const [isOpen, setIsOpen] = useState(true);
return (
<>
{isOpen && (
<Box w="100%" h="100%"
borderRight="1px"
borderColor="black"
@@ -67,14 +73,39 @@ export default function Sidebar () {
flexDirection="column"
justifyContent="start"
alignItems="start"
gap={4} padding={14}
gap={4} paddingTop={4}
paddingLeft={8} paddingRight={8}
>
<CloseButton color="#19332D" bg="#EDF1F1" size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton>
<CloseButton color="#19332D" bg= "#EDF1F1" variant="subtle" left="-4" onClick={() => setIsOpen(!isOpen)}></CloseButton>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
<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>
<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>
)}
</>
);
}