From c0a4fdc79749e0f0f1c0229e16c4c5de9e117769 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 7 Dec 2018 17:06:44 +0100
Subject: [PATCH] 57053: added menu preview

---
 .../admin-sidebar-section.component.html      |  2 +-
 .../admin-sidebar.component.html              |  7 +-
 .../admin-sidebar.component.scss              |  8 +-
 .../admin-sidebar/admin-sidebar.component.ts  | 17 +++--
 ...dable-admin-sidebar-section.component.html |  8 +-
 ...andable-admin-sidebar-section.component.ts |  9 +++
 src/app/app.component.html                    |  6 +-
 src/app/app.component.scss                    |  3 +-
 src/app/app.component.ts                      | 12 ++-
 src/app/navbar/navbar.component.scss          |  2 -
 .../pagenotfound/pagenotfound.component.html  |  2 +-
 src/app/shared/animations/slide.ts            | 11 ++-
 src/app/shared/menu/initial-menus-state.ts    |  2 +
 src/app/shared/menu/menu.actions.ts           | 21 +++++
 src/app/shared/menu/menu.component.ts         | 23 ++++++
 src/app/shared/menu/menu.effects.ts           | 76 +++++++++----------
 src/app/shared/menu/menu.reducer.ts           | 11 ++-
 src/app/shared/menu/menu.service.ts           | 31 +++++++-
 src/styles/_bootstrap_variables.scss          |  3 +
 src/styles/_custom_variables.scss             |  1 -
 src/styles/_exposed_variables.scss            |  3 +-
 21 files changed, 179 insertions(+), 79 deletions(-)

diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
index 9823861097..aec0635e82 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -1,5 +1,5 @@
 <li class="sidebar-section">
-    <a class="nav-item nav-link shortcut-icon">
+    <a class="nav-item nav-link shortcut-icon" [routerLink]="section.model.link">
         <i class="fas fa-{{section.icon}} fa-fw"></i>
     </a>
     <div class="sidebar-collapsible">
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.html b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
index eedb95525a..7a339d85f2 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
@@ -1,9 +1,9 @@
 <nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
-     value: ((menuCollapsed | async) ? 'collapsed' : 'expanded'),
+     value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
      params: {sidebarWidth: (sidebarWidth | async)}
-    }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)" *ngIf="menuVisible | async">
+    }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)" *ngIf="menuVisible | async" (mouseenter)="expandPreview($event)" (mouseleave)="collapsePreview($event)">
     <div class="sidebar-top-level-items">
         <ul class="navbar-nav">
             <li class="admin-menu-header sidebar-section">
@@ -30,8 +30,7 @@
             <a class="nav-item nav-link shortcut-icon"
                href="#"
                (click)="toggle($event)">
-                <i class="fas fa-fw fa-angle-double-right"
-                   [ngClass]="{'fa-angle-double-right': (menuCollapsed | async), 'fa-angle-double-left': !(menuCollapsed | async)}"></i>
+                <i class="fas fa-fw"                   [ngClass]="{'fa-angle-double-right': (menuCollapsed | async), 'fa-angle-double-left': !(menuCollapsed | async)}"></i>
             </a>
             <div class="sidebar-collapsible">
                 <a class="nav-item nav-link sidebar-section"
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
index b4dbc99027..9236cd2a0d 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
@@ -20,7 +20,7 @@ $icon-z-index: 10;
         }
 
         &.inactive ::ng-deep .sidebar-collapsible {
-            margin-left: -#{$admin-sidebar-width};
+            margin-left: -#{$sidebar-items-width};
         }
 
         .navbar-nav {
@@ -58,7 +58,7 @@ $icon-z-index: 10;
                         z-index: $icon-z-index;
                     }
                     .sidebar-collapsible {
-                        width: $admin-sidebar-width;
+                        width: $sidebar-items-width;
                         position: relative;
                         a {
                             padding-right: $spacer;
@@ -69,10 +69,6 @@ $icon-z-index: 10;
                         color: $navbar-dark-active-color;
                     }
                 }
-
-                #sidebar-collapse-toggle {
-                    border-top: 2px solid rgba(255, 255, 255, 0.1);
-                }
             }
         }
 
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index 2ae09c7fb4..699898454f 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -8,7 +8,8 @@ import { MenuComponent } from '../../shared/menu/menu.component';
 import { TextSectionTypeModel } from '../../shared/menu/models/section-types/text.model';
 import { LinkSectionTypeModel } from '../../shared/menu/models/section-types/link.model';
 import { AuthService } from '../../core/auth/auth.service';
