layout setting

src/ts/App.tsx

@@ -9,7 +9,9 @@ import * as History from 'history';
 import { Main } from './containers/Main';
 import { Routes } from './Routes';
 
-const history = History.createHashHistory();
+import { Layout } from './containers/test/layout/Layout';
+
+// const history = History.createHashHistory();
 
 const styles = {
   container: {
@@ -29,12 +31,16 @@ export class App extends React.Component<any, any> {
     super(props, context);
   }
 
- 
+
   render() {
     return (
-        <Router history={history}>
-          <Routes />
-        </Router>
+      <div>
+        
+        <Layout />
+        
+        
+        
+      </div>
     );
   }
 }

src/ts/Routes.tsx

@@ -2,22 +2,22 @@ import * as React from 'react';
 import { Switch } from 'react-router';
 import { Link, Route } from 'react-router-dom';
 
-import { TopBar } from './containers/test/TopBar';
+// import { TopBar } from './containers/test/TopBar';
 import { SignUp } from './containers/test/SignUp';
 import { SignIn } from './containers/test/SignIn';
 import { PWChange } from './containers/test/PWChange';
 import { ProbeDown } from './containers/test/ProbeDown';
 import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
 import { Components } from './containers/test/Components';
-import { Layout } from './containers/test/layout/Layout'
+// import { Layout } from './containers/test/layout/Layout'
 
 
 export class Routes extends React.Component<any, any> {
   render() {
     return (
       <div>
-        <h1>React Redux sample</h1>
-        <li><Link to='/layout' >Layout</Link></li>
+        {/*<h1>React Redux sample</h1>
+        
         <li><Link to='/test' >TopBar</Link></li>
         <li><Link to='/test2' >Signup</Link></li>
         <li><Link to='/test3' >SignIn</Link></li>
@@ -25,12 +25,12 @@ export class Routes extends React.Component<any, any> {
         <li><Link to='/test5' >ProbeDown</Link></li>
         <li><Link to='/test6' >DiscoveryDetails</Link></li>
 
-        <li><Link to='/test14' >Insanity</Link></li>
+        <li><Link to='/test14' >Insanity</Link></li>*/}
 
 
         <Switch>
-          <Route exact path='/layout' component={Layout} />
-          <Route exact path='/test' component={TopBar} />
+          
+          
           <Route exact path='/test2' component={SignUp} />
           <Route exact path='/test3' component={SignIn} />
           <Route exact path='/test4' component={PWChange} />

src/ts/containers/test/TopBar.tsx

@@ -5,7 +5,8 @@ import {
   Sidebar, Segment, Button, Image, Header,
 } from 'semantic-ui-react'
 
-
+import { Link, Route } from 'react-router-dom';
+import * as History from 'history';
 
 const options = [
   { key: 'angular', text: 'Angular', value: 'angular' },
@@ -29,6 +30,8 @@ const options = [
 ]
 
 
+
+
 export class TopBar extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
@@ -41,12 +44,23 @@ export class TopBar extends React.Component<any, any> {
 
 
   render() {
+ {/*<h1>React Redux sample</h1>
+        
+        <li><Link to='/test' >TopBar</Link></li>
+        <li><Link to='/test2' >Signup</Link></li>
+        <li><Link to='/test3' >SignIn</Link></li>
+        <li><Link to='/test4' >PWChange</Link></li>
+        <li><Link to='/test5' >ProbeDown</Link></li>
+        <li><Link to='/test6' >DiscoveryDetails</Link></li>
 
+        <li><Link to='/test14' >Insanity</Link></li>*/}
 
     return (
+
+      
       <div>
         <Menu  inverted borderless size='tiny'>
-          <Menu.Item href='//google.com' target='_blank'>           Home    </Menu.Item>
+          <Menu.Item href='/' > Home   </Menu.Item>
           <Dropdown text='Monitoring' pointing className='link item'>
             <Dropdown.Menu>
               <Dropdown.Item> Probe </Dropdown.Item>
@@ -64,6 +78,17 @@ export class TopBar extends React.Component<any, any> {
           <Menu.Item>            Metrics    </Menu.Item>
           <Menu.Item>            Alert    </Menu.Item>
           <Menu.Item>            History    </Menu.Item>
+          <Dropdown text='Custom' pointing className='link item'>
+            <Dropdown.Menu>
+              <Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
+              <Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
+              <Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
+              <Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
+              <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
+              <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          
 
           <Menu.Item position='right'>
             <Icon name='setting' />
@@ -93,7 +118,7 @@ export class TopBar extends React.Component<any, any> {
         </Menu>
 
 
-        <Sidebar.Pushable as={Segment}  >
+        {/*<Sidebar.Pushable as={Segment}  >
           <Sidebar
             as={Menu}
             animation='overlay'
@@ -123,7 +148,7 @@ export class TopBar extends React.Component<any, any> {
 
             </Segment>
           </Sidebar.Pusher>
-        </Sidebar.Pushable>
+        </Sidebar.Pushable>*/}
       </div>
     );
   }

src/ts/containers/test/layout/Layout.tsx

@@ -3,6 +3,12 @@ import { Container } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
+import { Routes } from '../../../Routes';
+import { Router } from 'react-router';
+import * as History from 'history';
+
+const history = History.createHashHistory();
+
 export class Layout extends React.Component<any, any> {
 
   constructor(props: any, context: any) {
@@ -14,10 +20,15 @@ export class Layout extends React.Component<any, any> {
   render() {
     return (
       <div>
+        <br />
         <Header />
         <Container>
-          contents area
+          <br />
+          <Router history={history}>
+            <Routes />
+          </Router>
         </Container>
+        <br />
         <Footer />
       </div>
     );