From c3fb1106630f595acc6d24044d4489e0690aed77 Mon Sep 17 00:00:00 2001
From: snoop <snoop@loafle.com>
Date: Wed, 12 Jul 2017 16:59:18 +0900
Subject: [PATCH] sidebar

---
 src/ts/containers/test/layout/Layout.tsx | 57 +++++++++++++++++++-----
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
index 83edd88..fd85e3c 100644
--- a/src/ts/containers/test/layout/Layout.tsx
+++ b/src/ts/containers/test/layout/Layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Container } from 'semantic-ui-react';
+import { Container, Menu, Sidebar, Segment, Icon } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
@@ -21,15 +21,52 @@ export class Layout extends React.Component<any, any> {
     return (
       <div>
         <br />
-        <Header />
-        <Container>
-          <br />
-          <Router history={history}>
-            <Routes />
-          </Router>
-        </Container>
-        <br />
-        <Footer />
+
+        <Sidebar.Pushable as={Segment}  >
+          <Sidebar
+            as={Menu}
+            animation='overlay'
+            width='thin'
+            direction='right'
+            visible={this.state.notification_visible}
+            icon='labeled'
+            vertical
+            inverted
+          >
+            <Menu.Item name='home'>
+              <Icon name='home' />
+              Home
+            </Menu.Item>
+            <Menu.Item name='gamepad'>
+              <Icon name='gamepad' />
+              Games
+            </Menu.Item>
+            <Menu.Item name='camera'>
+              <Icon name='camera' />
+              Channels
+            </Menu.Item>
+          </Sidebar>
+
+          
+          <Sidebar.Pusher >
+            <Segment basic >
+              <Header />
+              <button placeholder='menu' onClick={() => {
+                this.setState({ notification_visible: !this.state.notification_visible })
+              }}> sidebar </button>
+              <Container>
+                <br />
+                <Router history={history}>
+                  <Routes />
+                </Router>
+              </Container>
+              <br />
+              <Footer />
+            </Segment>
+          </Sidebar.Pusher>
+        </Sidebar.Pushable>
+
+
       </div>
     );
   }