walkingriver · walkingriver · Feb 17, 2020 · Feb 17, 2020 · Feb 17, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@ionic/react": "^4.11.0",
-    "@ionic/react-router": "^4.11.0",
+    "@ionic/react": "^5.0.0",
+    "@ionic/react-router": "^5.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^8.0.3",
@@ -14,7 +14,7 @@
     "@types/react-dom": "^16.9.4",
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
-    "ionicons": "^4.6.3",
+    "ionicons": "^5.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router": "^5.1.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { AppPage } from './declarations';
 
 import Menu from './components/Menu';
 import Home from './pages/Home';
 import List from './pages/List';
-import { home, list } from 'ionicons/icons';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -28,32 +26,24 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-const appPages: AppPage[] = [
-  {
-    title: 'Home',
-    url: '/home',
-    icon: home
-  },
-  {
-    title: 'List',
-    url: '/home/list',
-    icon: list
-  }
-];
-
-const App: React.FC = () => (
-  <IonApp>
-    <IonReactRouter>
-      <IonSplitPane contentId="main">
-        <Menu appPages={appPages} />
-        <IonRouterOutlet id="main">
-          <Route path="/home" component={Home} exact={true} />
-          <Route path="/home/list" component={List} exact={true} />
-          <Route path="/" render={() => <Redirect to="/home"/> } exact={true} />
-        </IonRouterOutlet>
-      </IonSplitPane>
-    </IonReactRouter>
-  </IonApp>
-);
+const App: React.FC = () => {
+  const [selectedPage, setSelectedPage] = useState('');
+
+  return (
+
+    <IonApp>
+      <IonReactRouter>
+        <IonSplitPane contentId="main">
+          <Menu selectedPage={selectedPage} />
+          <IonRouterOutlet id="main">
+            <Route path="/home" render={() => { setSelectedPage('Home'); return <Home />; }} exact={true} />
+            <Route path="/list" render={() => { setSelectedPage('List'); return <List />; }} exact={true} />
+            <Route path="/" render={() => <Redirect to="/home" />} exact={true} />
+          </IonRouterOutlet>
+        </IonSplitPane>
+      </IonReactRouter>
+    </IonApp>
+  );
+}
 
 export default App;
diff --git a/src/components/Menu.css b/src/components/Menu.css
@@ -0,0 +1,113 @@
+ion-menu ion-content {
+  --background: var(--ion-item-background, var(--ion-background-color, #fff));
+}
+
+ion-menu.md ion-content {
+  --padding-start: 8px;
+  --padding-end: 8px;
+  /* --padding-top: 20px;
+  --padding-bottom: 20px; */
+}
+
+ion-menu.md ion-list {
+  /* padding: 20px 0; */
+}
+
+ion-menu.md ion-note {
+  margin-bottom: 30px;
+}
+
+ion-menu.md ion-list-header, ion-menu.md ion-note {
+  padding-left: 10px;
+}
+
+ion-menu.md ion-list#inbox-list {
+  border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
+}
+
+ion-menu.md ion-list#inbox-list ion-list-header {
+  font-size: 22px;
+  font-weight: 600;
+  min-height: 20px;
+}
+
+ion-menu.md ion-list#labels-list ion-list-header {
+  font-size: 16px;
+  margin-bottom: 18px;
+  color: #757575;
+  min-height: 26px;
+}
+
+ion-menu.md ion-item {
+  --padding-start: 10px;
+  --padding-end: 10px;
+  border-radius: 4px;
+}
+
+ion-menu.md ion-item.selected {
+  --background: rgba(var(--ion-color-primary-rgb), 0.14);
+}
+
+ion-menu.md ion-item.selected ion-icon {
+  color: var(--ion-color-primary);
+}
+
+ion-menu.md ion-item ion-icon {
+  color: #616e7e;
+}
+
+ion-menu.md ion-item ion-label {
+  font-weight: 500;
+}
+
+ion-menu.ios ion-content {
+  --padding-bottom: 20px;
+}
+
+ion-menu.ios ion-list {
+  padding: 20px 0 0 0;
+}
+
+ion-menu.ios ion-note {
+  line-height: 24px;
+  margin-bottom: 20px;
+}
+
+ion-menu.ios ion-item {
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --min-height: 50px;
+}
+
+ion-menu.ios ion-item ion-icon {
+  font-size: 24px;
+  color: #73849a;
+}
+
+ion-menu.ios ion-item .selected ion-icon {
+  color: var(--ion-color-primary);
+}
+
+ion-menu.ios ion-list#labels-list ion-list-header {
+  margin-bottom: 8px;
+}
+
+ion-menu.ios ion-list-header,
+ion-menu.ios ion-note {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+ion-menu.ios ion-note {
+  margin-bottom: 8px;
+}
+
+ion-note {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--ion-color-medium-shade);
+}
+
+ion-item.selected {
+  --color: var(--ion-color-primary);
+} 
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -12,13 +12,36 @@ import {
 } from '@ionic/react';
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { AppPage } from '../declarations';
+import { homeOutline, listOutline, listSharp, homeSharp } from 'ionicons/icons';
+import './Menu.css';
 
 interface MenuProps extends RouteComponentProps {
-  appPages: AppPage[];
+  selectedPage: string;
 }
 
-const Menu: React.FunctionComponent<MenuProps> = ({ appPages }) => (
+interface AppPage {
+  url: string;
+  iosIcon: string;
+  mdIcon: string;
+  title: string;
+}
+
+const appPages: AppPage[] = [
+  {
+    title: 'Home',
+    url: '/home',
+    iosIcon: homeOutline,
+    mdIcon: homeSharp
+  },
+  {
+    title: 'List',
+    url: '/list',
+    iosIcon: listOutline,
+    mdIcon: listSharp
+  }
+];
+
+const Menu: React.FunctionComponent<MenuProps> = ({ selectedPage }) => (
   <IonMenu contentId="main" type="overlay">
     <IonHeader>
       <IonToolbar>
@@ -30,10 +53,14 @@ const Menu: React.FunctionComponent<MenuProps> = ({ appPages }) => (
         {appPages.map((appPage, index) => {
           return (
             <IonMenuToggle key={index} autoHide={false}>
-              <IonItem routerLink={appPage.url} routerDirection="none">
-                <IonIcon slot="start" icon={appPage.icon} />
-                <IonLabel>{appPage.title}</IonLabel>
-              </IonItem>
+<IonItem className={selectedPage === appPage.title ? 'selected' : ''}
+  lines="none"
+  routerLink={appPage.url}
+  routerDirection="none">
+  <IonIcon slot="start" icon={appPage.iosIcon}
+  />
+  <IonLabel>{appPage.title}</IonLabel>
+</IonItem>
             </IonMenuToggle>
           );
         })}

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -190,7 +190,7 @@ const HomePage: React.FC = () => {
                   <IonButtons slot="end">
                     <IonButton routerDirection="root" routerLink="/game">
                       Continue
-        <IonIcon name="arrow-forward"></IonIcon>
+        <IonIcon icon="arrow-forward"></IonIcon>
                     </IonButton>
                   </IonButtons>
                 </IonToolbar>