From 556b00405142b1d62a784b2887f6f2945067614b Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Mon, 17 Jul 2017 11:57:17 +0900
Subject: [PATCH] submenubar

---
 src/ts/containers/test/layout/TitleBar.tsx | 53 ++++++++++++++++------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/ts/containers/test/layout/TitleBar.tsx b/src/ts/containers/test/layout/TitleBar.tsx
index 9f3df64..da75f89 100644
--- a/src/ts/containers/test/layout/TitleBar.tsx
+++ b/src/ts/containers/test/layout/TitleBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Breadcrumb, Header } from 'semantic-ui-react';
+import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'semantic-ui-react';
 
 export class TitleBar extends React.Component<any, any> {
 
@@ -9,23 +9,46 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
+  handleMenu(idx: number) {
+    alert(idx);
+  }
 
   render() {
+    let subMenus = [
+      {
+        "name": "Menu1",
+      },
+      {
+        "name": "Menu2",
+      },
+      {
+        "name": "Menu3",
+      },
+    ];
     return (
-      <div>
-        <Header as='h3'>Page Title<Header.Subheader>
-          <Breadcrumb>
-            <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>
-
-
-      </div>
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width='3'>
+            <Header as='h3'>Page Title<Header.Subheader>
+              <Breadcrumb>
+                <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 name={menu.name} key={index} onClick={this.handleMenu.bind(this, index)}/>
+              ))}
+            </Menu>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     );
   }
 }