-import { first } from 'rxjs/operators';
+import { first, map } from 'rxjs/operators';
+import { combineLatest as combineLatestObservable } from 'rxjs';
 
 @Component({
   selector: 'ds-admin-sidebar',
@@ -19,8 +20,9 @@ import { first } from 'rxjs/operators';
 export class AdminSidebarComponent extends MenuComponent implements OnInit {
   menuID = MenuID.ADMIN;
   sidebarWidth: Observable<string>;
-  sidebarOpen = true;
-  sidebarClosed = !this.sidebarOpen;
+  sidebarOpen = true; // Open in UI, animation finished
+  sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished
+  sidebarExpanded: Observable<boolean>;
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
@@ -33,7 +35,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
   ngOnInit(): void {
     this.createMenu();
     super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('adminSidebarWidth');
+    this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {
@@ -44,7 +46,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
       .subscribe((collapsed: boolean) => {
         this.sidebarOpen = !collapsed;
         this.sidebarClosed = collapsed;
-      })
+      });
+    this.sidebarExpanded = combineLatestObservable(this.menuCollapsed, this.menuPreviewCollapsed)
+      .pipe(
+        map(([collapsed, previewCollapsed]) => (!collapsed || !previewCollapsed))
+      );
   }
 
   createMenu() {
@@ -431,5 +437,4 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
       this.sidebarOpen = true;
     }
   }
-
 }
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index 044293c823..11914106bd 100644
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -1,6 +1,6 @@
-<li class="sidebar-section" [ngClass]="{'active': (active | async)}"
+<li class="sidebar-section" [ngClass]="{'expanded': (expanded | async)}"
     [@bgColor]="{
-     value: ((active | async) ? 'endBackground' : 'startBackground'),
+     value: ((expanded | async) ? 'endBackground' : 'startBackground'),
      params: {endColor: (sidebarActiveBg | async)}}">
     <div class="icon-wrapper">
         <a class="nav-item nav-link shortcut-icon" (click)="toggleSection($event)" href="#">
@@ -15,9 +15,9 @@
                         *ngComponentOutlet="itemComponents.get(section.id); injector: itemInjectors.get(section.id);"></ng-container>
             </span>
             <i class="fas fa-chevron-right fa-pull-right"
-               [@rotate]="(active | async) ? 'expanded' : 'collapsed'"></i>
+               [@rotate]="(expanded | async) ? 'expanded' : 'collapsed'"></i>
         </a>
-        <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(active | async)">
+        <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(expanded | async)">
             <li *ngFor="let subSection of (subSections | async)">
                 <ng-container
                         *ngComponentOutlet="itemComponents.get(subSection.id); injector: itemInjectors.get(subSection.id);"></ng-container>
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index 6b086524d7..af009a5dd6 100644
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -9,6 +9,8 @@ import { rendersSectionForMenu } from '../../../shared/menu/menu.decorator';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuSection } from '../../../shared/menu/menu.reducer';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { combineLatest as combineLatestObservable } from 'rxjs';
 
 @Component({
   selector: 'ds-expandable-admin-sidebar-section',
@@ -23,6 +25,8 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
   menuID = MenuID.ADMIN;
   sidebarActiveBg;
   sidebarCollapsed: Observable<boolean>;
+  sidebarPreviewCollapsed: Observable<boolean>;
+  expanded: Observable<boolean>;
 
   constructor(@Inject('sectionDataProvider') menuSection, protected menuService: MenuService,
               private variableService: CSSVariableService, protected injector: Injector) {
@@ -35,5 +39,10 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
     this.subSections = this.menuService.getSubSectionsByParentID(this.menuID, this.section.id);
     this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
     this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
+    this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
+    this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed)
+      .pipe(
+        map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed)))
+      );
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9dd4da47ba..d69b6083c1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1,8 @@
 <div class="outer-wrapper">
     <ds-admin-sidebar></ds-admin-sidebar>
