add icons to APP_ROUTES #10

elite-se · Feb 28, 2020 · a1d5099 · a1d5099
1 parent c9ed65f
commit a1d5099
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx
@@ -1,4 +1,13 @@
-import { createStyles, List, ListItem, ListItemText, makeStyles, SwipeableDrawer, Theme } from '@material-ui/core';
+import {
+  createStyles,
+  List,
+  ListItem,
+  ListItemText,
+  makeStyles,
+  SwipeableDrawer,
+  Theme,
+  ListItemIcon,
+} from '@material-ui/core';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from 'util/routes';
@@ -28,6 +37,7 @@ export const RouteDrawer = (props: RouteDrawerProps) => {
         <List>
           {APP_ROUTES.map(route => (
             <ListItem button={true} key={getLinkForRoute(route)}>
+              {route.icon && <ListItemIcon>{route.icon}</ListItemIcon>}
               <Link to={getLinkForRoute(route)}>
                 <ListItemText primary={getDisplayNameForRoute(route)} />
               </Link>

diff --git a/packages/types/src/routes/appRoute.type.ts b/packages/types/src/routes/appRoute.type.ts
@@ -14,8 +14,9 @@ export interface AppRoute extends RouteProps {
   // link text (Human readable!)
   readonly displayName?: string;
 
+  // optional icon displayed next to the link name
+  readonly icon?: JSX.Element;
+
   // AppRoutes must have a path - deoptionalize this property
   readonly path: AppPath;
-
-  render(props: any): any;
 }