From 64c50077c2b3484a60a6051239cc82e1b424c6fc Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Mon, 17 Jul 2017 16:14:14 +0900
Subject: [PATCH] listcontainer

---
 src/ts/containers/test/ProbeDetails.tsx       |  2 +-
 src/ts/containers/test/Probes.tsx             |  5 ++-
 .../containers/test/commons/ListContainer.tsx |  4 +--
 .../test/commons/SideBarContainer.tsx         | 33 +++++++++++++++++++
 4 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 src/ts/containers/test/commons/SideBarContainer.tsx

diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index 2e2aeb6..3d14ab8 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -16,7 +16,7 @@ export class ProbeDetails extends React.Component<any, any> {
 
   render() {
     return (
-      <Container>
+      <Container fluid>
         <ProbeBasicInfo probe={this.props.probe} />
         <TargetTable />
       </Container>
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index 87b8969..dba2358 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -82,9 +82,8 @@ export class Probes extends React.Component<any, any> {
     if (this.state.isDetail) {
       return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
     }
-    let component =
+    let probeList =
       <Container fluid>
-        <Header as='h3' dividing>Probe</Header>
         <Table selectable striped>
           <Table.Header>
             <Table.Row>
@@ -111,7 +110,7 @@ export class Probes extends React.Component<any, any> {
       </Container>;
 
     return (
-      <ListContainer contents={component}/>
+      <ListContainer contents={probeList}/>
     );
   }
 }
diff --git a/src/ts/containers/test/commons/ListContainer.tsx b/src/ts/containers/test/commons/ListContainer.tsx
index 24e7f10..b6a199a 100644
--- a/src/ts/containers/test/commons/ListContainer.tsx
+++ b/src/ts/containers/test/commons/ListContainer.tsx
@@ -14,12 +14,10 @@ export class ListContainer extends React.Component<any, any> {
   }
 
   render() {
-    const activeItem = this.state.activeItem;
-
     return (
       <Grid>
         <Grid.Column width={4} textAlign='center' color='grey'>
-          Chart Area
+          CHART AREA
         </Grid.Column>
         <Grid.Column stretched width={12} >
           {this.showContents()}
diff --git a/src/ts/containers/test/commons/SideBarContainer.tsx b/src/ts/containers/test/commons/SideBarContainer.tsx
new file mode 100644
index 0000000..a293064
--- /dev/null
+++ b/src/ts/containers/test/commons/SideBarContainer.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Sidebar, Segment } from 'semantic-ui-react';
+
+export class SideBarContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  showContents() {
+    return this.props.contents;
+  }
+
+  render() {
+    return (
+        <Sidebar.Pushable as={Segment}>
+          <Sidebar
+            animation='overlay'
+            width='thin'
+            direction='right'
+            visible={true}
+            icon='labeled'
+            vertical
+            inverted
+          >
+          test contents
+          </Sidebar>  
+        </Sidebar.Pushable>
+    );
+  }
+}
\ No newline at end of file