implement swipeable bottom drawer for APP_ROUTES #10

packages/frontend/src/components/App.tsx

@@ -7,7 +7,7 @@ import history from '../util/history';
 import { FeatureFlagsProvider } from 'elite-feature-flags';
 import { Configuration } from 'elite-types';
 import { getConfiguration } from 'elite-configuration';
-import { NavigationBar } from './general/NavigationBar';
+import { NavigationBar } from './general/navigation/NavigationBar';
 
 const configuration: Configuration = getConfiguration();
 
@@ -16,10 +16,7 @@ export const AppComponent = () => (
     <Router history={history}>
       <Switch>
         {APP_ROUTES.map((routeProps, index) => (
-          <>
-            <NavigationBar title={getLinkDisplayNameForPage(routeProps)} />
-            <Route key={index} {...routeProps} />
-          </>
+          <Route key={index} {...routeProps} />
         ))}
         <Route path={'/'} render={() => <Redirect to={getLinkForPage(HOME_PAGE)} />} />
       </Switch>

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

@@ -0,0 +1,70 @@
+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 { getLinkDisplayNameForPath } from '../../../util/approutes';
+
+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 || getLinkDisplayNameForPath(h.location.pathname);
+
+  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,60 @@
+import * as React from 'react';
+import {
+  SwipeableDrawer,
+  createStyles,
+  makeStyles,
+  Theme,
+  List,
+  Divider,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+} from '@material-ui/core';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+import { APP_ROUTES, getLinkDisplayNameForPage, getLinkForPage } from '../../../util/approutes';
+import { Link } from 'react-router-dom';
+
+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={getLinkForPage(route)}>
+              <Link to={getLinkForPage(route)}>
+                <ListItemText primary={getLinkDisplayNameForPage(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/frontend/src/components/pages/HomePage.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { LinkDirectory } from './support/LinkDirectory';
-import { Divider } from '@material-ui/core';
 import { FeatureFlag } from 'elite-feature-flags';
+import { NavigationBar } from '../general/navigation/NavigationBar';
 
 export interface HomePageProps extends RouteComponentProps {}
 
-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>
-    <Divider />
-    <LinkDirectory />
-  </>
-);
+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/frontend/src/components/pages/LinkPage.tsx

@@ -1,21 +1,17 @@
-import { Divider, List } from '@material-ui/core';
+import { List } from '@material-ui/core';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { LinkListItem } from '../general/LinkListItem';
-import { LinkDirectory } from './support/LinkDirectory';
+import { NavigationBar } from '../general/navigation/NavigationBar';
 
 export interface LinkPageProps extends RouteComponentProps {}
 
 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'} />
     </List>
-
-    <Divider />
-
-    <LinkDirectory />
   </>
 );

packages/frontend/src/util/approutes.tsx

@@ -38,6 +38,13 @@ export function getLinkDisplayNameForPage(route: AppRouteProps): string {
   return route.linkDisplayName || getLinkForPage(route);
 }
 
+// TODO: remove this and replace with function from routing-decorator branch
+export function getLinkDisplayNameForPath(path: string): string {
+  const route = APP_ROUTES.find(route => route.path == path);
+  if (!route) return 'ERROR';
+  return getLinkDisplayNameForPage(route);
+}
+
 /**
  * Specify all pages in this file by defining
  * a pages route props and adding it to the