diff --git a/package.json b/package.json
index ddf69a2..b019e03 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"ical.js": "^1.2.2",
"isomorphic-fetch": "^2.1.1",
+ "material-ui": "^0.20.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
@@ -21,6 +22,7 @@
"devDependencies": {
"@types/isomorphic-fetch": "^0.0.34",
"@types/jest": "^21.1.8",
+ "@types/material-ui": "^0.18.5",
"@types/node": "^8.0.53",
"@types/react": "^16.0.25",
"@types/react-dom": "^16.0.3",
diff --git a/src/App.css b/src/App.css
index 15adfdc..dbba618 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,7 +18,12 @@
font-size: large;
}
-@keyframes App-logo-spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
+.App-drawer-header {
+ background-color: #555;
+ padding: 10px;
+}
+
+.App-drawer-logo {
+ width: 60px;
+ margin-bottom: 10px;
}
diff --git a/src/App.tsx b/src/App.tsx
index 872b96d..546fa23 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,47 @@
import * as React from 'react';
import { HashRouter } from 'react-router-dom';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import { amber500, amber700, lightBlue500, darkBlack, white } from 'material-ui/styles/colors';
+import AppBar from 'material-ui/AppBar';
+import Drawer from 'material-ui/Drawer';
+import IconButton from 'material-ui/IconButton';
+import { List, ListItem } from 'material-ui/List';
+import ActionCode from 'material-ui/svg-icons/action/code';
+import ActionHome from 'material-ui/svg-icons/action/home';
+import ActionBugReport from 'material-ui/svg-icons/action/bug-report';
+import ActionQuestionAnswer from 'material-ui/svg-icons/action/question-answer';
+
+import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
+
import './App.css';
import { EteSyncContext } from './EteSyncContext';
import { RouteResolver } from './routes';
+import * as C from './Constants';
+
+const logo = require('./images/logo.svg');
+
+const muiTheme = getMuiTheme({
+ palette: {
+ primary1Color: amber500,
+ primary2Color: amber700,
+ accent1Color: lightBlue500,
+ textColor: darkBlack,
+ alternateTextColor: white,
+ }
+});
+
+function getPalette(part: string): string {
+ const theme = muiTheme;
+ if ((theme.palette === undefined) || (theme.palette[part] === undefined)) {
+ return '';
+ }
+
+ return theme.palette[part];
+}
+
export const routeResolver = new RouteResolver({
home: '',
journals: {
@@ -28,11 +65,59 @@ export const routeResolver = new RouteResolver({
});
class App extends React.Component {
+ state: {
+ drawerOpen: boolean,
+ };
+
+ constructor(props: any) {
+ super(props);
+ this.state = { drawerOpen: false };
+
+ this.toggleDrawer = this.toggleDrawer.bind(this);
+ this.closeDrawer = this.closeDrawer.bind(this);
+ }
+
+ toggleDrawer() {
+ this.setState({drawerOpen: !this.state.drawerOpen});
+ }
+
+ closeDrawer() {
+ this.setState({drawerOpen: false});
+ }
+
render() {
return (
-
-
-
+
+
+
}
+ />
+
+
+
+
+ {C.appName}
+
+
+ } href={C.homePage} />
+ } href={C.faq} />
+ } href={C.sourceCode} />
+ } href={C.reportIssue} />
+
+
+
+
+
+
+