123 lines
3.7 KiB
JavaScript
123 lines
3.7 KiB
JavaScript
import React, {useState } from 'react';
|
|
import { useAtom } from 'jotai';
|
|
import { activePageAtom, menuOpenedAtom, roomFilterAtom } from '../state/main';
|
|
import { Navbar, Group, ScrollArea, createStyles, MediaQuery } from '@mantine/core';
|
|
import { LinksGroup } from './sidebar/SidebarLinksGroup';
|
|
// import { UserButton } from './sidebar/UserButton';
|
|
import { Link } from 'react-router-dom';
|
|
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) => ({
|
|
navbar: {
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
|
|
paddingBottom: 0,
|
|
},
|
|
|
|
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 [menuOpened] = useAtom(menuOpenedAtom)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const links = sideBarData.map((item) => <LinksGroup {...item} key={item.label} />);
|
|
|
|
return (
|
|
<>
|
|
<MediaQuery smallerThan="md" styles={!menuOpened && { 'display': 'none'}}>
|
|
<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>
|
|
</MediaQuery>
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
export default SideBar |