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() {
return (
<Grid
templateRows="1fr 11fr"
templateColumns="2fr 10fr"
templateRows="0.75fr 11.25fr"
templateColumns="1fr 11fr"
height="100vh"
width="100vw"
>
@@ -21,11 +21,11 @@ function App() {
<GridItem colSpan={1}>
<Grid
templateRows="repeat(6 1fr)"
templateColumns="repeat(6 1fr)"
height="100vh"
width="100vw"
templateColumns="repeat(4 1fr)"
height="100%"
width="100%"
>
<Widgets></Widgets>
{/* <Widgets></Widgets> */}
</Grid>
</GridItem>
</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
+3 -2
View File
@@ -11,12 +11,13 @@ export default function Header() {
flexDirection="row"
justifyContent="space-between"
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">
<HStack key={user.email} gap="4">
<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>
</Stack>
<Avatar.Root>
client/src/components/sidebar.jsx
+8 -19
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 { createIcon } from "@chakra-ui/react";
import { CloseButton } from "@chakra-ui/react";
import { useState } from "react"
// 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 () {
return (
<Box w="100%" h="100%"
@@ -80,12 +69,12 @@ export default function Sidebar () {
alignItems="start"
gap={4} padding={14}
>
<Button><Close fill="white" stroke="black"/></Button>
<Button fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
<Button 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 fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button>
<Button fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button>
<CloseButton color="#19332D" bg="#EDF1F1" size="xs" variant="subtle" position="relative" top="-12" left="-12"></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>
);
}