TMSS-237:Slim Menu Added

SAS/TMSS/frontend/tmss_webapp/src/App.js

 import React, {Component} from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import classNames from 'classnames';
 
 import {AppTopbar} from './layout/components/AppTopbar';
 import {AppMenu} from './layout/components/AppMenu';
@@ -17,10 +18,18 @@ class App extends Component {
   constructor() {
     super();
     this.state = {
+	  layoutMode: 'static',
       currentMenu: '',
-      currentPath: '/'
-    }
-    this.onMenuItemClick = this.onMenuItemClick.bind(this)
+      currentPath: '/',
+	  staticMenuInactive: false,
+            overlayMenuActive: false,
+            mobileMenuActive: false,
+    };
+	this.onWrapperClick = this.onWrapperClick.bind(this);
+        this.onToggleMenu = this.onToggleMenu.bind(this);
+        this.onSidebarClick = this.onSidebarClick.bind(this);
+        this.onMenuItemClick = this.onMenuItemClick.bind(this);
+  
     this.menu = [
       {label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/dashboard'},
       {label: 'Scheduling Units', icon: 'pi pi-fw pi-calendar', to:'/scheduling'}
@@ -28,32 +37,78 @@ class App extends Component {
 
     // this.menuComponent = {'Dashboard': Dashboard}
   }
+    
+    onWrapperClick(event) {
+        if (!this.menuClick) {
+            this.setState({
+                overlayMenuActive: false,
+                mobileMenuActive: false
+            });
+        }
+
+        this.menuClick = false;
+    }
 
+    onToggleMenu(event) {
+        this.menuClick = true;
+
+        if (this.isDesktop()) {
+            if (this.state.layoutMode === 'overlay') {
+                this.setState({
+                    overlayMenuActive: !this.state.overlayMenuActive
+                });
+            }
+            else if (this.state.layoutMode === 'static') {
+                this.setState({
+                    staticMenuInactive: !this.state.staticMenuInactive
+                });
+            }
+        }
+        else {
+            const mobileMenuActive = this.state.mobileMenuActive;
+            this.setState({
+                mobileMenuActive: !mobileMenuActive
+            });
+        }
+       
+        event.preventDefault();
+    }
+
+    onSidebarClick(event) {
+        this.menuClick = true;
+    }
   onMenuItemClick(event) {
-    console.log(event);
+    
     this.setState({currentMenu:event.item.label, currentPath: event.item.path});
   }
-
+		
+		isDesktop() {
+        return window.innerWidth > 1024;
+    }
+	
   render() {
+	  
+			const wrapperClass = classNames('layout-wrapper', {
+            'layout-overlay': this.state.layoutMode === 'overlay',
+            'layout-static': this.state.layoutMode === 'static',
+            'layout-static-sidebar-inactive': this.state.staticMenuInactive && this.state.layoutMode === 'static',
+            'layout-overlay-sidebar-active': this.state.overlayMenuActive && this.state.layoutMode === 'overlay',
+            'layout-mobile-sidebar-active': this.state.mobileMenuActive
+        });
     return (
       <React.Fragment>
       <div className="App">
-          
-          <AppTopbar></AppTopbar>
+           <div className={wrapperClass} onClick={this.onWrapperClick}>
+          <AppTopbar onToggleMenu={this.onToggleMenu}></AppTopbar>
           <Router basename={ this.state.currentPath }>
-          <AppMenu model={this.menu} onMenuItemClick={this.onMenuItemClick} />
-            <div className="layout-wrapper layout-static layout-static-sidebar-active">
-              <div className="layout-main">
-                
-                  <RoutedContent />
-                
-              </div>
+		      <AppMenu model={this.menu} onMenuItemClick={this.onMenuItemClick} />
+           <div className="layout-main">
+            <RoutedContent />
             </div>
-          </Router>
+            </Router>
           <AppFooter></AppFooter>
-          
-        
-      </div>
+          </div>
+	  </div>
       </React.Fragment>
     );
   }

SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss

-//Suggested location to add your overrides so that migration would be easy by just updating the SASS folder in the future
\ No newline at end of file
+//Suggested location to add your overrides so that migration would be easy by just updating the SASS folder in the future
+.layout-wrapper.layout-static.layout-static-sidebar-inactive ul li a span{
+    display: none;
+    height: 0px;
+}
+
+.layout-wrapper.layout-static.layout-static-sidebar-inactive ul li a {
+    height: auto;
+}
+.layout-wrapper.layout-static.layout-static-sidebar-inactive  {
+    .layout-profile img{
+        width: 30px;
+        margin: 0px;
+       }
+   .layout-profile p{
+       display: none;
+   }
+   .layout-logo{
+       display: none;
+   }
+   
+   .layout-sidebar-dark .layout-menu li a    {
+    border-top: none;
+   }
+}
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppTopbar.js

@@ -4,8 +4,7 @@ import 'primeicons/primeicons.css';
 import 'primereact/resources/themes/nova-light/theme.css';
 import 'primereact/resources/primereact.css';
 import 'primeflex/primeflex.css';
-
-// import { PropTypes } from 'prop-types';
+ import { PropTypes } from 'prop-types';
 
 
  export class AppTopbar extends Component {
@@ -15,21 +14,22 @@ import 'primeflex/primeflex.css';
     // }
         
     
-    // static defaultProps = {
-    //      onToggleMenu: null
-    // }
+    static defaultProps = {
+        onToggleMenu: null
+   }
      
    
-    // static propTypes = {
-    //     onToggleMenu: PropTypes.func
-    // }
+     static propTypes = {
+       onToggleMenu: PropTypes.func.isRequired
+     }
     
     render() {
         return (
             <React.Fragment>
                 <div className="layout-wrapper layout-static layout-static-sidebar-inactive">
                     <div className="layout-topbar clearfix">
-                        <button className="p-link layout-menu-button"><i className="pi pi-bars"></i></button>
+                        <button className="p-link layout-menu-button" onClick={this.props.onToggleMenu}>
+						<i className="pi pi-bars"></i></button>
                         <span className="header-title">TMSS</span>
                     </div>
                 </div>

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_responsive.scss

@@ -38,18 +38,22 @@
             }
     
             &.layout-static-sidebar-inactive {
+			    
                 .layout-sidebar {
-                    left: -250px;
+                    left: 0;
+                    width: 50px;
+					
                 }
     
                 .layout-topbar  {
-                    left: 0;
+                    left: -10px;
                 }
 
                 .layout-main, .layout-footer {
-                    margin-left: 0;
+                    margin-left: 50px;
                 }
             }
+			
         }
     }
 }