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

Merge branch 'refactor/sidebar' into 'main'

Browse Source 
added close button to sidebar

See merge request vkuchenik/website-framework!2
This commit is contained in:
vkuchenik
2025-07-09 16:07:08 +00:00
parent e3d4054e0c bf9a9d8461
commit b8852b20bf
4 changed files with 19 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+6 -6
View File
@@ -7,8 +7,8 @@ import { Box } from "@chakra-ui/react"
function App() { function App() {
return ( return (
<Grid <Grid
templateRows="1fr 11fr" templateRows="0.75fr 11.25fr"
templateColumns="2fr 10fr" templateColumns="1fr 11fr"
height="100vh" height="100vh"
width="100vw" width="100vw"
> >
@@ -21,11 +21,11 @@ function App() {
<GridItem colSpan={1}> <GridItem colSpan={1}>
<Grid <Grid
templateRows="repeat(6 1fr)" templateRows="repeat(6 1fr)"
templateColumns="repeat(6 1fr)" templateColumns="repeat(4 1fr)"
height="100vh" height="100%"
width="100vw" width="100%"
> >
<Widgets></Widgets> {/* <Widgets></Widgets> */}
</Grid> </Grid>
</GridItem> </GridItem>
</Grid> </Grid>
client/src/assets/close_btn.svg
-4
View File
@@ -1,4 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="30" height="30" rx="2" fill="black" fill-opacity="0.06"/>
<path d="M21.3535 11.3536L16.7071 16.0001L21.3535 20.6466L20.6465 21.3536L16 16.7071L11.3535 21.3536L10.6465 20.6466L15.293 16.0001L10.6465 11.3536L11.3535 10.6466L16 15.2931L20.6465 10.6466L21.3535 11.3536Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 410 B

client/src/components/header.jsx
+4 -3
View File
@@ -11,12 +11,13 @@ export default function Header() {
flexDirection="row" flexDirection="row"
justifyContent="space-between" justifyContent="space-between"
alignItems="center" paddingLeft={5} paddingRight={2} alignItems="center" paddingLeft={5} paddingRight={2}
> bg="#EDF1F1"
<Button variant="plain" textStyle="4xl" fontWeight="bold">VDAP</Button> >
<Button color="#19332D" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
<Button variant="plain"> <Button variant="plain">
<HStack key={user.email} gap="4"> <HStack key={user.email} gap="4">
<Stack gap="0"> <Stack gap="0">
<Text fontWeight="bold" textStyle="lg">{user.name}</Text> <Text color="#19332D" fontWeight="bold" textStyle="lg">{user.name}</Text>
<Text color="fg.muted" textStyle="sm">{user.email}</Text> <Text color="fg.muted" textStyle="sm">{user.email}</Text>
</Stack> </Stack>
<Avatar.Root> <Avatar.Root>
client/src/components/sidebar.jsx
+9 -20
View File
@@ -1,6 +1,7 @@
import { Box, Button } from "@chakra-ui/react" 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 { useState } from "react" import { useState } from "react"
// ICONS // ICONS
@@ -56,18 +57,6 @@ export const Users = createIcon({
), ),
}); });
export const Close = createIcon({
displayName: "Close",
viewBox: "0 0 24 24",
fill: "none",
path: (
<>
<rect x="1" y="1" width="30" height="30" rx="2" fill="black" fill-opacity="0.06"/>
<path d="M21.3535 11.3536L16.7071 16.0001L21.3535 20.6466L20.6465 21.3536L16 16.7071L11.3535 21.3536L10.6465 20.6466L15.293 16.0001L10.6465 11.3536L11.3535 10.6466L16 15.2931L20.6465 10.6466L21.3535 11.3536Z" fill="black"/>
</>
),
});
export default function Sidebar () { export default function Sidebar () {
return ( return (
<Box w="100%" h="100%" <Box w="100%" h="100%"
@@ -79,13 +68,13 @@ export default function Sidebar () {
justifyContent="start" justifyContent="start"
alignItems="start" alignItems="start"
gap={4} padding={14} gap={4} padding={14}
> >
<Button><Close fill="white" stroke="black"/></Button> <CloseButton color="#19332D" bg="#EDF1F1" size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton>
<Button fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
<Button fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
<Button fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>
<Button fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button>
<Button fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button> <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button>
</Box> </Box>
); );
} }