Implement navigation as a grid of icons

Remove old NavBar

Add SVG Nav Icons

Copies of the iOS icons, run through https://jakearchibald.github.io/svgomg/ and modified to have unique IDs throughout.

Add react-svg-loader

Add NavTile component

Add NavGrid component

Convert Header to createClass, add NavGrid

Make the hamburger button a <button>

CSS tweaks for header

Style the hamburger

Add react-addons-transition-group

Remove wrapper div from around NavGrid

Convert NavGrid to createClass

Add HeaderNavGrid component

Remove react-addons-transition-group

Add react-collapse and friends

Swap margin for padding in HeaderNavGrid

nkbt/react-collapse#101

Implement <Collapse> in Header for HeaderNavGrid

client/components/App/index.js

@@ -1,7 +1,6 @@
 import {default as React, PropTypes} from 'react'
 
 import {Header} from 'components/Header'
-import {NavBar} from 'components/NavBar'
 
 import 'normalize.css/normalize.css'
 import 'styles/global.css'
@@ -19,7 +18,6 @@ export const App = ({children}) => {
           {children}
         </div>
       </div>
-      { fullScreen ? null : <NavBar /> }
     </div>
   )
 }

client/components/Header/Header.css

@@ -1,12 +1,15 @@
 @value sfured from 'styles/color.css';
 
+.headerContainer {
+  border-bottom: 2px solid sfured;
+  margin-bottom: 1em;
+}
+
 .header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 2px solid sfured;
-  margin-bottom: 1em;
   background-color: #fff;
   padding: 0 1em
 }
@@ -16,3 +19,11 @@
   font-weight: 300;
   font-size: 1.5em;
 }
+
+button.hamburger {
+  -webkit-appearance: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+}

client/components/Header/index.js

@@ -1,18 +1,47 @@
 import { default as React, PropTypes } from 'react'
+import HeaderNavGrid from 'components/HeaderNavGrid'
+import Collapse from 'react-collapse'
+import { presets } from 'react-motion'
 import snapLogo from './sfusnap.png'
-import menu from './menu.svg'
+import Menu from './menu.svg'
 import styles from './Header.css'
 
-export const Header = ({title}) => {
-  return (
-    <header className={styles.header}>
-      <img alt="SFU Snap Logo" src={snapLogo} height={50} width={50} />
-      <h1 className={styles.title}>{title}</h1>
-      <img alt="menu" src={menu} />
-    </header>
-  )
-}
+export const Header = React.createClass({
+  propTypes: {
+    title: PropTypes.string.isRequired
+  },
 
-Header.propTypes = {
-  title: PropTypes.string.isRequired
-}
+  getInitialState() {
+    return {
+      showNavGrid: false
+    }
+  },
+
+  toggleNavGrid(ev) {
+    ev.preventDefault()
+    this.setState({
+      showNavGrid: !this.state.showNavGrid
+    })
+  },
+
+  render() {
+    const { title } = this.props
+    return (
+      <div className={styles.headerContainer}>
+        <header className={styles.header}>
+          <img alt="SFU Snap Logo" src={snapLogo} height={50} width={50} />
+          <h1 className={styles.title}>{title}</h1>
+          <button type="button" name="Toggle Menu" className={styles.hamburger} onClick={this.toggleNavGrid}>
+            <Menu />
+          </button>
+        </header>
+
+        <Collapse
+          isOpened={this.state.showNavGrid}
+          springConfig={presets.stiff}>
+          <HeaderNavGrid />
+        </Collapse>
+      </div>
+    )
+  }
+})

client/components/HeaderNavGrid/HeaderNavGrid.css

@@ -0,0 +1,3 @@
+.container {
+  padding: .5em 0;
+}

client/components/HeaderNavGrid/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import NavGrid from 'components/NavGrid'
+import styles from './HeaderNavGrid.css'
+
+const HeaderNavGrid = () => {
+  return (
+    <div className={styles.container}>
+      <NavGrid />
+    </div>
+  )
+}
+
+export default HeaderNavGrid

client/components/NavGrid/NavGrid.css

@@ -0,0 +1,8 @@
+.grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 1em 0 1em;
+}

client/components/NavGrid/index.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import NavTile from 'components/NavTile'
+
+import styles from './NavGrid.css'
+import DashboardIcon from 'components/NavIcons/Dashboard.svg'
+import CoursesIcon from 'components/NavIcons/Courses.svg'
+import LibraryIcon from 'components/NavIcons/Library.svg'
+import RoomFinderIcon from 'components/NavIcons/RoomFinder.svg'
+import TransitIcon from 'components/NavIcons/Transit.svg'
+import SettingsIcon from 'components/NavIcons/Settings.svg'
+
+const NavGrid = React.createClass({
+  render() {
+    return (
+      <div className={styles.grid}>
+        <NavTile
+          LinkTo="/"
+          Title="Dashboard"
+          Icon={DashboardIcon}
+        />
+
+        <NavTile
+          LinkTo="/courses"
+          Title="Courses"
+          Icon={CoursesIcon}
+        />
+
+        <NavTile
+          LinkTo="/library"
+          Icon={LibraryIcon}
+          Title="Library"
+        />
+
+        <NavTile
+          LinkTo="/room_finder"
+          Icon={RoomFinderIcon}
+          Title="Room Finder"
+        />
+
+        <NavTile
+          LinkTo="/transit"
+          Icon={TransitIcon}
+          Title="Transit"
+        />
+
+        <NavTile
+          LinkTo="/settings"
+          Icon={SettingsIcon}
+          Title="Settings"
+        />
+      </div>
+    )
+  }
+})
+
+export default NavGrid