-    <div class="inner-wrapper"  [@slideSidebarMargin]="{
-     value: ((hasAdminSidebar | async) ? 'expanded' : 'collapsed'),
-     params: {collapsedSidebarWidth: (collapsedSidebarWidth | async)}
+    <div class="inner-wrapper"  [@slideSidebarPadding]="{
+     value: (!(sidebarVisible | async) ? 'hidden' : (sidebarCollapsed | async) ? 'shown' : 'expanded'),
+     params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
     }">
         <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 6fbc8310db..c90d35678d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -25,6 +25,7 @@ body {
   min-height: 100vh;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .main-content {
@@ -39,7 +40,7 @@ ds-header-navbar-wrapper {
 }
 
 ds-admin-sidebar {
-  position: absolute;
+  position: fixed;
   z-index: $sidebar-z-index;
 }
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d802d6bee5..3a99b4aceb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -28,7 +28,7 @@ import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
 import { MenuService } from './shared/menu/menu.service';
 import { MenuID } from './shared/menu/initial-menus-state';
 import { Observable } from 'rxjs/internal/Observable';
-import { slideSidebarMargin } from './shared/animations/slide';
+import { slideSidebarPadding } from './shared/animations/slide';
 
 @Component({
   selector: 'ds-app',
@@ -36,12 +36,14 @@ import { slideSidebarMargin } from './shared/animations/slide';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  animations: [slideSidebarMargin]
+  animations: [slideSidebarPadding]
 })
 export class AppComponent implements OnInit, AfterViewInit {
   isLoading = true;
-  hasAdminSidebar: Observable<boolean>;
+  sidebarVisible: Observable<boolean>;
+  sidebarCollapsed: Observable<boolean>;
   collapsedSidebarWidth: Observable<string>;
+  totalSidebarWidth: Observable<string>;
 
   constructor(
     @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
@@ -80,9 +82,11 @@ export class AppComponent implements OnInit, AfterViewInit {
       first(),
       filter((authenticated) => !authenticated)
     ).subscribe((authenticated) => this.authService.checkAuthenticationToken());
-    this.hasAdminSidebar = this.menuService.isMenuVisible(MenuID.ADMIN);
+    this.sidebarVisible = this.menuService.isMenuVisible(MenuID.ADMIN);
+    this.sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
 
     this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth');
+    this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth');
   }
 
   private storeCSSVariables() {
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index d3c682d004..f8cc6992c2 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -9,7 +9,6 @@ nav.navbar {
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     .navbar {
         width: 100%;
-        left: 0;
         background-color: $white;
         position: absolute;
         overflow: hidden;
@@ -37,7 +36,6 @@ nav.navbar {
         padding-left: 0;
         padding-right: 0;
     }
-
 }
 
 
diff --git a/src/app/pagenotfound/pagenotfound.component.html b/src/app/pagenotfound/pagenotfound.component.html
index fce500f376..e85316b0ec 100644
--- a/src/app/pagenotfound/pagenotfound.component.html
+++ b/src/app/pagenotfound/pagenotfound.component.html
@@ -1,4 +1,4 @@
-<div class="page-not-found">
+<div class="page-not-found container">
   <h1>404</h1>
   <h2><small>{{"404.page-not-found" | translate}}</small></h2>
   <br/>
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index 94bfaee530..3b65e30d3b 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -59,8 +59,11 @@ export const slideSidebar = trigger('slideSidebar', [
     ))
 ]);
 
-export const slideSidebarMargin = trigger('slideSidebarMargin', [
-  state('collapsed', style({ marginLeft: 0 })),
-  state('expanded', style({ marginLeft: '{{ collapsedSidebarWidth }}' }), { params: { collapsedSidebarWidth: '*' } }),
-  transition('collapsed <=> expanded', [animate('200ms')]),
+export const slideSidebarPadding = trigger('slideSidebarPadding', [
+  state('hidden', style({ paddingLeft: 0 })),
+  state('shown', style({ paddingLeft: '{{ collapsedSidebarWidth }}' }), { params: { collapsedSidebarWidth: '*' } }),
+  state('expanded', style({ paddingLeft: '{{ totalSidebarWidth }}' }), { params: { totalSidebarWidth: '*' } }),
+  transition('hidden <=> shown', [animate('200ms')]),
+  transition('hidden <=> expanded', [animate('200ms')]),
+  transition('shown <=> expanded', [animate('200ms')]),
 ]);
\ No newline at end of file
diff --git a/src/app/shared/menu/initial-menus-state.ts b/src/app/shared/menu/initial-menus-state.ts
index ffad314325..36319f375d 100644
--- a/src/app/shared/menu/initial-menus-state.ts
+++ b/src/app/shared/menu/initial-menus-state.ts
@@ -14,6 +14,7 @@ export const initialMenusState: MenusState = {
     {
       id: MenuID.ADMIN,
       collapsed: true,
+      previewCollapsed: true,
       visible: false,
       sections: {},
       sectionToSubsectionIndex: {}
@@ -22,6 +23,7 @@ export const initialMenusState: MenusState = {
     {
       id: MenuID.PUBLIC,
       collapsed: true,
+      previewCollapsed: true,
       visible: true,
       sections: {},
       sectionToSubsectionIndex: {}
diff --git a/src/app/shared/menu/menu.actions.ts b/src/app/shared/menu/menu.actions.ts
index eadf9e69fc..74f89f8eb2 100644
--- a/src/app/shared/menu/menu.actions.ts
+++ b/src/app/shared/menu/menu.actions.ts
@@ -9,6 +9,8 @@ export const MenuActionTypes = {
   EXPAND_MENU: type('dspace/menu/EXPAND_MENU'),
   SHOW_MENU: type('dspace/menu/SHOW_MENU'),
   HIDE_MENU: type('dspace/menu/HIDE_MENU'),
+  COLLAPSE_MENU_PREVIEW: type('dspace/menu/COLLAPSE_MENU_PREVIEW'),
+  EXPAND_MENU_PREVIEW: type('dspace/menu/EXPAND_MENU_PREVIEW'),
   ADD_SECTION: type('dspace/menu-section/ADD_SECTION'),
   REMOVE_SECTION: type('dspace/menu-section/REMOVE_SECTION'),
   SHOW_SECTION: type('dspace/menu-section/SHOW_SECTION'),
@@ -66,6 +68,25 @@ export class HideMenuAction implements Action {
   }
 }
 
+export class CollapseMenuPreviewAction implements Action {
+  type = MenuActionTypes.COLLAPSE_MENU_PREVIEW;
+  menuID: MenuID;
+
+  constructor(menuID: MenuID) {
+    this.menuID = menuID;
+  }
+}
+
+export class ExpandMenuPreviewAction implements Action {
+  type = MenuActionTypes.EXPAND_MENU_PREVIEW;
+  menuID: MenuID;
+
+  constructor(menuID: MenuID) {
+    this.menuID = menuID;
+  }
+}
+
+
 // MENU STRUCTURING ACTIONS
 export abstract class MenuSectionAction implements Action {
   type;
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 34c7f205b3..f673c1b610 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -15,6 +15,7 @@ import { MenuSectionComponent } from './menu-section/menu-section.component';
 export class MenuComponent implements OnInit {
   menuID: MenuID;
   menuCollapsed: Observable<boolean>;
+  menuPreviewCollapsed: Observable<boolean>;
   menuVisible: Observable<boolean>;
   sections: Observable<MenuSection[]>;
   sectionInjectors: Map<string, Injector> = new Map<string, Injector>();
@@ -26,6 +27,7 @@ export class MenuComponent implements OnInit {
 
   ngOnInit(): void {
     this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
+    this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
     this.menuVisible = this.menuService.isMenuVisible(this.menuID);
     this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(first());
     this.sections.subscribe((sections: MenuSection[]) => {
@@ -41,6 +43,27 @@ export class MenuComponent implements OnInit {
     this.menuService.toggleMenu(this.menuID);
   }
 
+  expand(event: Event) {
+    event.preventDefault();
+    this.menuService.expandMenu(this.menuID);
+  }
+
+  collapse(event: Event) {
+    event.preventDefault();
+    this.menuService.collapseMenu(this.menuID);
+  }
+
+  expandPreview(event: Event) {
+    console.log("HOI IK HOVER");
+    event.preventDefault();
+    this.menuService.expandMenuPreview(this.menuID);
+  }
+
+  collapsePreview(event: Event) {
+    event.preventDefault();
+    this.menuService.collapseMenuPreview(this.menuID);
+  }
+
   getSectionComponent(section: MenuSection): Observable<GenericConstructor<MenuSectionComponent>> {
     return this.menuService.hasSubSections(this.menuID, section.id).pipe(
       map((expandable: boolean) => {
diff --git a/src/app/shared/menu/menu.effects.ts b/src/app/shared/menu/menu.effects.ts
index 5517ee7cf3..0890daa179 100644
--- a/src/app/shared/menu/menu.effects.ts
+++ b/src/app/shared/menu/menu.effects.ts
@@ -17,45 +17,45 @@ import { MenuService } from './menu.service';
 
 @Injectable()
 export class MenuEffects {
+  //
+  // @Effect()
+  // public collapseSectionsOnCollapseMenu$: Observable<Action> = this.actions$.pipe(
+  //   ofType(MenuActionTypes.COLLAPSE_MENU, MenuActionTypes.TOGGLE_MENU),
+  //   switchMap((action: CollapseMenuAction | ToggleMenuAction) => {
+  //     return this.menuService.getMenu(action.menuID).pipe(
+  //       first(),
+  //       switchMap((menu: MenuState) => {
+  //           if (menu.collapsed) {
+  //             const sections = menu.sections;
+  //             return Object.keys(sections)
+  //               .map((id) => {
+  //                   return new DeactivateMenuSectionAction(action.menuID, id);
+  //                 }
+  //               )
+  //           } else {
+  //             return [{ type: 'NO_ACTION' }];
+  //           }
+  //         }
+  //       )
+  //     )
+  //   })
+  // );
 
-  @Effect()
-  public collapseSectionsOnCollapseMenu$: Observable<Action> = this.actions$.pipe(
-    ofType(MenuActionTypes.COLLAPSE_MENU, MenuActionTypes.TOGGLE_MENU),
-    switchMap((action: CollapseMenuAction | ToggleMenuAction) => {
-      return this.menuService.getMenu(action.menuID).pipe(
-        first(),
-        switchMap((menu: MenuState) => {
-            if (menu.collapsed) {
-              const sections = menu.sections;
-              return Object.keys(sections)
-                .map((id) => {
-                    return new DeactivateMenuSectionAction(action.menuID, id);
-                  }
-                )
-            } else {
-              return [{ type: 'NO_ACTION' }];
-            }
-          }
-        )
-      )
-    })
-  );
-
-  @Effect()
-  public onExpandSectionMenuExpandMenu: Observable<Action> = this.actions$.pipe(
-    ofType(MenuActionTypes.ACTIVATE_SECTION, MenuActionTypes.TOGGLE_ACTIVE_SECTION),
-    switchMap((action: ActivateMenuSectionAction | ToggleActiveMenuSectionAction) => {
-      return this.menuService.getMenu(action.menuID).pipe(
-        first(),
-        map((menu: MenuState) => {
-          if (menu.collapsed) {
-            return new ExpandMenuAction(menu.id)
-          } else {
-            return { type: 'NO_ACTION' };
-          }
-        }));
-    })
-  );
+  // @Effect()
+  // public onExpandSectionMenuExpandMenu: Observable<Action> = this.actions$.pipe(
+  //   ofType(MenuActionTypes.ACTIVATE_SECTION, MenuActionTypes.TOGGLE_ACTIVE_SECTION),
+  //   switchMap((action: ActivateMenuSectionAction | ToggleActiveMenuSectionAction) => {
+  //     return this.menuService.getMenu(action.menuID).pipe(
+  //       first(),
+  //       map((menu: MenuState) => {
+  //         if (menu.collapsed) {
+  //           return new ExpandMenuAction(menu.id)
+  //         } else {
+  //           return { type: 'NO_ACTION' };
+  //         }
+  //       }));
+  //   })
+  // );
 
   constructor(private actions$: Actions,
               private menuService: MenuService) {
diff --git a/src/app/shared/menu/menu.reducer.ts b/src/app/shared/menu/menu.reducer.ts
index f5cf909cf3..47716849e2 100644
--- a/src/app/shared/menu/menu.reducer.ts
+++ b/src/app/shared/menu/menu.reducer.ts
@@ -18,7 +18,8 @@ export type MenusState = {
 
 export interface MenuState {
   id: MenuID;
-  collapsed: boolean;
+  collapsed: boolean
+  previewCollapsed: boolean;
   visible: boolean;
   sections: MenuSections
   sectionToSubsectionIndex: MenuSectionIndex;
@@ -53,6 +54,14 @@ export function menusReducer(state: MenusState = initialMenusState, action: Menu
       const newMenuState = Object.assign({}, menuState, { collapsed: false });
       return Object.assign({}, state, { [action.menuID]: newMenuState });
     }
+    case MenuActionTypes.COLLAPSE_MENU_PREVIEW: {
+      const newMenuState = Object.assign({}, menuState, { previewCollapsed: true });
+      return Object.assign({}, state, { [action.menuID]: newMenuState });
+    }
+    case MenuActionTypes.EXPAND_MENU_PREVIEW: {
+      const newMenuState = Object.assign({}, menuState, { previewCollapsed: false });
+      return Object.assign({}, state, { [action.menuID]: newMenuState });
+    }
     case MenuActionTypes.TOGGLE_MENU: {
       const newMenuState = Object.assign({}, menuState, { collapsed: !menuState.collapsed });
       return Object.assign({}, state, { [action.menuID]: newMenuState });
diff --git a/src/app/shared/menu/menu.service.ts b/src/app/shared/menu/menu.service.ts
index 8b586ee980..6c8846c6f9 100644
--- a/src/app/shared/menu/menu.service.ts
+++ b/src/app/shared/menu/menu.service.ts
@@ -7,8 +7,13 @@ import { Observable } from 'rxjs/internal/Observable';
 import { map, switchMap } from 'rxjs/operators';
 import {
   ActivateMenuSectionAction,
-  AddMenuSectionAction, DeactivateMenuSectionAction, HideMenuAction,
-  RemoveMenuSectionAction, ShowMenuAction,
+  AddMenuSectionAction,
+  CollapseMenuAction, CollapseMenuPreviewAction,
+  DeactivateMenuSectionAction,
+  ExpandMenuAction, ExpandMenuPreviewAction,
+  HideMenuAction,
+  RemoveMenuSectionAction,
+  ShowMenuAction,
   ToggleActiveMenuSectionAction,
   ToggleMenuAction,
 } from './menu.actions';
@@ -97,12 +102,34 @@ export class MenuService {
     );
   }
 
+  isMenuPreviewCollapsed(menuID: MenuID): Observable<boolean> {
+    return this.getMenu(menuID).pipe(
+      map((state: MenuState) => state.previewCollapsed)
+    );
+  }
+
   isMenuVisible(menuID: MenuID): Observable<boolean> {
     return this.getMenu(menuID).pipe(
       map((state: MenuState) => state.visible)
     );
   }
 
+  expandMenu(menuID: MenuID): void {
+    this.store.dispatch(new ExpandMenuAction(menuID));
+  }
+
+  collapseMenu(menuID: MenuID): void {
+    this.store.dispatch(new CollapseMenuAction(menuID));
+  }
+
+  expandMenuPreview(menuID: MenuID): void {
+    this.store.dispatch(new ExpandMenuPreviewAction(menuID));
+  }
+
+  collapseMenuPreview(menuID: MenuID): void {
+    this.store.dispatch(new CollapseMenuPreviewAction(menuID));
+  }
+
   toggleMenu(menuID: MenuID): void {
     this.store.dispatch(new ToggleMenuAction(menuID));
   }
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 6b20bfecb0..2739503284 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -2,6 +2,9 @@
 $fa-fixed-width: 1.25rem;
 $icon-padding: 1rem;
 $collapsed-sidebar-width: calculatePx($fa-fixed-width + (2 * $icon-padding));
+$sidebar-items-width: 250px;
+$total-sidebar-width: $collapsed-sidebar-width + $sidebar-items-width;
+
 /* Fonts */
 $fa-font-path: "../assets/fonts";
 /* Images */
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index cf40b7fd67..de5ea9be48 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -18,7 +18,6 @@ $header-logo-height: 80px;
 $admin-sidebar-bg: $dark;
 $admin-sidebar-active-bg: darken($dark, 3%);
 $admin-sidebar-header-bg: darken($dark, 7%);
-$admin-sidebar-width: 250px;
 
 $dark-scrollbar-background: $admin-sidebar-active-bg;
 $dark-scrollbar-foreground: #47495d;
diff --git a/src/styles/_exposed_variables.scss b/src/styles/_exposed_variables.scss
index 1903bd3c19..5f0f2d2654 100644
--- a/src/styles/_exposed_variables.scss
+++ b/src/styles/_exposed_variables.scss
@@ -1,11 +1,12 @@
 @import '_variables.scss';
 
 :export {
-    adminSidebarWidth: $admin-sidebar-width;
     xlMin: map-get($grid-breakpoints, xl);
     mdMin: map-get($grid-breakpoints, md);
     lgMin: map-get($grid-breakpoints, lg);
     smMin: map-get($grid-breakpoints, sm);
     adminSidebarActiveBg: $admin-sidebar-active-bg;
+    sidebarItemsWidth: $sidebar-items-width;
     collapsedSidebarWidth: $collapsed-sidebar-width;
+    totalSidebarWidth: $total-sidebar-width;
 }
\ No newline at end of file