reworking sidebar

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​"}​

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 { GoLocation, GoDashboard, GoGear } from 'react-icons/go'
-import { BsMap } from 'react-icons/bs'
+import { BsDoorClosed, BsDiagram2 } from 'react-icons/bs'
+import { BiCabinet } from 'react-icons/bi'
 
 
 const useStyles = createStyles((theme) => ({
-    button: {
+    navbar: {
-      display: 'block',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
-      width: '100%',
+      paddingBottom: 0,
-      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],
     },
-    },
-    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': {
+    header: {
-        //   backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.blue[4],
+      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
+        <Navbar height={800} width={{ sm: 300 }} p="md" className={classes.navbar}>
-            padding="md"
+        {/* <Navbar.Section className={classes.header}>
-            // Breakpoint at which navbar will be hidden if hidden prop is true
+          <Group position="apart">
-            hiddenBreakpoint="sm"
+            <Logo width={120} />
-            // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
+            <Code sx={{ fontWeight: 700 }}>v3.1.2</Code>
-            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>
+        </Navbar.Section> */}
   
-            </UnstyledButton> */}
+        <Navbar.Section grow className={classes.links} component={ScrollArea}>
-            <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => changeView("rooms")} >
+          <div className={classes.linksInner}>{links}</div>
-                <Group>
+        </Navbar.Section>
-                    <BsMap />
-                    <Text>Rooms</Text>
-                </Group>
-
-            </UnstyledButton>
   
+        {/* <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>
+
+        //     <Button leftIcon={<BsMap />} variant="white" className={activePage === "rooms" ? classes.activeButton : classes.button} component={Link} to="/rooms" onClick={() => setActivePage("rooms")} >
+        //         Rooms
+        //     </Button>
+
+        //     {/* <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => changeView("rooms")} >
+        //         <Group>
+        //             <BsMap />
+        //             <Text>Rooms</Text>
+        //         </Group>
+
+        //     </UnstyledButton> */}
+           
+        // </Navbar>
     )
 }
 

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) => (
+    <>
+        <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}
+    </>
+  );
+}

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 (
+    <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>
+  );
+}