Merge pull request #347 from coralproject/header

[Tablet] - Header and Drawer

client/coral-admin/src/components/ui/Drawer.js

@@ -1,18 +1,49 @@
 import React from 'react';
 import {Navigation, Drawer} from 'react-mdl';
-import {Link} from 'react-router';
-import styles from './Header.css';
+import {IndexLink, Link} from 'react-router';
+import styles from './Drawer.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 
-export default () => (
-  <Drawer>
-    <Navigation>
-      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
-      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
-      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
-    </Navigation>
+export default ({handleLogout, restricted = false}) => (
+  <Drawer className={styles.header}>
+    { !restricted ?
+      <div>
+        <Navigation className={styles.nav}>
+          <IndexLink
+            className={styles.navLink}
+            to="/admin/dashboard"
+            activeClassName={styles.active}>
+            {lang.t('configure.dashboard')}
+          </IndexLink>
+          <Link
+            className={styles.navLink}
+            to="/admin/moderate"
+            activeClassName={styles.active}>
+            {lang.t('configure.moderate')}
+          </Link>
+          <Link className={styles.navLink}
+                to="/admin/streams"
+                activeClassName={styles.active}>
+            {lang.t('configure.streams')}
+          </Link>
+          <Link className={styles.navLink}
+                to="/admin/community"
+                activeClassName={styles.active}>
+            {lang.t('configure.community')}
+          </Link>
+          <Link
+            className={styles.navLink}
+            to="/admin/configure"
+            activeClassName={styles.active}>
+            {lang.t('configure.configure')}
+          </Link>
+          <a onClick={handleLogout}>Sign Out</a>
+          <span>{`v${process.env.VERSION}`}</span>
+        </Navigation>
+      </div> : null }
   </Drawer>
 );
 
 const lang = new I18n(translations);
+

client/coral-admin/src/components/ui/Header.css

@@ -1,7 +1,25 @@
+@custom-media --table-viewport (max-width: 1024px);
+
+@media (--table-viewport) {
+  .logo {
+    margin-left: 58px;
+    h1 {
+      background: #696969;
+    }
+    span {
+      color: #fcfcfc;
+    }
+  }
+  .nav {
+    display: none;
+  }
+}
+
 .header {
   background-color: transparent;
   box-shadow: none;
   min-height: 58px;
+  display: block;
 }
 
 .header > div {

client/coral-admin/src/components/ui/Header.js

@@ -8,7 +8,7 @@ import {Logo} from './Logo';
 
 export default ({handleLogout, restricted = false}) => (
   <Header className={styles.header}>
-    <Logo />
+    <Logo className={styles.logo} />
     {
       !restricted ?
       <div>

client/coral-admin/src/components/ui/Layout.js

@@ -6,8 +6,8 @@ import styles from './Layout.css';
 
 export const Layout = ({children, ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header {...props}/>
-    <Drawer />
+    <Header {...props} />
+    <Drawer {...props} />
     <div className={styles.layout} >
       {children}
     </div>

client/coral-admin/src/components/ui/Logo.js

@@ -2,8 +2,8 @@ import React from 'react';
 import styles from './Logo.css';
 import {CoralLogo} from 'coral-ui';
 
-export const Logo = () => (
-  <div className={styles.logo}>
+export const Logo = ({className = ''}) => (
+  <div className={`${styles.logo} ${className}`}>
     <h1>
       <CoralLogo className={styles.base} />
       <span>Talk</span>

client/coral-admin/src/index.js

@@ -7,6 +7,9 @@ import store from './services/store';
 
 import App from './components/App';
 
+import 'react-mdl/extra/material.css';
+import 'react-mdl/extra/material.js';
+
 render(
   <ApolloProvider client={client} store={store}>
     <App />