#1 Switch from MDL to MDC.

package.json

@@ -4,12 +4,14 @@
   "homepage": "https://enbock.github.io/Time-Tracker/",
   "private": true,
   "dependencies": {
+    "@material/drawer": "^0.5.9",
     "axios": "^0.16.2",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
     "eslint": "^4.8.0",
     "gh-pages": "^1.0.0",
     "jest-enzyme": "^4.0.0",
+    "material-components-web": "^0.22.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
     "react": "^16.0.0",

public/Template/Application.html.tpl

@@ -1,15 +1,18 @@
-<MDLElement class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
-    <header class="mdl-layout__header">
-        <div class="mdl-layout__header-row">
-            <span class="mdl-layout-title">Time Tracker</span>
-        </div>
-    </header>
-    <this.components.MainMenu/>
-    <main class="mdl-layout__content">
-        <div class="page-content">
-            <div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style={{width: "100%"}}></div>
+<div class="page-wrapper mdc-typography">
+    <this.components.MainMenu open={this.state.menuOpen}/>
+    <div class="content">
+        <header class="mdc-toolbar mdc-elevation--z4">
+            <div class="mdc-toolbar__row">
+                <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+                    <a onClick={this.onMenuButtonClick.bind(this)} class="demo-menu material-icons mdc-toolbar__icon--menu">menu</a>
+                    <span class="mdc-toolbar__title catalog-title">Time Tracker</span>
+                </section>
+            </div>
+        </header>
 
-            Hello World!
-        </div>
-    </main>
-</MDLElement>
+        <main class="demo-main">
+            <h1 class="mdc-typography--display1">Hello World!</h1>
+        </main>
+    </div>
+
+</div>

public/Template/Menu/Main.html.tpl

@@ -1,8 +1,35 @@
-<MDLElement className="mdl-layout__drawer">
-    <nav className="mdl-navigation">
-        <a className="mdl-navigation__link" href="">Link</a>
-        <a className="mdl-navigation__link" href="">Link</a>
-        <a className="mdl-navigation__link" href="">Link</a>
-        <a className="mdl-navigation__link" href="">Link</a>
+<aside class="mdc-persistent-drawer">
+    <nav class="mdc-persistent-drawer__drawer">
+        <div class="mdc-persistent-drawer__toolbar-spacer"></div>
+        <div class="mdc-list-group">
+            <nav class="mdc-list">
+                <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
+                    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
+                </a>
+                <a class="mdc-list-item" href="#">
+                    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
+                </a>
+                <a class="mdc-list-item" href="#">
+                    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">send</i>Sent Mail
+                </a>
+                <a class="mdc-list-item" href="#">
+                    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">drafts</i>Drafts
+                </a>
+            </nav>
+
+            <hr class="mdc-list-divider" />
+
+            <nav class="mdc-list">
+                <a class="mdc-list-item" href="#">
+                    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">email</i>All Mail
+                </a>
+                <a class="mdc-list-item" href="#">
+                    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">delete</i>Trash
+                </a>
+                <a class="mdc-list-item" href="#">
+                    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">report</i>Spam
+                </a>
+            </nav>
+        </div>
     </nav>
-</MDLElement>
+</aside>

public/index.html

@@ -12,16 +12,48 @@
     <link rel="apple-touch-icon-precomposed" sizes="128x128" href="%PUBLIC_URL%/favicon-128.png">
     <title>Codefrog Time Tracker</title>
     <script src="%PUBLIC_URL%/babel.min.js"></script>
-    <link rel="stylesheet" href="%PUBLIC_URL%/material.min.css">
-    <script src="%PUBLIC_URL%/material.min.js"></script>
+    <!--link rel="stylesheet" href="%PUBLIC_URL%/material.min.css"-->
+    <!--script src="%PUBLIC_URL%/material.min.js"></script-->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
+    <link rel="stylesheet" href="%PUBLIC_URL%/material-components-web.min.css">
+    <style>
+        html {
+            height: 100%;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+        }
+        .height100p {
+            height: 100%;
+        }
+        .page-wrapper {
+            display: flex;
+            flex-direction: row;
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+            height: 100%;
+            width: 100%;
+        }
+        .content {
+            display: inline-flex;
+            flex-direction: column;
+            flex-grow: 1;
+            height: 100%;
+            box-sizing: border-box;
+        }
+    </style>
 </head>
 <body>
 <noscript>
     <img height="96px" src="%PUBLIC_URL%/favicon-128.png">
     You need to enable JavaScript to run this app.
 </noscript>
-<div id="root"></div>
+<div id="root" class="height100p"></div>
+<script src="%PUBLIC_URL%/material-components-web.min.js"></script>
 </body>
 </html>

src/Application/Application.js

@@ -27,6 +27,17 @@ class Application extends Component {
     this.components = {
       MainMenu: Menu.Main
     };
+
+    this.state = Object.assign(
+      this.state,
+      {
+        menuOpen: false
+      }
+    );
+  }
+
+  onMenuButtonClick() {
+    this.setState({menuOpen: !this.state.menuOpen});
   }
 }
 

