feat: skeleton of app

1 files changed, 100 insertions, 0 deletions

diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js
new file mode 100644
index 0000000..0bbc550
--- /dev/null
+++ b/src/components/NavBar/index.js
@@ -0,0 +1,100 @@
+import {useState} from 'react';
+import { Link } from 'react-router-dom';
+import {AppBar, Box, Button, Drawer, IconButton, List, ListItem, ListItemButton, ListItemText, Toolbar} from '@mui/material';
+import {Menu} from '@mui/icons-material';
+
+export default function NavBar({ isLoggedIn, pages, logout }) {
+  const drawerWidth = 200;
+
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  return isLoggedIn &&
+    <Box sx={{ display: 'flex' }}>
+      <AppBar
+        component='nav'
+        sx={{position: 'initial'}}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2, display: { sm: 'none' } }}
+          >
+            <Menu />
+          </IconButton>
+          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+            {pages.map(p => 
+              p.hidden || 
+<Link key={p.link} to={p.link} style={{textDecorationLine:'none'}}>
+  <Button key={p.label} sx={{ textDecorationLine:'none', color: '#ffffff' }}>
+    {p.label}
+  </Button>
+</Link>
+            )}
+            <Button onClick={logout} sx={{color:'#ffffff'}}>
+            Logout
+            </Button>
+          </Box>
+        </Toolbar>
+      </AppBar>
+
+
+      <Box component="nav">
+        <Drawer
+          sx={{
+            width: drawerWidth,
+            flexShrink: 0,
+            '& .MuiDrawer-paper': {
+              width: drawerWidth,
+              boxSizing: 'border-box',
+            },
+
+            display: { xs: 'block', sm: 'none' },
+          }}
+          variant='temporary'
+          anchor='left'
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{
+            keepMounted:true,
+          }}
+        >
+          <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
+            <List>
+              {pages.map(({label, link, hidden}) => (
+                hidden ? <div key={link}></div> :
+                  <ListItem key={link} disablePadding>
+
+                    <Link to={link} style={{textDecorationLine:'none', width: '100%'}}>
+                      <ListItemButton
+                        key={label}
+                        sx={{
+                          width:'100%',
+                          color: 'primary.main',
+                          textAlign: 'left',
+                        }}
+                      >
+                        <ListItemText primary={label} sx={{ width:'100%'}} />
+                      </ListItemButton>
+                    </Link>
+                  </ListItem>
+              ))}
+              <ListItem disablePadding>
+                <ListItemButton
+                  onClick={logout}
+                  sx={{width:'100%', color: 'primary.main' }}
+                >
+                  <ListItemText primary={'Logout'}/>
+                </ListItemButton>
+              </ListItem>
+            </List>
+          </Box>
+        </Drawer>
+      </Box>
+    </Box>;
+}