deranjer/goInventorize
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

making frontend responsive starting item backend routes

Browse Source
This commit is contained in:
deranjer
2022-03-30 22:57:38 -04:00
parent 1bed72250d
commit a70baddc4b
17 changed files with 909 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/SideBar.js
View File

@@ -1,7 +1,7 @@
import React, {useState } from 'react';
import { useAtom } from 'jotai';
import { activePageAtom, roomFilterAtom } from '../state/main';
import { Navbar, Group, Code, ScrollArea, createStyles } from '@mantine/core';
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';
@@ -80,6 +80,8 @@ const useStyles = createStyles((theme) => ({
function SideBar(props) {
const { classes } = useStyles();
const [menuOpened] = useAtom(menuOpenedAtom)
@@ -88,51 +90,31 @@ function SideBar(props) {
const links = sideBarData.map((item) => <LinksGroup {...item} key={item.label} />);
return (
<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>
// <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>
<>
<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>
</>
)
}