sidebar

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>
+        <Sidebar.Pushable as={Segment}  >
-          <br />
+          <Sidebar
-          <Router history={history}>
+            as={Menu}
-            <Routes />
+            animation='overlay'
-          </Router>
+            width='thin'
-        </Container>
+            direction='right'
-        <br />
+            visible={this.state.notification_visible}
-        <Footer />
+            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>
     );
   }