diff options
author | Mo Tarbin <mhed.t91@gmail.com> | 2024-06-30 18:55:39 -0400 |
---|---|---|
committer | Mo Tarbin <mhed.t91@gmail.com> | 2024-06-30 18:55:39 -0400 |
commit | 2657469964e24ffbeb905024532120395f6e797c (patch) | |
tree | 2fe9db8a4ecfa92d854ca94f7586d81163c8bd25 /src/views/components/NavBar.jsx | |
download | donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.gz donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.bz2 donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.zip |
move to Donetick Org, First commit frontend
Diffstat (limited to '')
-rw-r--r-- | src/views/components/NavBar.jsx | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/src/views/components/NavBar.jsx b/src/views/components/NavBar.jsx new file mode 100644 index 0000000..25463b2 --- /dev/null +++ b/src/views/components/NavBar.jsx @@ -0,0 +1,177 @@ +import Logo from '@/assets/logo.svg' +import { + AccountBox, + HomeOutlined, + ListAltRounded, + Logout, + MenuRounded, + Message, + SettingsOutlined, + ShareOutlined, + Widgets, +} from '@mui/icons-material' +import { + Box, + Drawer, + IconButton, + List, + ListItemButton, + ListItemContent, + ListItemDecorator, + Typography, +} from '@mui/joy' +import { useState } from 'react' +import { useLocation } from 'react-router-dom' +import { version } from '../../../package.json' +import NavBarLink from './NavBarLink' +const links = [ + { + to: '/my/chores', + label: 'Home', + icon: <HomeOutlined />, + }, + { + to: '/chores', + label: 'Desktop View', + icon: <ListAltRounded />, + }, + { + to: '/things', + label: 'Things', + icon: <Widgets />, + }, + { + to: '/settings#sharing', + label: 'Sharing', + icon: <ShareOutlined />, + }, + { + to: '/settings#notifications', + label: 'Notifications', + icon: <Message />, + }, + { + to: '/settings#account', + label: 'Account', + icon: <AccountBox />, + }, + { + to: '/settings', + label: 'Settings', + icon: <SettingsOutlined />, + }, +] + +const NavBar = () => { + const [drawerOpen, setDrawerOpen] = useState(false) + const [openDrawer, closeDrawer] = [ + () => setDrawerOpen(true), + () => setDrawerOpen(false), + ] + const location = useLocation() + // if url has /landing then remove the navbar: + if ( + ['/', '/signup', '/login', '/landing', '/forgot-password'].includes( + location.pathname, + ) + ) { + return null + } + + return ( + <nav className='flex gap-2 p-3'> + <IconButton size='sm' variant='plain' onClick={() => setDrawerOpen(true)}> + <MenuRounded /> + </IconButton> + <Box className='flex items-center gap-2'> + <img component='img' src={Logo} width='34' /> + <Typography + level='title-lg' + sx={{ + fontWeight: 700, + fontSize: 24, + }} + > + Done + <span + style={{ + color: '#06b6d4', + fontWeight: 600, + }} + > + tick✓ + </span> + </Typography> + </Box> + <Drawer + open={drawerOpen} + onClose={closeDrawer} + size='sm' + onClick={closeDrawer} + > + <div> + {/* <div className='align-center flex px-5 pt-4'> + <ModalClose size='sm' sx={{ top: 'unset', right: 20 }} /> + </div> */} + <List + // sx={{ p: 2, height: 'min-content' }} + size='md' + onClick={openDrawer} + sx={{ borderRadius: 4, width: '100%', padding: 1 }} + > + {links.map((link, index) => ( + <NavBarLink key={index} link={link} /> + ))} + </List> + </div> + <div> + <List + sx={{ + p: 2, + height: 'min-content', + position: 'absolute', + bottom: 0, + borderRadius: 4, + width: '100%', + padding: 2, + }} + size='md' + onClick={openDrawer} + > + <ListItemButton + onClick={() => { + localStorage.removeItem('ca_token') + localStorage.removeItem('ca_expiration') + // go to login page: + window.location.href = '/login' + }} + sx={{ + py: 1.2, + }} + > + <ListItemDecorator> + <Logout /> + </ListItemDecorator> + <ListItemContent>Logout</ListItemContent> + </ListItemButton> + <Typography + level='body-xs' + sx={{ + // p: 2, + p: 1, + color: 'text.tertiary', + textAlign: 'center', + bottom: 0, + // mb: -2, + }} + > + V{version} + </Typography> + </List> + </div> + </Drawer> + </nav> + ) +} + +export default NavBar |