From 4fe77c58e8db6d5923e9f04e4a6478d91fa93d99 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Thu, 20 Jul 2017 19:41:12 +0900
Subject: [PATCH] layout

---
 src/ts/@overflow/app/views/layout/Layout.tsx  |  76 ++----------
 .../@overflow/app/views/layout/LeftMenu.tsx   | 115 ++++++++----------
 src/ts/@overflow/app/views/layout/LogoBar.tsx |  10 +-
 .../@overflow/app/views/layout/TitleBar.tsx   |   4 +-
 4 files changed, 67 insertions(+), 138 deletions(-)

diff --git a/src/ts/@overflow/app/views/layout/Layout.tsx b/src/ts/@overflow/app/views/layout/Layout.tsx
index 4b5e8ec..13f4910 100644
--- a/src/ts/@overflow/app/views/layout/Layout.tsx
+++ b/src/ts/@overflow/app/views/layout/Layout.tsx
@@ -34,72 +34,16 @@ export class Layout extends React.Component<any, any> {
   public render(): JSX.Element {
     return (
       <Container fluid>
-        <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>*/}
-              <Provider store={store}>
-                <ConnectedRouter history={history}>
-                  {routes}
-                </ConnectedRouter>
-              </Provider>
-
-              <Footer />
-
-            </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>
-        {/* <Header onSidebar={this.onSidebar.bind(this)} />
-          <Sidebar.Pushable as={Segment} vertical >
-            <Sidebar
-              as={Menu}
-              animation='overlay'
-              width='thin'
-              direction='right'
-              visible={this.state.notification_visible}
-              icon='labeled'
-              vertical
-              inverted
-            >
-              <Menu.Item name='home'>
-                Notification 1
-            </Menu.Item>
-              <Menu.Item name='gamepad'>
-                Notification 2
-            </Menu.Item>
-            </Sidebar>
-
-            <Sidebar.Pusher >
-              <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
-                <Breadcrumb size='mini'>
-                  <Breadcrumb.Section link>Home</Breadcrumb.Section>
-                  <Breadcrumb.Divider icon='right angle' />
-                  <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
-                  <Breadcrumb.Divider icon='right angle' />
-                  <Breadcrumb.Section active>Probe</Breadcrumb.Section>
-                </Breadcrumb>
-              </Container>
-
-              <Segment vertical>
-                <Container>
-                  <Router history={history} >
-                    <Routes />
-                  </Router>
-                </Container>
-
-                <Footer />
-              </Segment>
-            </Sidebar.Pusher>
-          </Sidebar.Pushable> */}
-
-
+        <LeftMenu />
+        <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
+          <Header />
+          <Provider store={store}>
+            <ConnectedRouter history={history}>
+              {routes}
+            </ConnectedRouter>
+          </Provider>
+          <Footer />
+        </Segment>
       </Container >
     );
   }
diff --git a/src/ts/@overflow/app/views/layout/LeftMenu.tsx b/src/ts/@overflow/app/views/layout/LeftMenu.tsx
index b35f191..d524ebe 100644
--- a/src/ts/@overflow/app/views/layout/LeftMenu.tsx
+++ b/src/ts/@overflow/app/views/layout/LeftMenu.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Container, Menu, Dropdown, Segment, Icon } from 'semantic-ui-react';
+import { Container, Menu, Dropdown, Segment, Icon, Header, Image } from 'semantic-ui-react';
 
 import { LogoBar } from './LogoBar';
 import { TitleBar } from './TitleBar';
