add bare minimum appbar #10

elite-se · Feb 28, 2020 · b1fa0df · b1fa0df
1 parent 84fd0ae
commit b1fa0df
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 6 deletions.
diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
@@ -5,24 +5,28 @@ 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 } from './util/routes';
+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';
 
-// Global bootstrap: install subsystems and load configuration
+// Global bootstrap: load configuration
 const configuration: Configuration = getConfiguration();
 
 export const AppComponent = () => (
   <FeatureFlagsProvider value={configuration.featureMap}>
     <Router history={history}>
       <ErrorBoundaryComponent>
         <Switch>
-          {APP_ROUTES.map((routeProps, index) => (
-            <Route key={index} {...routeProps} />
+          {APP_ROUTES.map((route, index) => (
+            <>
+              <NavigationBar title={getDisplayNameForRoute(route)} />
+              <Route key={index} {...route} />
+            </>
           ))}
           {/* Error 404 Fallback */}
-          <Redirect to={AppPath.HOME} />
+          <Route path={AppPath.ERROR} render={() => <Redirect to={AppPath.HOME} />} />
         </Switch>
         <Divider />
         <LinkDirectory />

diff --git a/packages/frontend/src/components/general/NavigationBar.tsx b/packages/frontend/src/components/general/NavigationBar.tsx
@@ -0,0 +1,51 @@
+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';
+
+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();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position={'static'}>
+        <Toolbar>
+          <IconButton edge={'start'} className={classes.menuButton} color={'inherit'} aria-label={'open drawer'}>
+            <MenuIcon />
+          </IconButton>
+          <Typography className={classes.title} variant={'h6'} noWrap>
+            {props.title}
+          </Typography>
+          <Button color={'inherit'}>Login</Button>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html
@@ -49,7 +49,7 @@
     <title>Elite-SE | Sexy</title>
   </head>
 
-  <body>
+  <body style="margin: 0">
     <!-- React root container dom element -->
     <div id="root" />
     <noscript>You need to enable javascript to be able to use this WebApp</noscript>