implement swipeable bottom drawer for APP_ROUTES #10

packages/frontend/src/app.tsx

@@ -1,15 +1,12 @@
+import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components';
 import { getConfiguration } from 'elite-configuration';
 import { AppPath, Configuration } from 'elite-types';
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
 import { Redirect, Route, Switch } from 'react-router';
 import { Router } from 'react-router-dom';
 import history from './util/history';
-import { APP_ROUTES, getDisplayNameForRoute } from './util/routes';
-import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components';
-import { Divider } from '@material-ui/core';
-import { LinkDirectory } from './util/linkDirectory';
-import { NavigationBar } from 'components/general/NavigationBar';
+import { APP_ROUTES } from './util/routes';
 
 // Global bootstrap: load configuration
 const configuration: Configuration = getConfiguration();
@@ -20,16 +17,11 @@ export const AppComponent = () => (
       <ErrorBoundaryComponent>
         <Switch>
           {APP_ROUTES.map((route, index) => (
-            <>
-              <NavigationBar title={getDisplayNameForRoute(route)} />
-              <Route key={index} {...route} />
-            </>
+            <Route key={index} {...route} />
           ))}
           {/* Error 404 Fallback */}
           <Route path={AppPath.ERROR} render={() => <Redirect to={AppPath.HOME} />} />
         </Switch>
-        <Divider />
-        <LinkDirectory />
       </ErrorBoundaryComponent>
     </Router>
   </FeatureFlagsProvider>

packages/frontend/src/components/general/navigation/NavigationBar.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {
+  AppBar,
+  Toolbar,
+  makeStyles,
+  fade,
+  IconButton,
+  Theme,
+  createStyles,
+  Typography,
+  Button,
+} from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import { RouteDrawer } from './RouteDrawer';
+import h from '../../../util/history';
+import { getLinkForPath } from 'util/routes';
+import { AppPath } from 'elite-types';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    menuButton: {
+      marginRight: theme.spacing(2),
+    },
+    title: {
+      flexGrow: 1,
+    },
+  }),
+);
+
+export interface NavigationBarProps {
+  readonly title?: string;
+}
+
+export const NavigationBar = (props: NavigationBarProps) => {
+  const classes = useStyles();
+  const [routeDrawerOpen, setRouteDrawerOpen] = React.useState(false);
+  const title = props.title || getLinkForPath(h.location.pathname as AppPath);
+
+  return (
+    <>
+      <div className={classes.root}>
+        <AppBar position={'static'}>
+          <Toolbar>
+            <IconButton
+              edge={'start'}
+              className={classes.menuButton}
+              color={'inherit'}
+              aria-label={'open drawer'}
+              onClick={() => setRouteDrawerOpen(true)}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography className={classes.title} variant={'h6'} noWrap>
+              {title}
+            </Typography>
+            <Button color={'inherit'}>Login</Button>
+          </Toolbar>
+        </AppBar>
+      </div>
+
+      <RouteDrawer
+        isOpen={routeDrawerOpen}
+        onOpen={() => setRouteDrawerOpen(true)}
+        onClose={() => setRouteDrawerOpen(false)}
+      />
+    </>
+  );
+};

packages/frontend/src/components/general/navigation/RouteDrawer.tsx

@@ -0,0 +1,48 @@
+import { createStyles, List, ListItem, ListItemText, makeStyles, SwipeableDrawer, Theme } from '@material-ui/core';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from 'util/routes';
+
+export interface RouteDrawerProps {
+  readonly isOpen: boolean;
+  readonly onOpen: () => void;
+  readonly onClose: () => void;
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    list: {
+      width: 250,
+    },
+    fullList: {
+      width: 'auto',
+    },
+  }),
+);
+
+export const RouteDrawer = (props: RouteDrawerProps) => {
+  const classes = useStyles();
+  return (
+    <SwipeableDrawer anchor={'bottom'} open={props.isOpen} onClose={props.onClose} onOpen={props.onOpen}>
+      <div className={classes.fullList} role={'presentation'} onClick={props.onClose} onKeyDown={props.onClose}>
+        <List>
+          {APP_ROUTES.map(route => (
+            <ListItem button={true} key={getLinkForRoute(route)}>
+              <Link to={getLinkForRoute(route)}>
+                <ListItemText primary={getDisplayNameForRoute(route)} />
+              </Link>
+            </ListItem>
+          ))}
+        </List>
+        {/** TODO: bellow is testing code */}
+        {/* <Divider />
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem button={true} key={text}>
+            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))} */}
+      </div>
+    </SwipeableDrawer>
+  );
+};

packages/home/src/home.page.tsx

@@ -14,11 +14,14 @@ export const HOME_ROUTE: AppRoute = {
   render: props => <HomePage {...props} />,
 };
 
-export const HomePage = (props: HomePageProps) => (
-  <>
-    <h1>Main Page</h1>
-    <FeatureFlag featureName="under-construction-message">
-      Elite Sexyz is currently under construction. See discord main channel for more information
-    </FeatureFlag>
-  </>
-);
+export const HomePage = (props: HomePageProps) => {
+  return (
+    <>
+      {/* <NavigationBar /> */}
+
+      <FeatureFlag featureName="under-construction-message">
+        Elite Sexyz is currently under construction. See discord main channel for more information
+      </FeatureFlag>
+    </>
+  );
+};

packages/link/src/link.page.tsx

@@ -21,7 +21,7 @@ export const LINK_ROUTE: AppRoute = {
 
 export const LinkPage = (props: LinkPageProps) => (
   <>
-    <h1>Useful Links List</h1>
+    {/* <NavigationBar /> */}
     <List>
       <LinkListItem href={'https://elite-se.informatik.uni-augsburg.de'} title={'Main Webpage'} />
       <LinkListItem href={'https://github.com/elite-se/elite-se.protokolle'} title={'Exam Protocols'} />