@@ -20,68 +20,57 @@ export class LeftMenu extends React.Component<any, any> {
 
   public render(): JSX.Element {
     return (
-      <Container fluid className='fullHeight'>
-        <Segment inverted vertical className='fullHeight'>
-          <Menu inverted secondary vertical fluid icon='labeled' >
+      <Menu fixed='left' inverted vertical borderless>
+        <Menu.Item name='User'>
+          <Header textAlign='center'>
+            <Image src='http://glia.ca/scm/2013/ge1127_b/wp-content/uploads/2013/10/594partner-profile-pic-An.jpg'
+              size='mini' shape='circular' href='/' />
+          </Header>
+        </Menu.Item>
+        <Menu.Item name='Home' href='/' >
+          <Header inverted sub icon='home' content='Home' />
+        </Menu.Item>
 
-            <Menu.Item name='User' href='/' >
-              <Icon name='user' />
-            </Menu.Item>
-            <Menu.Item name='Home' href='/' >
-              <Icon name='home' />
-              Home
-            </Menu.Item>
-            <Menu.Item name='Monitoring' href='/' >
-              <Icon name='bar graph' />
-              Monitoring
-              {/*
-              <Dropdown text='Monitoring' pointing>
-                <Dropdown.Menu>
-                  <Dropdown.Header>Monitoring</Dropdown.Header>
-                  <Dropdown.Item>Probe</Dropdown.Item>
-                  <Dropdown.Item>Sensors</Dropdown.Item>
-                </Dropdown.Menu>
-              </Dropdown>
-              */}
-            </Menu.Item>
+        <Menu.Item>
+          <Menu.Header name='Monitoring' >
+            <Header inverted sub icon='bar graph' content='Monitoring' />
+          </Menu.Header>
+          <Menu.Menu>
+            <Menu.Item href='#/test14' style={{ 'margin-left': '30px' }}>Probe</Menu.Item>
+            <Menu.Item href='/' style={{ 'margin-left': '30px' }}>Sensors</Menu.Item>
+          </Menu.Menu>
+        </Menu.Item>
 
-            <Menu.Item name='Infrastructure' href='/' >
-              <Icon name='sitemap' />
-              Infrastructure
-              {/*
-              <Dropdown text='Infrastructure' >
-                <Dropdown.Menu>
-                  <Dropdown.Header>Infrastructure</Dropdown.Header>
-                  <Dropdown.Item>Maps</Dropdown.Item>
-                  <Dropdown.Item>Targets</Dropdown.Item>
-                </Dropdown.Menu>
-              </Dropdown>
-              */}
-            </Menu.Item>
+        <Menu.Item>
+          <Menu.Header name='Infrastructure' >
+            <Header inverted sub icon='sitemap' content='Infrastructure' />
+          </Menu.Header>
+          <Menu.Menu>
+            <Menu.Item href='/' style={{ 'margin-left': '30px' }}>Maps</Menu.Item>
+            <Menu.Item href='/' style={{ 'margin-left': '30px' }}>Targets</Menu.Item>
+          </Menu.Menu>
+        </Menu.Item>
 
-            <Menu.Item name='Dashboard' href='/' >
-              <Icon name='industry' />
-              Dashboard
-            </Menu.Item>
+        <Menu.Item name='Dashboard' href='/' >
+          <Header inverted sub icon='industry' content='Dashboard' />
+        </Menu.Item>
 
-            <Menu.Item name='Metrics' href='/' >
-              <Icon name='tasks' />
-              Metrics
-            </Menu.Item>
+        <Menu.Item name='Metrics' href='/'>
+          <Header inverted sub icon='tasks' content='Metrics' />
+        </Menu.Item>
 
-            <Menu.Item name='Alerts' href='/' >
-              <Icon name='alarm' />
-              Alerts
-            </Menu.Item>
+        <Menu.Item name='Alerts' href='/' >
+          <Header inverted sub icon='alarm' content='Alerts' />
+        </Menu.Item>
 
-            <Menu.Item name='History' href='/' >
-              <Icon name='book' />
-              History
-            </Menu.Item>
+        <Menu.Item name='History' href='/'>
+          <Header inverted sub icon='book' content='History' />
+        </Menu.Item>
 
 
-            <Menu.Item href='/'>
-              <Icon name='play circle' />
+        <Menu.Item name='Custom'>
+          <Header inverted sub><Icon name='play circle' />
+            <Header.Content>
               <Dropdown text='Custom'>
                 <Dropdown.Menu>
                   <Dropdown.Header>Custom</Dropdown.Header>
@@ -95,16 +84,14 @@ export class LeftMenu extends React.Component<any, any> {
                   <Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
-            </Menu.Item>
-            <Menu.Item name='Settings' href='/' >
-              <Icon name='setting' />
-              Settings
-            </Menu.Item>
+            </Header.Content>
+          </Header>
+        </Menu.Item>
 
-          </Menu>
-        </Segment>
-      </Container>
-      // <TopBar onSidebar={this.props.onSidebar}/>
+        <Menu.Item name='Settings' href='/' >
+          <Header inverted sub icon='setting' content='Settings' />
+        </Menu.Item>
+      </Menu>
     );
   }
 }
diff --git a/src/ts/@overflow/app/views/layout/LogoBar.tsx b/src/ts/@overflow/app/views/layout/LogoBar.tsx
index b286a6a..a3048a0 100644
--- a/src/ts/@overflow/app/views/layout/LogoBar.tsx
+++ b/src/ts/@overflow/app/views/layout/LogoBar.tsx
@@ -19,13 +19,11 @@ export class LogoBar extends React.Component<any, any> {
 
   public render(): JSX.Element {
     return (
-      <Container fluid>
+      <Container fluid style={{background:'#f8f8f8', 'padding-right':'7px'}}>
         <Menu borderless secondary >
-          <Menu.Item
-            name='logo'
-            onClick={this.handleLogoClick}
-          >
-            <Header as='h3' icon='stack overflow' content='overFlow' />
+          <Menu.Item name='logo'>
+             {/* <Image src='https://lh3.googleusercontent.com/EaEViB7RYr3Rhhez8zY0TYsNsS5Rv2i63kyiQ5ym0rhQh38KRXBh7BDFo4mjDTDU_Hm6FAVg35247ZM1wE6cO-TuBP4wxYW2SG4hYoojqkUomu587xg3t50VGUSceK17-LUZhM-5XoCsXUXBHtfXVMqMZ2rUb23tgm7Kuv7eTgZZz0o9_dB0lApoi57EBVBNX8_qIDSH3YmGfvqhnKeh5AYnnBG_QXlTg1JExwtMehCe8KgXs4-vLuVicPCCuJ2AXSoWFpVXL9TVhrrMOkeuGd-6PGAFiNxeTG6NylQKwbQikx3Mx7KmGq3iSc8mqp0AmwjptG2DtS7nqwNaAZAi1DtraHYgJcE_tfpEgnZfFSWmVYQYcUe98pfZR11OfJErdJxE3w-mL1b4MoyufB0VkSlFM1BpMlfP3OsnnDIdNAXthT6MuLtI2iLv_CNeoDKi3fdH-zIcSmoArgAFrAo0-9oYUfvQDdaC_8MMddc97b_L78fzFOPRGIf52Ajr-Ia6sjdyDFdJ46-wPKfMW8XHnFfA96NsIcA-HYRZ7GTteJOzVq6HEabwnurZdTxdmCjzGHcb7OEu00DkVMhM6WbWZ0L8HWpIk92sy-sKbprHe-9oh_9WaxJzPrlG=w180-h30-no'
+            style={{width:'120px'}} onClick={this.handleLogoClick} />  */}
           </Menu.Item>
           <Menu.Item
             position='right'
diff --git a/src/ts/@overflow/app/views/layout/TitleBar.tsx b/src/ts/@overflow/app/views/layout/TitleBar.tsx
index c20f340..5fbae3e 100644
--- a/src/ts/@overflow/app/views/layout/TitleBar.tsx
+++ b/src/ts/@overflow/app/views/layout/TitleBar.tsx
@@ -25,11 +25,11 @@ export class TitleBar extends React.Component<any, any> {
       },
     ];
     return (
-      <Menu basic fluid style={{ 'border-left': '0px', 'border-right': '0px', 'box-shadow': 'none', 'border-radius': '0' }}>
+      <Menu 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 size='mini'>
                 <Breadcrumb.Section link>Home</Breadcrumb.Section>
                 <Breadcrumb.Divider />
                 <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>