chore: Navigation

packages/client/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

packages/client/src/App.tsx

@@ -21,34 +21,66 @@ import { EnvironmentContextProvider } from './context/EnvironmentContext';
 import { AuthProvider } from './context/AuthContext';
 import { AdminGuard } from './guards/AdminGuard';
 import { LogoutPage } from './pages/LogoutPage';
+import { CssBaseline, Box, styled } from '@mui/material';
+import { useState } from 'react';
+import { SideBar } from './components/SideBar';
+
+const drawerWidth = 240;
+
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ open?: boolean; }>(({ theme, open }) => ({
+  flexGrow: 1,
+  padding: theme.spacing(3),
+  transition: theme.transitions.create('margin', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginRight: -drawerWidth,
+  ...(open && {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginRight: 0,
+  }),
+}));
 
 function App() {
+  const [drawerOpen, setDrawerOpen] = useState(true);
+
   return (
     <ThemeProvider>
       <BrowserRouter>
         <EnvironmentContextProvider>
           <AuthProvider>
-            <NavBar />
-            <Routes>
-              <Route path={'/'} element={<HomePage />} />
-              <Route path={'/callback'} element={<AuthCallback />} />
-              <Route path={'/loginpage'} element={<LoginPage />} />
-              <Route element={<AdminGuard />}>
-                <Route path={'/newproject'} element={<NewProject />} />
-                <Route path={'/projectcontrol'} element={<ProjectControl />} />
-                <Route path={'/userpermissions'} element={<ProjectUserPermissions />} />
-                <Route path={'/newstudy'} element={<NewStudy />} />
-                <Route path={'/studycontrol'} element={<StudyControl />} />
-                <Route path={'/studyuserpermissions'} element={<StudyUserPermissions />} />
-                <Route path={'/downloadtags'} element={<DownloadTags />} />
-                <Route path={'/successpage'} element={<SuccessPage />} />
-                <Route path={'/datasetcontrols'} element={<DatasetControls />} />
-                <Route path={'/projectaccess'} element={<ProjectAccess />} />
-                <Route path={'/contribute'} element={<ContributePage />} />
-                <Route path={'/tagging'} element={<TagView />} />
-                <Route path={'/logoutpage'} element={<LogoutPage />} />
-              </Route>
-            </Routes>
+            <Box sx={{ display: 'flex' }}>
+              <CssBaseline />
+              <NavBar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+                <Main open={drawerOpen}>
+                  <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
+                  <Box sx={{ display: 'flex' }}>
+                    <Routes>
+                      <Route path={'/'} element={<HomePage />} />
+                      <Route path={'/callback'} element={<AuthCallback />} />
+                      <Route path={'/loginpage'} element={<LoginPage />} />
+                      <Route element={<AdminGuard />}>
+                        <Route path={'/project/new'} element={<NewProject />} />
+                        <Route path={'/project/controls'} element={<ProjectControl />} />
+                        <Route path={'/project/permissions'} element={<ProjectUserPermissions />} />
+                        <Route path={'/study/new'} element={<NewStudy />} />
+                        <Route path={'/study/controls'} element={<StudyControl />} />
+                        <Route path={'/study/permissions'} element={<StudyUserPermissions />} />
+                        <Route path={'/study/tags'} element={<DownloadTags />} />
+                        <Route path={'/successpage'} element={<SuccessPage />} />
+                        <Route path={'/dataset/controls'} element={<DatasetControls />} />
+                        <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
+                        <Route path={'/study/contribute'} element={<ContributePage />} />
+                        <Route path={'/tagging'} element={<TagView />} />
+                        <Route path={'/logoutpage'} element={<LogoutPage />} />
+                      </Route>
+                    </Routes>
+                  </Box>
+                </Main>
+              </Box>
           </AuthProvider>
         </EnvironmentContextProvider>
       </BrowserRouter>

packages/client/src/components/NavigationBar.tsx

@@ -1,43 +1,31 @@
-import { AppBar, Toolbar, CssBaseline, Typography, Link } from '@mui/material';
-import { SideBar } from './SideBar';
-import { Divider } from '@mui/material';
-import { useAuth } from '../context/AuthContext';
-import { useNavigate } from 'react-router-dom';
+import { AppBar, Toolbar, Typography } from '@mui/material';
+import { FC, Dispatch, SetStateAction } from 'react';
+import { IconButton } from '@mui/material';
+import { Menu } from '@mui/icons-material';
 
-function NavBar() {
-  const { token, initialized } = useAuth();
-  const navigate = useNavigate();
+export interface NavBarProps {
+  drawerOpen: boolean;
+  setDrawerOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const NavBar: FC<NavBarProps> = ({ drawerOpen, setDrawerOpen }) => {
   return (
     <AppBar>
-      <CssBaseline />
-      <Toolbar>
-        <SideBar />
+      <Toolbar sx={{ backgroundColor: 'white' }}>
+        <IconButton size='large' edge='start' color='inherit' aria-label='menu' sx={{ mr: 4, ml: 2 }} onClick={() => setDrawerOpen(!drawerOpen)}>
+          <Menu sx={{ color: 'black' }} />
+        </IconButton>
         <Typography
           sx={{
-            flexGrow: '1',
-            textAlign: 'right',
-            paddingRight: '1rem'
+            flexGrow: 1,
+            textAlign: 'left',
+            paddingRight: '1rem',
+            color: 'black'
           }}
         >
           ASL-LEX SignLab
         </Typography>
-        <Divider orientation="vertical" flexItem />
-        {!token || !initialized ? (
-          <div>
-            <Link sx={{ fontSize: '16px', paddingLeft: '1rem', color: 'white' }} underline="none" href={`/loginpage`}>
-              Log In
-            </Link>
-            <Link sx={{ fontSize: '16px', paddingLeft: '1rem', color: 'white' }} underline="none" href={`/loginpage`}>
-              Sign Up
-            </Link>
-          </div>
-        ) : (
-          <Link sx={{ fontSize: '16px', paddingLeft: '1rem', color: 'white' }} underline="none" onClick={() => navigate('/logoutpage')}>
-            Log Out
-          </Link>
-        )}
       </Toolbar>
     </AppBar>
   );
 }
-export { NavBar };

packages/client/src/components/SideBar.tsx

@@ -1,45 +1,117 @@
-import { useState } from 'react';
-import { Divider, Drawer, IconButton, List, Typography, Link } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import { Environment } from './Environment';
-import { Navigation } from './Navigation';
+import { FC, ReactNode, useState } from 'react';
+import { Collapse, Divider, Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { ExpandMore, ExpandLess, School, Dataset, Work, Logout } from '@mui/icons-material';
 import { useAuth } from '../context/AuthContext';
+import {useNavigate} from 'react-router-dom';
 
-function SideBar() {
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const { token, initialized } = useAuth();
+interface SideBarProps {
+  open: boolean;
+  drawerWidth: number;
+}
+
+export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+
+  const navItems: NavItemProps[] = [
+    {
+      name: 'Projects',
+      icon: <Work />,
+      action: () => {},
+      subItems: [
+        { name: 'New Project', action: () => navigate('/project/new') },
+        { name: 'Project Control', action: () => navigate('/project/controls') },
+        { name: 'User Permissions', action: () => navigate('/project/permissions') },
+      ]
+    },
+    {
+      name: 'Studies',
+      action: () => {},
+      icon: <School />,
+      subItems: [
+        { name: 'New Study', action: () => navigate('/study/new') },
+        { name: 'Study Control', action: () => navigate('/study/contols') },
+        { name: 'User Permissions', action: () => navigate('/study/permissions') },
+        { name: 'Entry Controls', action: () => navigate('/study/controls') },
+        { name: 'Download Tags', action: () => navigate('/study/tags') }
+      ]
+    },
+    {
+      name: 'Datasets',
+      action: () => {},
+      icon: <Dataset />,
+      subItems: [
+        { name: 'Dataset Control', action: () => navigate('/dataset/controls') },
+        { name: 'Project Access', action: () => navigate('/dataset/projectaccess') }
+      ]
+    },
+    {
+      name: 'Logout',
+      action: logout,
+      icon: <Logout />
+    }
+  ];
 
   return (
-    <div>
-      <Drawer PaperProps={{ sx: { width: '25%' } }} open={openDrawer} onClose={() => setOpenDrawer(false)}>
-        <List sx={{ marginTop: '20px' }}>
-          <Link
-            sx={{
-              fontSize: '22px',
-              paddingLeft: '16px'
-            }}
-            underline={'none'}
-            href="/"
-            onClick={() => setOpenDrawer(false)}
-          >
-            Home
-          </Link>
-        </List>
-        <Divider sx={{ paddingTop: '8px' }} orientation="horizontal" flexItem />
-        {token && initialized && (
-          <div>
-            <Typography variant="h5">Environment</Typography>
-            <Environment />
-            <Divider orientation="horizontal" flexItem />
-            <Typography variant="h5">Navigation</Typography>
-            <Navigation />
-          </div>
-        )}
-      </Drawer>
-      <IconButton onClick={() => setOpenDrawer(!openDrawer)}>
-        <MenuIcon />
-      </IconButton>
-    </div>
+    <Drawer
+      variant='persistent'
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          width: drawerWidth,
+          boxSizing: 'border-box',
+          backgroundColor: '#103F68',
+          color: 'white',
+          mt: '64px'
+        }
+      }}
+      anchor='left'
+      open={open}
+    >
+      <List>
+        {navItems.map((navItem) => <NavItem {...navItem} key={navItem.name} />)}
+      </List>
+    </Drawer>
   );
+};
+
+interface NavItemProps {
+  action: () => void;
+  name: string;
+  icon?: ReactNode;
+  subItems?: NavItemProps[]
 }
-export { SideBar };
+
+const NavItem: FC<NavItemProps> = ({ action, name, icon, subItems }) => {
+  const isExpandable = subItems && subItems.length > 0;
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(!open);
+    action();
+  };
+
+  const menuItemChildren = isExpandable ? (
+    <Collapse in={open} timeout='auto' unmountOnExit>
+      <Divider />
+      <List disablePadding>
+        {subItems.map((item, index) => <NavItem {...item} key={index} />)}
+      </List>
+    </Collapse>
+  ) : null;
+
+  return (
+    <>
+      <ListItem>
+        <ListItemButton component='a' onClick={handleClick}>
+          {icon && <ListItemIcon>{icon}</ListItemIcon>}
+          <ListItemText primary={name} inset={!icon} />
+          {isExpandable && !open && <ExpandMore />}
+          {isExpandable && open && <ExpandLess />}
+        </ListItemButton>
+      </ListItem>
+      {menuItemChildren}
+    </>
+  );
+};