Merge branch 'application-mgt-new' into 'application-mgt-new'

Add navbar to device mgt reat app

See merge request entgra/carbon-device-mgt!213
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
commit e3a8c85c9b

@ -1,17 +1,11 @@
{
"theme": {
"type": "default",
"value": "lightBaseTheme",
"logo" : "https://entgra.io/assets/images/svg/logo.svg",
"logo" : "https://localhost:9443/entgra/public/images/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",

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 42 KiB

@ -39,16 +39,13 @@
padding: 5px;
}
.logo-image {
/*width: 120px;*/
height: 31px;
margin: 0 5px 16px 24px;
float: left;
}
/*.logo-image {*/
/*!*width: 120px;*!*/
/*height: 31px;*/
/*margin: 0 5px 16px 24px;*/
/*float: left;*/
/*}*/
.logo-image img{
height: 35px;
}
.main-container {
background: #f0f2f5;
@ -65,3 +62,40 @@
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;
}

@ -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" >
<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="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 key="trigger">
</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>
);
}

Loading…
Cancel
Save