Updated hamburger menu (#1119)

## JIRA Ticket

https://jira.csiro.au/browse/BSS-265
Subtasks : 1 - **https://jira.csiro.au/browse/BSS-295**
                 2 - **https://jira.csiro.au/browse/BSS-296**
                 3 - **https://jira.csiro.au/browse/BSS-297**

## Description

Updated the hamburger menu/side navigation menu to align with our new
design specifications. This update presents an opportunity for us to
review the menu structure and discuss which options should be included
or excluded.


## Proposed Changes

 - New Menu items added to the existing hamburger/side-nav menu
 - Menu items added :
     - Help
- Switch Org (Have a placeholder based on a check whether you're part of
different org)
     - Sign out being directed to where user was directed to. 
- Enhanced styling, added border, shadow to make it look distinct from
content page
- Laid out top and bottom menu items as according to Figma design
- Added placeholder routes for switch org and help buttons which can be
simply used in future.

## How to Test
Just run the app and you should be able to see the new navigation menu
to the left.
If you click on help, switch org, sign-out, you should see a blank
meaning the respective components will be connected to them.

## Additional Information

Currently, there is a profile option as per the Figma design. There's
some ambiguity regarding what should be included under the profile
section so that option hasn't been included in this design.

Notification is not in scope for V1.

For now, I've linked the sign-out option that redirects to the user page
where you can sign out which was previously displayed as User.

## Checklist

- [ Y]  I have confirmed all commits have been signed.
- [ Y ] I have added JSDoc style comments to any new functions or
classes.
- [ Y ] Relevant documentation such as READMEs, guides, and class
comments are updated.

app/src/constants/routes.tsx

@@ -38,6 +38,8 @@ export const REVISION = '/revision/';
 export const ABOUT_BUILD = '/about-build';
 export const AUTOINCREMENT = '/autoincrements/';
 export const PROJECT_ATTACHMENT = '/attachment/';
+export const SWITCH_ORG = '/switch-organisation';
+export const HELP = '/help';
 
 export function getRecordRoute(
   project_id: ProjectID,

app/src/gui/layout/appBar.tsx

@@ -47,26 +47,39 @@ import ExpandMore from '@mui/icons-material/ExpandMore';
 import AccountTree from '@mui/icons-material/AccountTree';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ListItemText from '@mui/material/ListItemText';
-
 import * as ROUTES from '../../constants/routes';
 import {getActiveProjectList} from '../../sync/projects';
 import SystemAlert from '../components/alert';
 import {ProjectInformation} from '@faims3/data-model';
 import AppBarAuth from '../components/authentication/appbarAuth';
 import {TokenContents} from '@faims3/data-model';
 import {checkToken} from '../../utils/helpers';
-// import ConnectedStatus from '../components/authentication/connectedStatus';
 import SyncStatus from '../components/sync';
 import {NOTEBOOK_NAME, NOTEBOOK_NAME_CAPITALIZED} from '../../buildconfig';
+import HelpIcon from '@mui/icons-material/Help';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import {now} from 'lodash';
+
+/**
+ * Represents the properties for a menu list item.
+ * @typedef {Object} ProjectListItemProps
+ * @property {string} title - The title of the menuitem.
+ * @property {React.ReactElement} icon - The icon associated with the menuitem.
+ * @property {string} to - The path to navigate to for this menuitem.
+ * @property {boolean} disabled - Whether the menuitem is disabled in the list.
+ */
 
 type ProjectListItemProps = {
   title: string;
   icon: any;
   to: string;
   disabled: boolean;
 };
-// in place of deprecated React.ReactChild
-type IconType =
+
+/**
+ * Represents the type of icon used in the navigation menu.
+ * @typedef {React.ReactElement | string | number | undefined} IconType
+ */ type IconType =
   | undefined
   | string
   | number
@@ -115,14 +128,15 @@ const useStyles = makeStyles({
   },
   drawerPaper: {
     width: drawerWidth,
+    height: '100vh',
+    boxShadow: '2px 0 10px rgba(0, 0, 0, 0.3)',
+    borderRight: '1px solid rgba(0, 0, 0, 0.1)',
   },
   drawerHeader: {
     display: 'flex',
     alignItems: 'center',
     padding: theme.spacing(0, 1),
-    // necessary for content to be below app bar
     minHeight: '64px',
-    // ...theme.mixins.toolbar,
     justifyContent: 'flex-end',
   },
   content: {
@@ -144,8 +158,40 @@ const useStyles = makeStyles({
   nested: {
     paddingLeft: theme.spacing(4),
   },
+  /**
+   * Styles for the ListItemText component in the navigation items.
+   * @type {Object}
+   */
+  listItemText: {
+    fontSize: '1.1rem',
+    fontWeight: 'bold',
+    color: 'rgba(0, 0, 0, 0.54)', // Use the same gray color as the icons (this is a common MUI icon color)
+  },
+  /**
+   * Styles for the bottom section options in the drawer.
+   * Includes padding and a border at the top.
+   * @type {Object}
+   */
+  bottomOptions: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(2, 0),
+  },
+  /**
+   * Ensures that the bottom section of the drawer is positioned at the bottom of the viewport.
+   * @type {Object}
+   */
+  bottomSection: {
+    marginTop: 'auto',
+  },
 });
 
+/**
+ * Retrieves a list of nested menu items to be displayed in the navigation menu.
+ * @function
+ * @param {ProjectInformation[]} pouchProjectList - List of project information.
+ * @returns {MenuItemProps} - The item for nested menu.
+ */
+
 function getNestedProjects(pouchProjectList: ProjectInformation[]) {
   const projectListItems: ProjectListItemProps[] = [];
   pouchProjectList.map(project_info => {
@@ -168,9 +214,16 @@ function getNestedProjects(pouchProjectList: ProjectInformation[]) {
 type NavbarProps = {
   token?: null | undefined | TokenContents;
 };
+/**
+ * MainAppBar component handles the display of the navigation drawer and the app bar.
+ * It includes top menu items, bottom menu items, and conditional rendering based on authentication status.
+ *
+ * @component
+ * @param {NavbarProps} props - Props passed to the component.
+ * @returns {JSX.Element} - The rendered MainAppBar component.
+ */
 export default function MainAppBar(props: NavbarProps) {
   const classes = useStyles();
-  // const globalState = useContext(store);
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const isAuthenticated = checkToken(props.token);
@@ -205,26 +258,28 @@ export default function MainAppBar(props: NavbarProps) {
             disabled: true,
           },
   ];
+
   const bottomMenuItems: Array<MenuItemProps> = [
+    {
+      title: 'About Build',
+      icon: <SettingsIcon />,
+      to: ROUTES.ABOUT_BUILD,
+      disabled: false,
+    },
+
     isAuthenticated
       ? {
-          title: 'User',
+          title: 'Sign out',
           icon: <AccountCircleIcon />,
           to: ROUTES.SIGN_IN,
           disabled: false,
         }
       : {
-          title: 'User',
+          title: 'Sign out',
           icon: <AccountCircleIcon />,
           to: '/',
           disabled: true,
         },
-    {
-      title: 'About Build',
-      icon: <SettingsIcon />,
-      to: ROUTES.ABOUT_BUILD,
-      disabled: false,
-    },
   ];
 
   const [nestedMenuOpen, setNestedMenuOpen] = useState<{
@@ -296,7 +351,9 @@ export default function MainAppBar(props: NavbarProps) {
                     disabled={item.disabled}
                   >
                     <ListItemIcon>{item.icon}</ListItemIcon>
-                    <ListItemText>{item.title} </ListItemText>
+                    <ListItemText classes={{primary: classes.listItemText}}>
+                      {item.title}{' '}
+                    </ListItemText>
                     {item.nested.length === 0 ? (
                       <CircularProgress size={12} thickness={4} />
                     ) : nestedMenuOpen[item.title] ? (
@@ -329,7 +386,10 @@ export default function MainAppBar(props: NavbarProps) {
                             onClick={toggle}
                           >
                             <ListItemIcon>{nestedItem.icon}</ListItemIcon>
-                            <ListItemText primary={nestedItem.title} />
+                            <ListItemText
+                              primary={nestedItem.title}
+                              classes={{primary: classes.listItemText}}
+                            />
                           </ListItemButton>
                         )
                       )}
@@ -345,33 +405,41 @@ export default function MainAppBar(props: NavbarProps) {
                   onClick={toggle}
                 >
                   <ListItemIcon>{item.icon}</ListItemIcon>
-                  <ListItemText primary={item.title} />
+                  <ListItemText
+                    primary={item.title}
+                    classes={{primary: classes.listItemText}}
+                  />
                 </ListItemButton>
               );
             })}
           </List>
-          <Divider />
-          <List>
-            {bottomMenuItems.map(
-              (item: {
-                title: string;
-                icon: IconType;
-                disabled: boolean;
-                to: any;
-              }) => (
-                <ListItemButton
-                  key={item.title}
-                  disabled={item.disabled}
-                  to={item.to}
-                  component={RouterLink}
-                  onClick={toggle}
-                >
-                  <ListItemIcon>{item.icon}</ListItemIcon>
-                  <ListItemText primary={item.title} />
-                </ListItemButton>
-              )
-            )}
-          </List>
+          <div className={classes.bottomSection}>
+            <Divider />
+            <List className={classes.bottomOptions}>
+              {bottomMenuItems.map(
+                (item: {
+                  title: string;
+                  icon: IconType;
+                  disabled: boolean;
+                  to: any;
+                }) => (
+                  <ListItemButton
+                    key={item.title}
+                    disabled={item.disabled}
+                    to={item.to}
+                    component={RouterLink}
+                    onClick={toggle}
+                  >
+                    <ListItemIcon>{item.icon}</ListItemIcon>
+                    <ListItemText
+                      primary={item.title}
+                      classes={{primary: classes.listItemText}}
+                    />
+                  </ListItemButton>
+                )
+              )}
+            </List>
+          </div>
         </Drawer>
       </div>
       <SystemAlert />