Add nav bar to device mgt reat app

components/device-mgt/io.entgra.device.mgt.ui/react-app/public/conf/config.json

@@ -1,17 +1,11 @@
 {
   "theme": {
-    "type": "default",
+    "logo" : "https://localhost:9443/entgra/public/images/logo.svg",
-    "value": "lightBaseTheme",
-    "logo" : "https://entgra.io/assets/images/svg/logo.svg",
     "primaryColor": "rgb(24, 144, 255)"
   },
   "serverConfig": {
-    "invokerUri": "/ui-request-handler/invoke/application-mgt-entgra/v1.0",
     "invoker": {
       "uri": "/entgra-ui-request-handler/invoke",
-      "publisher": "/application-mgt-publisher/v1.0",
-      "entgra": "/application-mgt-entgra/v1.0",
-      "admin" : "",
       "deviceMgt" : "/device-mgt/v1.0"
     },
     "loginUri": "/entgra-ui-request-handler/login",

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/App.css

@@ -20,48 +20,82 @@
     height: 170px;
 }
 
-.release .release-icon{
+.release .release-icon {
     margin-right: 15px;
 }
 
-.release .release-icon img{
+.release .release-icon img {
     width: 100%;
     border-radius: 28%;
 }
 
-.release .release-title{
+.release .release-title {
     margin-left: 15px;
 }
 
-.release .release-screenshot img{
+.release .release-screenshot img {
     width: 100%;
     border-radius: 15px;
     padding: 5px;
 }
 
-.logo-image {
+/*.logo-image {*/
-  /*width: 120px;*/
+/*!*width: 120px;*!*/
-  height: 31px;
+/*height: 31px;*/
-  margin: 0 5px 16px 24px;
+/*margin: 0 5px 16px 24px;*/
-  float: left;
+/*float: left;*/
-}
+/*}*/
 
-.logo-image img{
-  height: 35px;
-}
 
-.main-container{
+.main-container {
     background: #f0f2f5;
     min-height: 780px
 }
 
-.profile{
+.profile {
-  float:right;
+    float: right;
     margin-right: 2%;
 }
 
 @media only screen and (min-width: 768px) {
-  .main-container{
+    .main-container {
         padding: 24px;
     }
 }
+
+.layout .trigger {
+    font-size: 18px;
+    /*line-height: 64px;*/
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
+    float: left;
+}
+
+.layout .trigger:hover {
+    color: #1890ff;
+}
+
+.layout .logo-image {
+    position: relative;
+    height: 64px;
+    padding-left: 8px;
+    overflow: hidden;
+    line-height: 64px;
+    background: #001529;
+    transition: all .3s;
+}
+
+.layout .brand{
+    display: inline-block;
+    color: #fff;
+    font-weight: 600;
+    font-size: 20px;
+    font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
+    vertical-align: middle;
+}
+
+.layout .logo-image img {
+    height: 32px;
+    margin: 16px;
+}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Dashboard.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Layout, Menu, Icon} from 'antd';
+import {Layout, Menu, Icon, Typography} from 'antd';
 import {Switch, Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Redirect} from 'react-router'
@@ -25,9 +25,10 @@ import "../../App.css";
 import {withConfigContext} from "../../context/ConfigContext";
 import Logout from "./Logout/Logout";
 
-const {Header, Content, Footer} = Layout;
+const {Header, Content, Footer, Sider} = Layout;
 const {SubMenu} = Menu;
 
+const {Title} = Typography;
 
 class Dashboard extends React.Component {
     constructor(props) {
@@ -35,29 +36,67 @@ class Dashboard extends React.Component {
         this.state = {
             routes: props.routes,
             selectedKeys: [],
-            deviceTypes: []
+            deviceTypes: [],
+            isNavBarCollapsed: false,
         };
         this.logo = this.props.context.theme.logo;
     }
 
+    toggle = () => {
+        this.setState({
+            isNavBarCollapsed: !this.state.isNavBarCollapsed,
+        });
+    };
+
     render() {
         return (
             <div>
-                <Layout className="layout">
+                <Layout className="layout" >
-                    <Header style={{paddingLeft: 0, paddingRight: 0}}>
+                    <Sider
+                        trigger={null}
+                        collapsible
+                        collapsed={this.state.isNavBarCollapsed}>
                         <div className="logo-image">
                             <img alt="logo" src={this.logo}/>
+                            <span className="brand">Entgra</span>
+                        </div>
+                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['devices']}>
+                           <Menu.Item key="devices">
+                                <Link to="/entgra/devices">
+                                    <Icon type="appstore"/>
+                                    <span>Devices</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="geo">
+                                <Link to="/entgra/geo">
+                                    <Icon type="environment"/>
+                                    <span>Geo</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="reports">
+                                <Link to="/entgra/reports">
+                                    <Icon type="bar-chart"/>
+                                    <span>Reports</span>
+                                </Link>
+                            </Menu.Item>
+                        </Menu>
+                    </Sider>
+                    <Layout>
+                        <Header style={{background: '#fff', padding: 0}}>
+                            <div className="trigger">
+                            <Icon
+                                type={this.state.isNavBarCollapsed ? 'menu-unfold' : 'menu-fold'}
+                                onClick={this.toggle}
+                            />
                             </div>
                             <Menu
                                 theme="light"
                                 mode="horizontal"
-                            defaultSelectedKeys={['1']}
                                 style={{lineHeight: '64px'}}
                             >
-                            <Menu.Item key="devices"><Link to="/entgra/devices"><Icon type="appstore"/>Devices</Link></Menu.Item>
+                                <Menu.Item key="trigger">
-                            <Menu.Item key="geo"><Link to="/entgra/geo"><Icon type="environment"/>Geo</Link></Menu.Item>
-                            <Menu.Item key="reports"><Link to="/entgra/reports"><Icon type="bar-chart"/>Reports</Link></Menu.Item>
 
+                                </Menu.Item>
                                 <SubMenu className="profile"
                                          title={
                                              <span className="submenu-title-wrapper">
@@ -70,10 +109,7 @@ class Dashboard extends React.Component {
                                 </SubMenu>
 
                             </Menu>
-
                         </Header>
-                </Layout>
-                <Layout>
                         <Content style={{marginTop: 2}}>
                             <Switch>
                                 <Redirect exact from="/entgra" to="/entgra/devices"/>
@@ -86,6 +122,7 @@ class Dashboard extends React.Component {
                             ©2019 entgra.io
                         </Footer>
                     </Layout>
+                </Layout>
             </div>
         );
     }