reworking sidebar
This commit is contained in:
@@ -333,3 +333,81 @@
|
||||
{"level":"info","time":"2022-03-28T22:43:31-04:00","message":"Configuration loaded successfully..."}
|
||||
{"level":"debug","time":"2022-03-28T22:43:31-04:00","message":"{Timezone:America/New_York Server:{Port:3500 LocationPhotoDir:./app/photos/locations/} Logger:{Level:debug LoggingFile:./app/log/goInventorize.log} Authentication:{BasicAuth:false UserName:admin Password:password} Development:false}"}
|
||||
{"level":"info","time":"2022-03-28T22:43:31-04:00","message":"Database and Config loaded, starting webserver..."}
|
||||
{"level":"info","time":"2022-03-29T21:49:10-04:00","message":"Configuration loaded successfully..."}
|
||||
{"level":"debug","time":"2022-03-29T21:49:10-04:00","message":"{Timezone:America/New_York Server:{Port:3500 LocationPhotoDir:./app/photos/locations/} Logger:{Level:debug LoggingFile:./app/log/goInventorize.log} Authentication:{BasicAuth:false UserName:admin Password:password} Development:false}"}
|
||||
{"level":"info","time":"2022-03-29T21:49:10-04:00","message":"Database and Config loaded, starting webserver..."}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"debug","time":"2022-03-29T21:49:45-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms/1"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"304", "method":"GET", "path":"/photos/locations/Location4/Kitchen/Kitchen_cover.png"}
|
||||
{"level":"info","time":"2022-03-29T21:49:57-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"level":"debug","time":"2022-03-29T21:52:07-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"info","time":"2022-03-29T21:52:09-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"debug","time":"2022-03-29T22:33:40-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"debug","time":"2022-03-29T22:33:52-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"debug","time":"2022-03-29T22:34:15-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"info","time":"2022-03-29T22:34:57-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"info","time":"2022-03-29T22:35:03-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"debug","time":"2022-03-29T22:35:12-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"info","time":"2022-03-29T22:35:58-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"info","time":"2022-03-29T22:38:29-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"debug","time":"2022-03-29T22:40:18-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"info","time":"2022-03-29T22:40:24-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"info","time":"2022-03-29T22:47:01-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"level":"info","time":"2022-03-29T22:47:09-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"level":"info","time":"2022-03-29T22:47:10-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"level":"debug","time":"2022-03-29T22:51:50-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
|
||||
{"level":"info","time":"2022-03-29T22:54:44-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"level":"debug","time":"2022-03-29T22:54:46-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"info","time":"2022-03-29T22:54:47-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"level":"debug","time":"2022-03-29T22:57:09-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"debug","time":"2022-03-29T22:57:10-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"debug","time":"2022-03-29T22:57:11-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"debug","time":"2022-03-29T22:57:12-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"debug","time":"2022-03-29T22:57:13-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"info","time":"2022-03-29T22:57:19-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
{"level":"debug","time":"2022-03-29T22:57:20-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
|
||||
{"level":"info","time":"2022-03-29T22:57:42-04:00","message":"Getting all Rooms"}
|
||||
{"logtype":"webserver", "pid":"27600", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
|
||||
|
||||
@@ -1,83 +1,138 @@
|
||||
import React, {useState } from 'react';
|
||||
import { useAtom } from 'jotai';
|
||||
import { activePageAtom, roomFilterAtom } from '../state/main';
|
||||
import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
|
||||
import { Navbar, Group, Code, ScrollArea, createStyles } from '@mantine/core';
|
||||
import { LinksGroup } from './sidebar/SidebarLinksGroup';
|
||||
// import { UserButton } from './sidebar/UserButton';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { createStyles } from '@mantine/styles';
|
||||
import { BsMap } from 'react-icons/bs'
|
||||
import { GoLocation, GoDashboard, GoGear } from 'react-icons/go'
|
||||
import { BsDoorClosed, BsDiagram2 } from 'react-icons/bs'
|
||||
import { BiCabinet } from 'react-icons/bi'
|
||||
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
button: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
padding: theme.spacing.xs,
|
||||
borderRadius: theme.radius.sm,
|
||||
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
|
||||
backgroundColor: 'transparent',
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],
|
||||
},
|
||||
navbar: {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
activeButton: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
padding: theme.spacing.xs,
|
||||
borderRadius: theme.radius.sm,
|
||||
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
|
||||
backgroundColor: theme.colors.blue,
|
||||
|
||||
// '&:hover': {
|
||||
// backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.blue[4],
|
||||
// },
|
||||
},
|
||||
}));
|
||||
|
||||
header: {
|
||||
padding: theme.spacing.md,
|
||||
paddingTop: 0,
|
||||
marginLeft: -theme.spacing.md,
|
||||
marginRight: -theme.spacing.md,
|
||||
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
|
||||
borderBottom: `1px solid ${
|
||||
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
|
||||
}`,
|
||||
},
|
||||
|
||||
links: {
|
||||
marginLeft: -theme.spacing.md,
|
||||
marginRight: -theme.spacing.md,
|
||||
},
|
||||
|
||||
linksInner: {
|
||||
paddingTop: theme.spacing.xl,
|
||||
paddingBottom: theme.spacing.xl,
|
||||
},
|
||||
|
||||
footer: {
|
||||
marginLeft: -theme.spacing.md,
|
||||
marginRight: -theme.spacing.md,
|
||||
borderTop: `1px solid ${
|
||||
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
|
||||
}`,
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
|
||||
const sideBarData = [
|
||||
{ label: 'Dashboard', icon: GoDashboard },
|
||||
{
|
||||
label: 'Locations',
|
||||
icon: GoLocation,
|
||||
initiallyOpened: true,
|
||||
links: [
|
||||
{ label: 'View Locations', link: '/locations' },
|
||||
{ label: 'Forecasts', link: '/' },
|
||||
{ label: 'Outlook', link: '/' },
|
||||
{ label: 'Real time', link: '/' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Rooms',
|
||||
icon: BsDoorClosed,
|
||||
initiallyOpened: true,
|
||||
links: [
|
||||
{ label: 'View Rooms', link: '/rooms' },
|
||||
{ label: 'Previous releases', link: '/' },
|
||||
{ label: 'Releases schedule', link: '/' },
|
||||
],
|
||||
},
|
||||
{ label: 'Cabinets', icon: BiCabinet },
|
||||
{ label: 'Items', icon: BsDiagram2 },
|
||||
{ label: 'Settings', icon: GoGear },
|
||||
];
|
||||
|
||||
|
||||
function SideBar(props) {
|
||||
const { classes } = useStyles();
|
||||
const [activePage, setActivePage] = useAtom(activePageAtom)
|
||||
const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
|
||||
|
||||
const changeView = (newView) => {
|
||||
if (newView === "rooms") {
|
||||
setRoomFilter({})
|
||||
}
|
||||
setActivePage(newView)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const links = sideBarData.map((item) => <LinksGroup {...item} key={item.label} />);
|
||||
|
||||
return (
|
||||
<Navbar
|
||||
padding="md"
|
||||
// Breakpoint at which navbar will be hidden if hidden prop is true
|
||||
hiddenBreakpoint="sm"
|
||||
// Hides navbar when viewport size is less than value specified in hiddenBreakpoint
|
||||
hidden={!props.opened}
|
||||
width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
|
||||
>
|
||||
<Button leftIcon={<BsMap />} variant="white" className={activePage === "locations" ? classes.activeButton : classes.button} component={Link} to="/locations" onClick={() => setActivePage("locations")} >
|
||||
Locations
|
||||
</Button>
|
||||
<Navbar height={800} width={{ sm: 300 }} p="md" className={classes.navbar}>
|
||||
{/* <Navbar.Section className={classes.header}>
|
||||
<Group position="apart">
|
||||
<Logo width={120} />
|
||||
<Code sx={{ fontWeight: 700 }}>v3.1.2</Code>
|
||||
</Group>
|
||||
</Navbar.Section> */}
|
||||
|
||||
<Navbar.Section grow className={classes.links} component={ScrollArea}>
|
||||
<div className={classes.linksInner}>{links}</div>
|
||||
</Navbar.Section>
|
||||
|
||||
{/* <Navbar.Section className={classes.footer}>
|
||||
<UserButton
|
||||
image="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&q=80"
|
||||
name="Ann Nullpointer"
|
||||
email="anullpointer@yahoo.com"
|
||||
/>
|
||||
</Navbar.Section> */}
|
||||
</Navbar>
|
||||
// <Navbar
|
||||
// padding="md"
|
||||
// // Breakpoint at which navbar will be hidden if hidden prop is true
|
||||
// hiddenBreakpoint="sm"
|
||||
// // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
|
||||
// hidden={!props.opened}
|
||||
// width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
|
||||
// >
|
||||
// <Button leftIcon={<BsMap />} variant="white" className={activePage === "locations" ? classes.activeButton : classes.button} component={Link} to="/locations" onClick={() => setActivePage("locations")} >
|
||||
// Locations
|
||||
// </Button>
|
||||
|
||||
{/* <UnstyledButton component={Link} to="/locations" className={activePage === "locations" ? classes.activeButton : classes.button} >
|
||||
<Group>
|
||||
<BsMap />
|
||||
<Text>Locations</Text>
|
||||
</Group>
|
||||
// <Button leftIcon={<BsMap />} variant="white" className={activePage === "rooms" ? classes.activeButton : classes.button} component={Link} to="/rooms" onClick={() => setActivePage("rooms")} >
|
||||
// Rooms
|
||||
// </Button>
|
||||
|
||||
</UnstyledButton> */}
|
||||
<UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => changeView("rooms")} >
|
||||
<Group>
|
||||
<BsMap />
|
||||
<Text>Rooms</Text>
|
||||
</Group>
|
||||
// {/* <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => changeView("rooms")} >
|
||||
// <Group>
|
||||
// <BsMap />
|
||||
// <Text>Rooms</Text>
|
||||
// </Group>
|
||||
|
||||
</UnstyledButton>
|
||||
// </UnstyledButton> */}
|
||||
|
||||
</Navbar>
|
||||
// </Navbar>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
114
frontend/src/components/sidebar/SidebarLinksGroup.js
Normal file
114
frontend/src/components/sidebar/SidebarLinksGroup.js
Normal file
@@ -0,0 +1,114 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Group, Box, Collapse, ThemeIcon, Text, UnstyledButton, createStyles } from '@mantine/core';
|
||||
import { BiChevronLeft, BiChevronRight } from 'react-icons/bi';
|
||||
import { useAtom } from 'jotai';
|
||||
import { activePageAtom, roomFilterAtom } from '../../state/main';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
control: {
|
||||
fontWeight: 500,
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
|
||||
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
|
||||
fontSize: theme.fontSizes.sm,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
|
||||
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
|
||||
},
|
||||
},
|
||||
|
||||
link: {
|
||||
fontWeight: 500,
|
||||
display: 'block',
|
||||
textDecoration: 'none',
|
||||
padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
|
||||
paddingLeft: 31,
|
||||
marginLeft: 30,
|
||||
fontSize: theme.fontSizes.sm,
|
||||
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
|
||||
borderLeft: `1px solid ${
|
||||
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
|
||||
}`,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
|
||||
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[6]
|
||||
}
|
||||
},
|
||||
|
||||
chevron: {
|
||||
transition: 'transform 200ms ease',
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
export function LinksGroup(props) {
|
||||
const { icon: Icon, label, initiallyOpened, links } = props
|
||||
const { classes, theme } = useStyles();
|
||||
const hasLinks = Array.isArray(links);
|
||||
const [opened, setOpened] = useState(initiallyOpened || false);
|
||||
// Navigation State
|
||||
const [activePage, setActivePage] = useAtom(activePageAtom)
|
||||
const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
|
||||
|
||||
const ChevronIcon = theme.dir === 'ltr' ? BiChevronRight : BiChevronLeft;
|
||||
|
||||
const navigate = (event, location) => {
|
||||
// event.preventDefault()
|
||||
if (location === "rooms") {
|
||||
setRoomFilter({})
|
||||
}
|
||||
console.log("navigate to: ", location)
|
||||
setActivePage(location)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const items = (hasLinks ? links : []).map((link) => (
|
||||
<>
|
||||
<Link
|
||||
component={Link}
|
||||
className={activePage === label.toLowerCase() ? classes.link : classes.link}
|
||||
to={link.link}
|
||||
// href={link.link}
|
||||
key={link.label}
|
||||
onClick={(e) => {navigate(e, label.toLowerCase())}}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</>
|
||||
));
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<UnstyledButton onClick={() => setOpened((o) => !o)} className={classes.control}>
|
||||
<Group position="apart" spacing={0}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<ThemeIcon variant="light" size={30}>
|
||||
<Icon size={18} />
|
||||
</ThemeIcon>
|
||||
<Box ml="md">{label}</Box>
|
||||
</Box>
|
||||
{hasLinks && (
|
||||
<ChevronIcon
|
||||
className={classes.chevron}
|
||||
size={14}
|
||||
style={{
|
||||
transform: opened ? `rotate(${theme.dir === 'rtl' ? -90 : 90}deg)` : 'none',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
{hasLinks ? <Collapse in={opened}>{items}</Collapse> : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
48
frontend/src/components/sidebar/UserButton.js
Normal file
48
frontend/src/components/sidebar/UserButton.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
UnstyledButton,
|
||||
Group,
|
||||
Avatar,
|
||||
Text,
|
||||
createStyles,
|
||||
} from '@mantine/core';
|
||||
import { BiChevronRight } from 'react-icons/bi';
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
user: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
padding: theme.spacing.md,
|
||||
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
export function UserButton(props) {
|
||||
const { image, name, email, icon, ...others } = props
|
||||
const { classes } = useStyles();
|
||||
|
||||
return (
|
||||
<UnstyledButton className={classes.user} {...others}>
|
||||
<Group>
|
||||
<Avatar src={image} radius="xl" />
|
||||
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text size="sm" weight={500}>
|
||||
{name}
|
||||
</Text>
|
||||
|
||||
<Text color="dimmed" size="xs">
|
||||
{email}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{icon || <BiChevronRight size={14} />}
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user