submenubar

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,10 +9,26 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
+  handleMenu(idx: number) {
+    alert(idx);
+  }
 
   render() {
+    let subMenus = [
+      {
+        "name": "Menu1",
+      },
+      {
+        "name": "Menu2",
+      },
+      {
+        "name": "Menu3",
+      },
+    ];
     return (
-      <div>
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width='3'>
             <Header as='h3'>Page Title<Header.Subheader>
               <Breadcrumb>
                 <Breadcrumb.Section link>Home</Breadcrumb.Section>
@@ -23,9 +39,16 @@ export class TitleBar extends React.Component<any, any> {
               </Breadcrumb>
             </Header.Subheader>
             </Header>
-
+          </Grid.Column>
-
+          <Grid.Column width='13'>
-      </div>
+            <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>
     );
   }
 }