diff --git a/app/log/goInventorize.log b/app/log/goInventorize.log index 7447b3d..99eeb4d 100644 --- a/app/log/goInventorize.log +++ b/app/log/goInventorize.log @@ -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​"}​ diff --git a/frontend/src/components/SideBar.js b/frontend/src/components/SideBar.js index de82c66..555f395 100644 --- a/frontend/src/components/SideBar.js +++ b/frontend/src/components/SideBar.js @@ -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) => ); + return ( - ) } diff --git a/frontend/src/components/sidebar/SidebarLinksGroup.js b/frontend/src/components/sidebar/SidebarLinksGroup.js new file mode 100644 index 0000000..8d6f728 --- /dev/null +++ b/frontend/src/components/sidebar/SidebarLinksGroup.js @@ -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) => ( + <> + {navigate(e, label.toLowerCase())}} + > + {link.label} + + + )); + + + return ( + <> + setOpened((o) => !o)} className={classes.control}> + + + + + + {label} + + {hasLinks && ( + + )} + + + {hasLinks ? {items} : null} + + ); +} \ No newline at end of file diff --git a/frontend/src/components/sidebar/UserButton.js b/frontend/src/components/sidebar/UserButton.js new file mode 100644 index 0000000..1a13cfc --- /dev/null +++ b/frontend/src/components/sidebar/UserButton.js @@ -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 ( + + + + +
+ + {name} + + + + {email} + +
+ + {icon || } + + + ); +} \ No newline at end of file