sidebar menu fixes

src/app/theme/components/pageTop/pageTop.component.ts

@@ -14,11 +14,14 @@ import {ScrollPosition} from '../../directives';
   encapsulation: ViewEncapsulation.None
 })
 export class PageTop {
+
   isScrolled:Boolean = false;
   isMenuCollapsed:boolean = false;
 
-
   constructor(private _state:AppState) {
+    this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
+      this.isMenuCollapsed = isCollapsed;
+    });
   }
 
   toggleMenu() {

src/app/theme/components/sidebar/sidebar.component.ts

@@ -37,14 +37,20 @@ export class Sidebar {
     this._router.root.subscribe((path) => this._selectMenuItem(path));
   }
 
+  ngOnInit() {
+    if (this._shouldMenuCollapse()) {
+      this.menuCollapse();
+    }
+  }
+
   ngAfterViewInit() {
     this.updateSidebarHeight();
   }
 
-  @HostListener('window:resize', ['$event'])
-  onWindowResize($event) {
+  @HostListener('window:resize')
+  onWindowResize() {
 
-    var isMenuShouldCollapsed = $event.target.innerWidth <= layoutSizes.resWidthCollapseSidebar;
+    var isMenuShouldCollapsed = this._shouldMenuCollapse();
 
     if (this.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
       this.menuCollapseStateChange(isMenuShouldCollapsed);
@@ -94,6 +100,10 @@ export class Sidebar {
     return false;
   }
 
+  private _shouldMenuCollapse() {
+    return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
+  }
+
   private _selectMenuItem(currentPath = null) {
 
     let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems, currentPath);

src/app/theme/components/sidebar/sidebar.html

@@ -1,7 +1,7 @@
 <aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
   <ul class="al-sidebar-list">
     <li *ngFor="let item of menuItems" class="al-sidebar-list-item"
-        [ngClass]="{'selected': item.selected, 'with-sub-menu': item.subMenu}">
+        [ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
 
       <a *ngIf="!item.subMenu" [routerLink]="[item.component]" class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
@@ -15,8 +15,8 @@
       </a>
 
       <ul *ngIf="item.subMenu" class="al-sidebar-sublist"
-          [ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}">
-        <li *ngFor="let subitem of item.subMenu"
+          [ngClass]="{'slide-right': item.slideRight}">
+        <li *ngFor="let subitem of item.subMenu" class="ba-sidebar-sublist-item"
             [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
           <a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
              class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>

src/app/theme/components/sidebar/sidebar.scss

@@ -18,6 +18,7 @@ $angle-right: "\f101";
 
 .al-sidebar-list {
   margin: 0;
+  overflow: hidden;
   padding: 18px 0 0 0;
   list-style: none;
 }