src/Application/Application.test.js

@@ -3,10 +3,19 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import Application from './Application';
 
+jest.mock('../Menu', () => 'Menu');
+
 /**
  * Test Application Container.
  */
 describe('Application', function testApplication() {
+  /**
+   * Reset global mocks.
+   */
+  beforeEach(function beforeEach() {
+    Babel.transform.mockClear();
+  });
+
 
   /**
    * Test if correct layout loaded.
@@ -34,9 +43,16 @@ describe('Application', function testApplication() {
         return promise;
       }
     );
+    Babel.transform.mockReturnValue(
+      {
+        code: 'React.createElement(\'button\', { onClick: this.onMenuButtonClick.bind(this) })'
+      }
+    );
 
-    shallow(<Application/>);
+    const wrapper = shallow(<Application/>);
     bound({data: 'TEMPLATE'});
+    wrapper.update();
+    wrapper.find('button').simulate('click');
     expect(success).toBe(true);
   });
 });

src/Menu/Main/Main.js

@@ -1,4 +1,5 @@
 import Component from '../../Shared/LiveJSX';
+import {MDCPersistentDrawer} from '@material/drawer';
 
 /**
  * The Main menu.
@@ -16,6 +17,20 @@ class MainMenu extends Component
     return '/Template/Menu/Main.html.tpl';
   }
 
+  /**
+   * Abstract function for JSX mount info.
+   *
+   * @param {HTMLElement} domNode
+   */
+  onTemplateMounted(domNode) {
+    this.drawer = new MDCPersistentDrawer(domNode);
+  }
+
+  componentWillUpdate(nextProps, nextContext) {
+    if (this.drawer) {
+      this.drawer.open = nextProps.open;
+    }
+  }
 }
 
 export default MainMenu;

src/Menu/Main/Main.test.js

@@ -3,6 +3,17 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import Main from './Main';
 
+jest.mock('@material/drawer', () => {
+  return {
+    MDCPersistentDrawer: jest.fn()
+  };
+});
+jest.mock('react-dom', () => {
+  return {
+    findDOMNode: jest.fn()
+  };
+});
+
 /**
  * Test Main Container.
  */
@@ -35,8 +46,10 @@ describe('Main Menu', function testMain() {
       }
     );
 
-    shallow(<Main/>);
+    const wrapper = shallow(<Main/>);
     bound({data: 'TEMPLATE'});
+    wrapper.setProps({open: false});
+    wrapper.setProps({open: true});
     expect(success).toBe(true);
   });
 });

src/Shared/LiveJSX/LiveJSX.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Axios from 'axios';
 
 // Bridge to templates
@@ -104,8 +105,10 @@ class LiveJSX extends React.Component {
 
   /**
    * Abstract function for JSX mount info.
+   *
+   * @param {HTMLElement} domNode
    */
-  onTemplateMounted() {
+  onTemplateMounted(domNode) {
   }
 
   /**
@@ -118,7 +121,7 @@ class LiveJSX extends React.Component {
   componentDidUpdate(prevProps, prevState, prevContext) {
     if (this.firstShow) {
       this.firstShow = false;
-      this.onTemplateMounted();
+      this.onTemplateMounted(ReactDOM.findDOMNode(this));
     }
   }
 

src/Shared/LiveJSX/LiveJSX.test.js

@@ -1,6 +1,7 @@
 import {mockAxiosAction} from 'axios';
 import React from 'react';
 import {shallow} from 'enzyme';
+jest.mock('react-dom');
 import LiveJSX from './LiveJSX';
 
 /**