Overrided css class for header

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css

@@ -1,3 +1,9 @@
 .App {
   padding: 20px;
+}
+
+.ant-layout-header{
+  padding: 0;
+  height: auto;
+  box-shadow: 0 2px 8px #f0f1f2;
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import * as serviceWorker from './serviceWorker';
-import App from "./App"
+import App from "./App";
-import Login from "./pages/Login"
+import Login from "./pages/Login";
-import Dashboard from "./pages/dashboard/Dashboard"
+import Dashboard from "./pages/dashboard/Dashboard";
+import Apps from "./pages/dashboard/apps/Apps";
+import AddNewApp from "./pages/dashboard/add-new-app/AddNewApp";
+import './index.css';
 
 
 
@@ -15,7 +17,17 @@ const routes = [
     },
     {
         path: '/publisher/dashboard',
-        component: Dashboard
+        component: Dashboard,
+        routes: [
+            {
+                path: '/publisher/dashboard/apps',
+                component: Apps
+            },
+            {
+                path: '/publisher/dashboard/new-app',
+                component: AddNewApp
+            }
+        ]
     }
 ]
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Layout, Menu, Breadcrumb, PageHeader } from 'antd';
+import { Layout, Menu, Icon } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
@@ -7,7 +7,7 @@ import styles from './Dashboard.less';
 import Logo from "../../../public/images/logo.svg";
 import Login from "../Login";
 import {renderRoutes} from "react-router-config";
-import {NavLink} from "react-router-dom";
+import {Link, NavLink} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 
 
@@ -30,25 +30,16 @@ class Dashboard extends React.Component {
                         defaultSelectedKeys={['2']}
                         style={{ lineHeight: '64px' }}
                     >
-                        <Menu.Item key="1">nav 1</Menu.Item>
+                        <Menu.Item key="1"><Link to="apps"><Icon type="appstore" />Apps</Link></Menu.Item>
-                        <Menu.Item key="2">nav 2</Menu.Item>
+                        <Menu.Item key="2"><Link to="apps"><Icon type="line-chart" />Apps</Link></Menu.Item>
-                        <Menu.Item key="3">nav 3</Menu.Item>
+                        <Menu.Item key="3"><Link to="new-app"><Icon type="upload" />Add New App</Link></Menu.Item>
                     </Menu>
                 </Header>
                 <Content style={{ padding: '0 0' }}>
-                    <Breadcrumb style={{ margin: '16px 50px' }}>
+                    {this.state.routes.map((route) => (
-                        <Breadcrumb.Item>Home</Breadcrumb.Item>
+                        <RouteWithSubRoutes key={route.path} {...route} />
-                        <Breadcrumb.Item>List</Breadcrumb.Item>
+                    ))}
-                        <Breadcrumb.Item>App</Breadcrumb.Item>
+
-                    </Breadcrumb>
-                    <PageHeader
-                        title="Title"
-                    />
-                    <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
-                        {this.state.routes.map((route) => (
-                            <RouteWithSubRoutes key={route.path} {...route} />
-                        ))}
-                    </div>
                 </Content>
                 <Footer style={{ textAlign: 'center' }}>
                     ©2019 entgra.io