diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.js b/SAS/TMSS/frontend/tmss_webapp/src/App.js index 921c19f556f21059eb6c51a51140efaa9840f845..61f31971cf9f2a395a8854afe21565227c653ab5 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/App.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/App.js @@ -62,11 +62,11 @@ class App extends Component { this.menu = [ //{label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/dashboard',section: 'dashboard'}, {label: 'Cycle', icon:'pi pi-fw pi-spinner', to:'/cycle',section: 'cycle'}, - {label: 'Project', icon: 'fab fa-fw fa-wpexplorer', to:'/project',section: 'project'}, + {label: 'Project', icon: 'pi pi-fw pi-compass', to:'/project',section: 'project'}, {label: 'Scheduling Units', icon: 'pi pi-fw pi-calendar', to:'/schedulingunit',section: 'schedulingunit'}, {label: 'Tasks', icon: 'pi pi-fw pi-check-square', to:'/task'}, - {label: 'Workflow', icon: 'pi pi-sitemap', to:'/su/workflow',section: 'workflow'}, - {label: 'Week View', icon: 'fab fa fa-calendar-alt', to:'/su/timelineview/week',section: 'su/timelineview/week'}, + {label: 'Workflow', icon: 'pi pi-fw pi-sitemap', to:'/su/workflow',section: 'workflow'}, + {label: 'Week View', icon: 'pi pi-fw pi-calendar-times', to:'/su/timelineview/week',section: 'su/timelineview/week'}, {label: 'Reports', icon: 'pi pi-fw pi-chart-bar', to:'/reports',section: 'reports'}, ]; } diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_variables.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_variables.scss index cfb153f3cea23fd4b18dcc389dc39af723fe7a52..fe7ba49deb049db953fea7be0292bbe662059c70 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_variables.scss +++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/_variables.scss @@ -13,6 +13,9 @@ $menuitemBadgeBgColor:#007be5; $menuitemBadgeColor:#ffffff; $submenuFontSize:13px; $menuitemActiveRouteColor:#1fa1fc; +$menuitemHoverBgColor:#c5cae9; + + /* Menu Light */ $menuBgColorFirst:#f3f4f9; diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppMenu.js b/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppMenu.js index 3dedb15c07eaa6ddb3cf5a97fc0fd9ca34dab12b..b318d83f3f759c05dc07e99feb32baa4f2ec43cd 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppMenu.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppMenu.js @@ -103,10 +103,8 @@ class AppSubmenu extends Component { if (item.to) { return ( - //<NavLink activeClassName="active-route" to={item.to} onClick={(e) => this.onMenuItemClick(e, item, i)} exact target={item.target}> - <a href={item.to} className="active-route" onClick={(e) => this.onMenuItemClick(e, item, i)} exact="true" target={item.target}> + <a href={item.to} className="active-route" onClick={(e) => this.onMenuItemClick(e, item, i)} target={item.target}> {content} - {/* </NavLink> */} </a> ) } @@ -121,12 +119,11 @@ class AppSubmenu extends Component { } render() { - let items = this.props.items && this.props.items.map((item, i) => { + let items = this.props.items?.map((item, i) => { let active = this.state.activeIndex === i; - // let styleClass = classNames(item.badgeStyleClass, {'active-menuitem': active && !item.to}); let styleClass = classNames(item.badgeStyleClass, {'active-menuitem': active && item.to}); return ( - <li className={styleClass} key={i}> + <li className={styleClass} key={item.label}> {item.items && this.props.root===true && <div className='arrow'></div>} {this.renderLink(item, i)} <AppSubmenu toggleDirtyDialog={this.props.toggleDirtyDialog} isEditDirty={this.props.isEditDirty} history={this.props.history} items={item.items} onMenuItemClick={this.props.onMenuItemClick}/> diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_menu.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_menu.scss index d9f413ed4495483e8923d1081db861895c78f2a7..743abb9b07085ce240adbb77618ba627d7ffbf94 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_menu.scss +++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_menu.scss @@ -2,11 +2,15 @@ padding-bottom: 120px; } + + + .layout-menu { list-style-type: none; margin: 0; padding: 0; + li { a { cursor: pointer; @@ -56,7 +60,7 @@ > li { > a { - padding: 1em; + padding: 10px; span { font-size: $fontSize; @@ -130,6 +134,8 @@ &:hover { color: $menuitemHoverColor; + background-color: $menuitemHoverBgColor; + } }