From 58601f549dcc7ac167725e486826eadb3243aa62 Mon Sep 17 00:00:00 2001
From: Dominik Horn <dominik.horn@tum.de>
Date: Thu, 27 Feb 2020 18:44:07 +0100
Subject: [PATCH] add icons to APP_ROUTES #10

---
 .../src/components/general/navigation/RouteDrawer.tsx  |  1 +
 packages/frontend/src/util/approutes.tsx               | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

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) => {
         <List>
           {APP_ROUTES.map(route => (
             <ListItem button={true} key={getLinkForPage(route)}>
+              {route.icon && <ListItemIcon>{route.icon}</ListItemIcon>}
               <Link to={getLinkForPage(route)}>
                 <ListItemText primary={getLinkDisplayNameForPage(route)} />
               </Link>
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: <HomeIcon />,
   render: props => <HomePage {...props} />,
 };
 
@@ -62,6 +67,7 @@ export const HOME_PAGE: AppRouteProps = {
 export const LINK_PAGE: AppRouteProps = {
   path: '/links',
   linkDisplayName: 'Useful Links',
+  icon: <LinkIcon />,
   render: props => <LinkPage {...props} />,
 };