From e8a9bf7d5008bab8cdbc3ccc94dbaa872cbd4a91 Mon Sep 17 00:00:00 2001 From: Dominik Horn Date: Thu, 27 Feb 2020 18:07:04 +0100 Subject: [PATCH] add bare minimum appbar #10 --- packages/frontend/src/components/App.tsx | 12 +++-- .../src/components/general/NavigationBar.tsx | 51 +++++++++++++++++++ packages/frontend/src/index.html | 28 +++++----- packages/frontend/src/util/approutes.tsx | 19 ++----- 4 files changed, 77 insertions(+), 33 deletions(-) create mode 100644 packages/frontend/src/components/general/NavigationBar.tsx diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/components/App.tsx index 67f2538..6f3b327 100644 --- a/packages/frontend/src/components/App.tsx +++ b/packages/frontend/src/components/App.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import { hot } from 'react-hot-loader'; -import { Route, Switch } from 'react-router'; +import { Route, Switch, Redirect } from 'react-router'; import { Router } from 'react-router-dom'; -import { APP_ROUTES, ERROR_404_PAGE } from '../util/approutes'; +import { APP_ROUTES, getLinkDisplayNameForPage, getLinkForPage, HOME_PAGE } from '../util/approutes'; 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'; const configuration: Configuration = getConfiguration(); @@ -15,9 +16,12 @@ export const AppComponent = () => ( {APP_ROUTES.map((routeProps, index) => ( - + <> + + + ))} - + } /> diff --git a/packages/frontend/src/components/general/NavigationBar.tsx b/packages/frontend/src/components/general/NavigationBar.tsx new file mode 100644 index 0000000..5cad539 --- /dev/null +++ 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 ( +
+ + + + + + + {props.title} + + + + +
+ ); +}; diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html index f31f939..1519e98 100644 --- a/packages/frontend/src/index.html +++ b/packages/frontend/src/index.html @@ -1,21 +1,19 @@ + + - - + + - - + - + Elite-SE | Sexy + - Elite-SE | Sexy - - - - -
- - - - \ No newline at end of file + + +
+ + + diff --git a/packages/frontend/src/util/approutes.tsx b/packages/frontend/src/util/approutes.tsx index e68b8cd..3cf3c87 100644 --- a/packages/frontend/src/util/approutes.tsx +++ b/packages/frontend/src/util/approutes.tsx @@ -30,8 +30,8 @@ export function getLinkForPage(route: AppRouteProps): LinkType { /** * Retrieves the humand readable link title/displayed name - * for a given route - * + * for a given route + * * @param route */ export function getLinkDisplayNameForPage(route: AppRouteProps): string { @@ -48,23 +48,14 @@ export function getLinkDisplayNameForPage(route: AppRouteProps): string { export const HOME_PAGE: AppRouteProps = { path: '/home', linkDisplayName: 'Home', - render: props => + render: props => , }; // Page with searchable, useful links for elite-se-degree program export const LINK_PAGE: AppRouteProps = { path: '/links', linkDisplayName: 'Useful Links', - render: props => + render: props => , }; -// Simply redirect to the main page on 404 -export const ERROR_404_PAGE: AppRouteProps = { - path: '/', - render: () => , -}; - -export const APP_ROUTES: AppRouteProps[] = [ - HOME_PAGE, - LINK_PAGE -]; \ No newline at end of file +export const APP_ROUTES: AppRouteProps[] = [HOME_PAGE, LINK_PAGE];