From f85a6d4da172f9cb2d192b3e6cac72773b536862 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 27 Feb 2017 11:49:53 -0300
Subject: [PATCH 1/2] Drawer

---
 .../coral-admin/src/components/ui/Drawer.css  |  0
 .../coral-admin/src/components/ui/Drawer.js   | 49 +++++++++++++++----
 .../coral-admin/src/components/ui/Header.css  | 18 +++++++
 .../coral-admin/src/components/ui/Header.js   |  2 +-
 client/coral-admin/src/components/ui/Logo.js  |  4 +-
 client/coral-admin/src/index.js               |  3 ++
 6 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 client/coral-admin/src/components/ui/Drawer.css

diff --git a/client/coral-admin/src/components/ui/Drawer.css b/client/coral-admin/src/components/ui/Drawer.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js
index 2003ed34d..8fdf4f19d 100644
--- a/client/coral-admin/src/components/ui/Drawer.js
+++ b/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);
+
diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css
index e6cf85d23..e30cb46d7 100644
--- a/client/coral-admin/src/components/ui/Header.css
+++ b/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 {
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 141d7fecf..556b33b6c 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/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>
diff --git a/client/coral-admin/src/components/ui/Logo.js b/client/coral-admin/src/components/ui/Logo.js
index 05a7707d7..8c57cde11 100644
--- a/client/coral-admin/src/components/ui/Logo.js
+++ b/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>
diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js
index 306461dd0..00190847a 100644
--- a/client/coral-admin/src/index.js
+++ b/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 />

From e8a92b768c4851d1efd79b8cd9828dcb99a14551 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 27 Feb 2017 11:52:21 -0300
Subject: [PATCH 2/2] logout and version in drawer

---
 client/coral-admin/src/components/ui/Layout.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js
index 46c7aa7fa..f28e8dd80 100644
--- a/client/coral-admin/src/components/ui/Layout.js
+++ b/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>