From 73510d9920e8a9931732c208670b5d1ffa8cf01d Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Wed, 19 Jul 2017 19:09:29 +0900
Subject: [PATCH] layout

---
 src/ts/containers/test/layout/Header.tsx   |  2 -
 src/ts/containers/test/layout/Layout.tsx   | 44 ++++++++++------------
 src/ts/containers/test/layout/LeftMenu.tsx |  2 +-
 src/ts/containers/test/layout/TitleBar.tsx | 42 +++++++++------------
 4 files changed, 38 insertions(+), 52 deletions(-)

diff --git a/src/ts/containers/test/layout/Header.tsx b/src/ts/containers/test/layout/Header.tsx
index 2adb7d4..c20b499 100644
--- a/src/ts/containers/test/layout/Header.tsx
+++ b/src/ts/containers/test/layout/Header.tsx
@@ -16,9 +16,7 @@ export class Header extends React.Component<any, any> {
     return (
       <Container fluid>
         <LogoBar />
-        <Divider />
         <TitleBar />
-        <Divider />
       </Container>
       // <TopBar onSidebar={this.props.onSidebar}/>
     );
diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
index decd14d..a39ff37 100644
--- a/src/ts/containers/test/layout/Layout.tsx
+++ b/src/ts/containers/test/layout/Layout.tsx
@@ -15,41 +15,35 @@ export class Layout extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
+      sidebar_visible: true,
       notification_visible: false,
     };
   }
 
   onSidebar = () => {
-    this.setState({ notification_visible: !this.state.notification_visible });
+    this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
   }
 
   render() {
     return (
       <Container fluid>
-        <Grid>
-          <Grid.Row>
-            <Grid.Column width='2' style={{margin:'0px'}}>
-             <LeftMenu />
-            </Grid.Column>
-            <Grid.Column width='14'>
-              <Grid.Row>
-                <Grid.Column>
-                  <Header />
-                </Grid.Column>
-                <Grid.Column>
-                  <Router history={history} >
-                    <Routes />
-                  </Router>
-                </Grid.Column>
-              </Grid.Row>
-              <Grid.Row>
-                <Grid.Column>
-                  <Footer />
-                </Grid.Column>
-              </Grid.Row>
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
+        <Sidebar.Pushable as={Segment} vertical>
+          <Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
+            <LeftMenu />
+          </Sidebar>
+          <Sidebar.Pusher>
+            <Segment vertical style={{margin:'0 0 0 150px', padding:'0'}}>
+                                     <Header />
+
+                        <Router history={history} >
+                          <Routes />
+                        </Router>
+
+                        <Footer />
+
+            </Segment>
+          </Sidebar.Pusher>
+        </Sidebar.Pushable>
         {/* <Header onSidebar={this.onSidebar.bind(this)} />
           <Sidebar.Pushable as={Segment} vertical >
             <Sidebar
diff --git a/src/ts/containers/test/layout/LeftMenu.tsx b/src/ts/containers/test/layout/LeftMenu.tsx
index 694ac23..756f710 100644
--- a/src/ts/containers/test/layout/LeftMenu.tsx
+++ b/src/ts/containers/test/layout/LeftMenu.tsx
@@ -21,7 +21,7 @@ export class LeftMenu extends React.Component<any, any> {
   render() {
     return (
       <Container fluid className='fullHeight'>
-        <Segment inverted className='fullHeight'>
+        <Segment inverted vertical className='fullHeight'>
           <Menu inverted secondary vertical fluid icon='labeled' >
 
             <Menu.Item name='User' href='/' >
diff --git a/src/ts/containers/test/layout/TitleBar.tsx b/src/ts/containers/test/layout/TitleBar.tsx
index c4f5b60..843f401 100644
--- a/src/ts/containers/test/layout/TitleBar.tsx
+++ b/src/ts/containers/test/layout/TitleBar.tsx
@@ -25,30 +25,24 @@ export class TitleBar extends React.Component<any, any> {
       },
     ];
     return (
-      <Grid>
-        <Grid.Row>
-          <Grid.Column width='3'>
-            <Header as='h3'>Page Title
-              <Header.Subheader>
-                <Breadcrumb size='tiny'>
-                  <Breadcrumb.Section link>Home</Breadcrumb.Section>
-                  <Breadcrumb.Divider />
-                  <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
-                  <Breadcrumb.Divider />
-                  <Breadcrumb.Section active>Probes</Breadcrumb.Section>
-                </Breadcrumb>
-              </Header.Subheader>
-            </Header>
-          </Grid.Column>
-          <Grid.Column width='13'>
-            <Menu secondary borderless>
-              {subMenus.map((menu: any, index: number) => (
-                <Menu.Item key={index} name={menu.name} href={menu.href} />
-              ))}
-            </Menu>
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
+      <Menu basic fluid style={{'border-left':'0px', 'border-right':'0px', 'box-shadow':'none', 'border-radius':'0'}}>
+        <Menu.Item name='Page Title' style={{width:'250px'}}>
+          <Header as='h3'>Page Title
+            <Header.Subheader>
+              <Breadcrumb size='mini' left bottom>
+                <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                <Breadcrumb.Divider />
+                <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                <Breadcrumb.Divider />
+                <Breadcrumb.Section active>Probes</Breadcrumb.Section>
+              </Breadcrumb>
+            </Header.Subheader>
+          </Header>
+        </Menu.Item>
+        {subMenus.map((menu: any, index: number) => (
+          <Menu.Item key={index} name={menu.name} href={menu.href} />
+        ))}
+      </Menu>
     );
   }
 }