diff --git a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx index 7ae6303..b8d626e 100644 --- a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx +++ b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx @@ -40,6 +40,7 @@ export const RouteDrawer = (props: RouteDrawerProps) => { {APP_ROUTES.map(route => ( + {route.icon && {route.icon}} diff --git a/packages/frontend/src/util/approutes.tsx b/packages/frontend/src/util/approutes.tsx index 5a76294..895ca65 100644 --- a/packages/frontend/src/util/approutes.tsx +++ b/packages/frontend/src/util/approutes.tsx @@ -1,6 +1,7 @@ -import * as H from 'history'; +import HomeIcon from '@material-ui/icons/Home'; +import LinkIcon from '@material-ui/icons/Link'; import * as React from 'react'; -import { RouteProps, Redirect } from 'react-router'; +import { RouteProps } from 'react-router'; import { HomePage } from '../components/pages/HomePage'; import { LinkPage } from '../components/pages/LinkPage'; @@ -15,6 +16,9 @@ export interface AppRouteProps extends RouteProps { // link text (Human readable!) readonly linkDisplayName?: string; + // optional icon displayed next to the link name + readonly icon?: JSX.Element; + // AppRoutes must have a path - deoptionalize this property readonly path: string; } @@ -55,6 +59,7 @@ export function getLinkDisplayNameForPath(path: string): string { export const HOME_PAGE: AppRouteProps = { path: '/home', linkDisplayName: 'Home', + icon: , render: props => , }; @@ -62,6 +67,7 @@ export const HOME_PAGE: AppRouteProps = { export const LINK_PAGE: AppRouteProps = { path: '/links', linkDisplayName: 'Useful Links', + icon: , render: props => , };