From 07c9927b6ad8993c422482b0b7a341573d48d3b8 Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Thu, 6 Dec 2018 15:50:12 +0100
Subject: [PATCH] finished dynamic menus

---
 resources/i18n/en.json                        |  11 +-
 .../admin-sidebar-section.component.html      |   4 +-
 .../admin-sidebar.component.html              |  11 +-
 .../admin-sidebar/admin-sidebar.component.ts  | 203 ++++++++++++++----
 ...dable-admin-sidebar-section.component.html |  10 +-
 ...andable-admin-sidebar-section.component.ts |   9 +-
 src/app/app.module.ts                         |   5 +-
 src/app/app.reducer.ts                        |   3 -
 src/app/core/index/index.reducer.spec.ts      |   2 +
 .../header-navbar-wrapper.component.html      |   2 +-
 .../header-navbar-wrapper.component.ts        |  13 +-
 src/app/header/header.component.html          |   2 +-
 src/app/header/header.component.ts            |  12 +-
 .../expandable-navbar-section.component.html  |  17 ++
 .../expandable-navbar-section.component.scss  |  27 +++
 ...xpandable-navbar-section.component.spec.ts |  25 +++
 .../expandable-navbar-section.component.ts    |  66 ++++++
 .../navbar-section.component.html             |   4 +
 .../navbar-section.component.scss             |   0
 .../navbar-section.component.spec.ts          |  25 +++
 .../navbar-section.component.ts               |  27 +++
 src/app/navbar/navbar.actions.ts              |  40 ----
 src/app/navbar/navbar.component.html          |  43 +---
 src/app/navbar/navbar.component.scss          |  15 --
 src/app/navbar/navbar.component.spec.ts       |  11 +-
 src/app/navbar/navbar.component.ts            | 102 ++++++---
 src/app/navbar/navbar.effects.spec.ts         |   7 +-
 src/app/navbar/navbar.effects.ts              |  11 +-
 src/app/navbar/navbar.module.ts               |  45 ++++
 src/app/navbar/navbar.reducer.spec.ts         |  85 --------
 src/app/navbar/navbar.reducer.ts              |  38 ----
 src/app/shared/animations/slide.ts            |  14 +-
 .../menu-section/menu-section.component.ts    |  32 ++-
 src/app/shared/menu/menu.component.ts         |  17 +-
 src/app/shared/menu/menu.module.ts            |  54 +++++
 src/app/shared/menu/menu.reducer.ts           |  41 ++--
 src/app/shared/menu/menu.service.ts           |  48 +++--
 .../type-components/link-type.component.html  |   2 +-
 src/app/shared/shared.module.ts               |  16 +-
 39 files changed, 720 insertions(+), 379 deletions(-)
 create mode 100644 src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
 create mode 100644 src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
 create mode 100644 src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
 create mode 100644 src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
 create mode 100644 src/app/navbar/navbar-section/navbar-section.component.html
 create mode 100644 src/app/navbar/navbar-section/navbar-section.component.scss
 create mode 100644 src/app/navbar/navbar-section/navbar-section.component.spec.ts
 create mode 100644 src/app/navbar/navbar-section/navbar-section.component.ts
 delete mode 100644 src/app/navbar/navbar.actions.ts
 create mode 100644 src/app/navbar/navbar.module.ts
 delete mode 100644 src/app/navbar/navbar.reducer.spec.ts
 delete mode 100644 src/app/navbar/navbar.reducer.ts
 create mode 100644 src/app/shared/menu/menu.module.ts

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index bc028c5554..906da27286 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -242,8 +242,15 @@
         "registries_metadata": "Metadata",
         "registries_format": "Format",
         "curation_task": "Curation Task",
-        "statistics": "Statistics Task",
-        "control_panel": "Control Panel"
+        "statistics_task": "Statistics Task",
+        "control_panel": "Control Panel",
+
+
+        "browse_global": "All of DSpace",
+        "browse_global_communities_and_collections": "Communities & Collections",
+        "browse_global_by_issue_date": "By Issue Date",
+        "browse_global_by_author": "By Author",
+        "statistics": "Statistics"
       }
     }
   },
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 7e5517fc76..9823861097 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
@@ -4,8 +4,8 @@
     </a>
     <div class="sidebar-collapsible">
             <span class="section-header-text">
-                <ng-container
-                        *ngComponentOutlet="getMenuItemComponent(); injector: getItemModelInjector();"></ng-container>
+        <ng-container
+                *ngComponentOutlet="itemComponents.get(section.id); injector: itemInjectors.get(section.id);"></ng-container>
             </span>
     </div>
 </li>
\ No newline at end of file
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.html b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
index 633b4c63be..e6fa9ac6cb 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 class="navbar navbar-dark bg-dark p-0"
+<nav  @slideHorizontal class="navbar navbar-dark bg-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
      value: ((menuCollapsed | async) ? 'collapsed' : 'expanded'),
      params: {sidebarWidth: (sidebarWidth | async)}
-    }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)">
+    }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)" *ngIf="menuVisible | async">
     <div class="sidebar-top-level-items">
         <ul class="navbar-nav">
             <li class="admin-menu-header sidebar-section">
@@ -18,10 +18,11 @@
                     </a>
                 </div>
             </li>
-            <li *ngFor="let section of (sections | async)">
+
+            <ng-container *ngFor="let section of (sections | async)">
                 <ng-container
-                        *ngComponentOutlet="(getSectionComponent(section) | async); injector: getSectionDataInjector(section);"></ng-container>
-            </li>
+                        *ngComponentOutlet="sectionComponents.get(section.id); injector: sectionInjectors.get(section.id);"></ng-container>
+            </ng-container>
         </ul>
     </div>
     <div class="navbar-nav">
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index 7a805814fd..3d4b0fc313 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -1,18 +1,19 @@
 import { Component, Injector, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
-import { slideSidebar } from '../../shared/animations/slide';
+import { slide, slideHorizontal, slideSidebar } from '../../shared/animations/slide';
 import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID, SectionType } from '../../shared/menu/initial-menus-state';
 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';
 
 @Component({
   selector: 'ds-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
-  animations: [slideSidebar]
+  animations: [slideHorizontal, slideSidebar]
 })
 export class AdminSidebarComponent extends MenuComponent implements OnInit {
   menuID = MenuID.ADMIN;
@@ -22,14 +23,22 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
-              private variableService: CSSVariableService) {
+              private variableService: CSSVariableService,
+              private authService: AuthService
+  ) {
     super(menuService, injector);
   }
 
   ngOnInit(): void {
+    this.createMenu();
     super.ngOnInit();
     this.sidebarWidth = this.variableService.getVariable('adminSidebarWidth');
-    this.createMenu();
+    this.authService.isAuthenticated()
+      .subscribe((loggedIn: boolean) => {
+        if (loggedIn) {
+          this.menuService.showMenu(this.menuID);
+        }
+      });
   }
 
   createMenu() {
@@ -39,7 +48,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'new',
         active: false,
         visible: true,
-        model: { type: SectionType.TEXT, text: 'admin.sidebar.section.new' } as TextSectionTypeModel,
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.new'
+        } as TextSectionTypeModel,
         icon: 'plus-circle'
       },
       {
@@ -47,28 +59,44 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         parentID: 'new',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.new_community', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.new_community',
+          link: '/communities/submission'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'new_collection',
         parentID: 'new',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.new_collection', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.new_collection',
+          link: '/collections/submission'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'new_item',
         parentID: 'new',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.new_item', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.new_item',
+          link: '/items/submission'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'new_item_version',
         parentID: 'new',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.new_item_version', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.new_item_version',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
 
       /* Edit */
@@ -76,7 +104,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'edit',
         active: false,
         visible: true,
-        model: { type: SectionType.TEXT, text: 'admin.sidebar.section.edit' } as TextSectionTypeModel,
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.edit'
+        } as TextSectionTypeModel,
         icon: 'pencil-alt'
       },
       {
@@ -84,21 +115,33 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         parentID: 'edit',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.edit_community', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.edit_community',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'edit_collection',
         parentID: 'edit',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.edit_collection', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.edit_collection',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'edit_item',
         parentID: 'edit',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.edit_item', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.edit_item',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
 
       /* Import */
@@ -106,22 +149,35 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'import',
         active: false,
         visible: true,
-        model: { type: SectionType.TEXT, text: 'admin.sidebar.section.import' } as TextSectionTypeModel,
-        icon: 'sign-in-alt'
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.import'
+        } as TextSectionTypeModel,
+        icon: 'sign-in-alt',
+        index: -1
       },
       {
         id: 'import_metadata',
         parentID: 'import',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.import_metadata', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.import_metadata',
+          link: '#'
+        } as LinkSectionTypeModel,
+        index: 1
       },
       {
         id: 'import_batch',
         parentID: 'import',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.import_batch', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.import_batch',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
 
       /* Export */
@@ -129,7 +185,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'export',
         active: false,
         visible: true,
-        model: { type: SectionType.TEXT, text: 'admin.sidebar.section.export' } as TextSectionTypeModel,
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.export'
+        } as TextSectionTypeModel,
         icon: 'sign-out-alt'
       },
       {
@@ -137,27 +196,43 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         parentID: 'export',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.export_community', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.export_community',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'export_collection',
         parentID: 'export',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.export_collection', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.export_collection',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'export_item',
         parentID: 'export',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.export_item', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.export_item',
+          link: '#'
+        } as LinkSectionTypeModel,
       }, {
         id: 'export_metadata',
         parentID: 'export',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.export_metadata', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.export_metadata',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
 
       /* Access Control */
@@ -165,7 +240,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'access_control',
         active: false,
         visible: true,
-        model: { type: SectionType.TEXT, text: 'admin.sidebar.section.access_control' } as TextSectionTypeModel,
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.access_control'
+        } as TextSectionTypeModel,
         icon: 'key'
       },
       {
@@ -173,21 +251,33 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         parentID: 'access_control',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.access_control_people', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.access_control_people',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'access_control_groups',
         parentID: 'access_control',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.access_control_groups', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.access_control_groups',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'access_control_authorizations',
         parentID: 'access_control',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.access_control_authorizations', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.access_control_authorizations',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
 
       /*  Search */
@@ -195,7 +285,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'find',
         active: false,
         visible: true,
-        model: { type: SectionType.TEXT, text: 'admin.sidebar.section.find' } as TextSectionTypeModel,
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.find'
+        } as TextSectionTypeModel,
         icon: 'search'
       },
       {
@@ -203,21 +296,33 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         parentID: 'find',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.find_items', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.find_items',
+          link: '/search'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'find_withdrawn_items',
         parentID: 'find',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.find_withdrawn_items', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.find_withdrawn_items',
+          link: '#'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'find_private_items',
         parentID: 'find',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.find_private_items', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.find_private_items',
+          link: '/admin/items'
+        } as LinkSectionTypeModel,
       },
 
       /*  Registries */
@@ -225,7 +330,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'registries',
         active: false,
         visible: true,
-        model: { type: SectionType.TEXT, text: 'admin.sidebar.section.registries' } as TextSectionTypeModel,
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.registries'
+        } as TextSectionTypeModel,
         icon: 'list'
       },
       {
@@ -233,14 +341,22 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         parentID: 'registries',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.registries_metadata', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.registries_metadata',
+          link: '/registries/metadata'
+        } as LinkSectionTypeModel,
       },
       {
         id: 'registries_format',
         parentID: 'registries',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.registries_format', link: '#' } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.registries_format',
+          link: '/registries/format'
+        } as LinkSectionTypeModel,
       },
 
       /* Curation tasks */
@@ -248,16 +364,24 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'curation_tasks',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.curation_task', link: '#'  } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.curation_task',
+          link: '/curation'
+        } as LinkSectionTypeModel,
         icon: 'filter'
       },
 
       /* Statistics */
       {
-        id: 'statistics',
+        id: 'statistics_task',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.statistics', link: '#'  } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.statistics_task',
+          link: '#'
+        } as LinkSectionTypeModel,
         icon: 'chart-bar'
       },
 
@@ -266,7 +390,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         id: 'control_panel',
         active: false,
         visible: true,
-        model: { type: SectionType.LINK, text: 'admin.sidebar.section.control_panel', link: '#'  } as LinkSectionTypeModel,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.control_panel',
+          link: '#'
+        } as LinkSectionTypeModel,
         icon: 'cogs'
       },
     ];
@@ -297,4 +425,5 @@ 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 175a6f7be6..044293c823 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
@@ -10,15 +10,17 @@
     <div class="sidebar-collapsible">
         <a class="nav-item nav-link" href="#"
            (click)="toggleSection($event)">
-            <span class="section-header-text">{{count | async}}<ng-container
-                    *ngComponentOutlet="getMenuItemComponent(); injector: getItemModelInjector();"></ng-container></span>
+            <span class="section-header-text">
+                <ng-container
+                        *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>
         </a>
         <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(active | async)">
-            <li class="nav-item nav-link" *ngFor="let subSection of (subSections | async)">
+            <li *ngFor="let subSection of (subSections | async)">
                 <ng-container
-                        *ngComponentOutlet="getMenuItemComponent(subSection.model); injector: getItemModelInjector(subSection.model);"></ng-container>
+                        *ngComponentOutlet="itemComponents.get(subSection.id); injector: itemInjectors.get(subSection.id);"></ng-container>
             </li>
         </ul>
     </div>
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 a7168ce386..6b086524d7 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,7 +9,6 @@ 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 { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 
 @Component({
   selector: 'ds-expandable-admin-sidebar-section',
@@ -22,22 +21,18 @@ import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionComponent implements OnInit {
   subSections: Observable<MenuSection[]>;
   menuID = MenuID.ADMIN;
-  link = '#';
   sidebarActiveBg;
   sidebarCollapsed: Observable<boolean>;
-  c = 0;
-  count = new BehaviorSubject<number>(0);
 
   constructor(@Inject('sectionDataProvider') menuSection, protected menuService: MenuService,
-              private variableService: CSSVariableService, protected injector: Injector,) {
+              private variableService: CSSVariableService, protected injector: Injector) {
     super(menuSection, menuService, injector);
+
   }
 
   ngOnInit(): void {
     super.ngOnInit();
     this.subSections = this.menuService.getSubSectionsByParentID(this.menuID, this.section.id);
-    // this.active.subscribe((t) => console.log('section: ', this.section.id, this.c, t));
-    // this.active.subscribe((t) => this.count.next(++this.c));
     this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg');
     this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
   }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bc0a512358..8c4126f8ed 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,11 +31,11 @@ import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-s
 import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
 import { NotificationComponent } from './shared/notifications/notification/notification.component';
 import { SharedModule } from './shared/shared.module';
-import { NavbarComponent } from './navbar/navbar.component';
 import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component';
 import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component';
 import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
 import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
+import { NavbarModule } from './navbar/navbar.module';
 
 export function getConfig() {
   return ENV_CONFIG;
@@ -53,6 +53,7 @@ export function getMetaReducers(config: GlobalConfig): Array<MetaReducer<AppStat
 const IMPORTS = [
   CommonModule,
   SharedModule,
+  NavbarModule,
   HttpClientModule,
   AppRoutingModule,
   CoreModule.forRoot(),
@@ -93,7 +94,6 @@ const PROVIDERS = [
 const DECLARATIONS = [
   AppComponent,
   HeaderComponent,
-  NavbarComponent,
   HeaderNavbarWrapperComponent,
   AdminSidebarComponent,
   AdminSidebarSectionComponent,
@@ -122,7 +122,6 @@ const EXPORTS = [
     ...EXPORTS
   ],
   entryComponents: [
-    AdminSidebarComponent,
     AdminSidebarSectionComponent,
     ExpandableAdminSidebarSectionComponent
   ]
diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts
index 3c7c2747d1..4d046fc6e8 100644
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -15,7 +15,6 @@ import {
   NotificationsState
 } from './shared/notifications/notifications.reducers';
 import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
-import { navbarReducer, NavbarState } from './navbar/navbar.reducer';
 import { hasValue } from './shared/empty.util';
 import { cssVariablesReducer, CSSVariablesState } from './shared/sass-helper/sass-helper.reducer';
 import { menusReducer, MenusState } from './shared/menu/menu.reducer';
@@ -23,7 +22,6 @@ import { menusReducer, MenusState } from './shared/menu/menu.reducer';
 export interface AppState {
   router: fromRouter.RouterReducerState;
   hostWindow: HostWindowState;
-  navbar: NavbarState;
   forms: FormState;
   notifications: NotificationsState;
   searchSidebar: SearchSidebarState;
@@ -36,7 +34,6 @@ export interface AppState {
 export const appReducers: ActionReducerMap<AppState> = {
   router: fromRouter.routerReducer,
   hostWindow: hostWindowReducer,
-  navbar: navbarReducer,
   forms: formReducer,
   notifications: notificationsReducer,
   searchSidebar: sidebarReducer,
diff --git a/src/app/core/index/index.reducer.spec.ts b/src/app/core/index/index.reducer.spec.ts
index a1cf92aeb3..4c30f118f1 100644
--- a/src/app/core/index/index.reducer.spec.ts
+++ b/src/app/core/index/index.reducer.spec.ts
@@ -20,6 +20,8 @@ describe('requestReducer', () => {
   const testState: IndexState = {
     [IndexName.OBJECT]: {
       [key1]: val1
+    },
+    [IndexName.REQUEST]: {
     }
   };
   deepFreeze(testState);
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index 1eab1d9ffd..931ab36749 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,4 +1,4 @@
 <div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
     <ds-header></ds-header>
-    <ds-navbar [isNavBarCollapsed]="isNavBarCollapsed"></ds-navbar>
+    <ds-navbar></ds-navbar>
 </div>
\ No newline at end of file
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index d041f41654..f93005218d 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -1,13 +1,12 @@
 import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
-import { createSelector, select, Store } from '@ngrx/store';
+import { Store } from '@ngrx/store';
 import { AppState } from '../app.reducer';
-import { NavbarState } from '../navbar/navbar.reducer';
 import { hasValue } from '../shared/empty.util';
 import { Observable } from 'rxjs/internal/Observable';
 import { Subscription } from 'rxjs/internal/Subscription';
+import { MenuService } from '../shared/menu/menu.service';
+import { MenuID } from '../shared/menu/initial-menus-state';
 
-const navbarStateSelector = (state: AppState) => state.navbar;
-const navCollapsedSelector = createSelector(navbarStateSelector, (navbar: NavbarState) => navbar.navCollapsed);
 @Component({
   selector: 'ds-header-navbar-wrapper',
   styleUrls: ['header-navbar-wrapper.component.scss'],
@@ -17,14 +16,16 @@ export class HeaderNavbarWrapperComponent implements OnInit, OnDestroy {
   @HostBinding('class.open') isOpen = false;
   private sub: Subscription;
   public isNavBarCollapsed: Observable<boolean>;
+  menuID = MenuID.PUBLIC;
 
   constructor(
-    private store: Store<AppState>
+    private store: Store<AppState>,
+    private menuService: MenuService
   ) {
   }
 
   ngOnInit(): void {
-    this.isNavBarCollapsed = this.store.pipe(select(navCollapsedSelector));
+    this.isNavBarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.sub = this.isNavBarCollapsed.subscribe((isCollapsed) => this.isOpen = !isCollapsed)
   }
 
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 7d84cf821e..6cd200a09c 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -9,7 +9,7 @@
             <a href="#" class="px-1"><i class="fas fa-globe-asia fa-lg fa-fw"></i></a>
             <ds-auth-nav-menu></ds-auth-nav-menu>
             <div class="pl-2">
-                <button class="navbar-toggler" type="button" (click)="toggle()"
+                <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
                         aria-controls="collapsingNav"
                         aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 52eefbe510..336acc35df 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,8 +1,7 @@
 import { Component } from '@angular/core';
-import { NavbarToggleAction } from '../navbar/navbar.actions';
-import { Store } from '@ngrx/store';
-import { AppState } from '../app.reducer';
 import { Observable } from 'rxjs/internal/Observable';
+import { MenuService } from '../shared/menu/menu.service';
+import { MenuID } from '../shared/menu/initial-menus-state';
 
 @Component({
   selector: 'ds-header',
@@ -16,13 +15,14 @@ export class HeaderComponent {
    */
   public isAuthenticated: Observable<boolean>;
   public showAuth = false;
+  menuID = MenuID.PUBLIC;
 
   constructor(
-    private store: Store<AppState>,
+    private menuService: MenuService
   ) {
   }
 
-  public toggle(): void {
-    this.store.dispatch(new NavbarToggleAction());
+  public toggleNavbar(): void {
+    this.menuService.toggleMenu(this.menuID);
   }
 }
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
new file mode 100644
index 0000000000..be09c687f3
--- /dev/null
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -0,0 +1,17 @@
+<li class="nav-item dropdown"
+    (mouseenter)="activateSection($event)"
+    (mouseleave)="deactivateSection($event)">
+    <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"
+       id="browseDropdown" (click)="toggleSection($event)"
+       data-toggle="dropdown">
+        <ng-container
+                *ngComponentOutlet="itemComponents.get(section.id); injector: itemInjectors.get(section.id);"></ng-container>
+    </a>
+    <ul @slide *ngIf="(active | async)"
+        class="m-0 shadow-none border-top-0 dropdown-menu show">
+        <ng-container *ngFor="let subSection of (subSections | async)">
+            <ng-container
+                    *ngComponentOutlet="itemComponents.get(subSection.id); injector: itemInjectors.get(subSection.id);"></ng-container>
+        </ng-container>
+    </ul>
+</li>
\ No newline at end of file
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
new file mode 100644
index 0000000000..1fb78bef0d
--- /dev/null
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -0,0 +1,27 @@
+@import '../../../styles/variables.scss';
+
+.dropdown-menu {
+    overflow: hidden;
+    min-width: 100%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    ::ng-deep a.nav-link {
+        padding-right: $spacer;
+        padding-left: $spacer;
+        white-space: nowrap;
+    }
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+    .dropdown-toggle {
+        &:after {
+            float: right;
+            margin-top: $spacer/2;
+        }
+    }
+    .dropdown-menu {
+        border: 0;
+
+    }
+}
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
new file mode 100644
index 0000000000..dd055785ab
--- /dev/null
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpandableNavbarSectionComponent } from './expandable-navbar-section.component';
+
+describe('ExpandableNavbarSectionComponent', () => {
+  let component: ExpandableNavbarSectionComponent;
+  let fixture: ComponentFixture<ExpandableNavbarSectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExpandableNavbarSectionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExpandableNavbarSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
new file mode 100644
index 0000000000..2d0091399c
--- /dev/null
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -0,0 +1,66 @@
+import { Component, Inject, Injector, OnInit } from '@angular/core';
+import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
+import { MenuService } from '../../shared/menu/menu.service';
+import { MenuID } from '../../shared/menu/initial-menus-state';
+import { rendersSectionForMenu } from '../../shared/menu/menu.decorator';
+import { Observable } from 'rxjs/internal/Observable';
+import { MenuSection } from '../../shared/menu/menu.reducer';
+import { slide } from '../../shared/animations/slide';
+import { first } from 'rxjs/operators';
+import { HostWindowService } from '../../shared/host-window.service';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component';
+
+@Component({
+  selector: 'ds-expandable-navbar-section',
+  templateUrl: './expandable-navbar-section.component.html',
+  styleUrls: ['./expandable-navbar-section.component.scss'],
+  animations: [slide]
+})
+@rendersSectionForMenu(MenuID.PUBLIC, true)
+export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements OnInit {
+  menuID = MenuID.PUBLIC;
+
+  constructor(@Inject('sectionDataProvider') menuSection,
+              protected menuService: MenuService,
+              protected injector: Injector,
+              private windowService: HostWindowService
+  ) {
+    super(menuSection, menuService, injector);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  activateSection(event): void {
+    this.windowService.isXsOrSm().pipe(
+      first()
+    ).subscribe((isMobile) => {
+      if (!isMobile) {
+        super.activateSection(event);
+      }
+    });
+  }
+
+  deactivateSection(event): void {
+    this.windowService.isXsOrSm().pipe(
+      first()
+    ).subscribe((isMobile) => {
+      if (!isMobile) {
+        super.deactivateSection(event);
+      }
+    });
+  }
+
+  toggleSection(event): void {
+    event.preventDefault();
+    this.windowService.isXsOrSm().pipe(
+      first()
+    ).subscribe((isMobile) => {
+      if (isMobile) {
+        super.toggleSection(event);
+      }
+    });
+  }
+}
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
new file mode 100644
index 0000000000..b257a7bd57
--- /dev/null
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -0,0 +1,4 @@
+<li class="nav-item">
+  <ng-container
+          *ngComponentOutlet="itemComponents.get(section.id); injector: itemInjectors.get(section.id);"></ng-container>
+</li>
\ No newline at end of file
diff --git a/src/app/navbar/navbar-section/navbar-section.component.scss b/src/app/navbar/navbar-section/navbar-section.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/navbar/navbar-section/navbar-section.component.spec.ts b/src/app/navbar/navbar-section/navbar-section.component.spec.ts
new file mode 100644
index 0000000000..f6845145b3
--- /dev/null
+++ b/src/app/navbar/navbar-section/navbar-section.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarSectionComponent } from './navbar-section.component';
+
+describe('NavbarSectionComponent', () => {
+  let component: NavbarSectionComponent;
+  let fixture: ComponentFixture<NavbarSectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarSectionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/navbar/navbar-section/navbar-section.component.ts b/src/app/navbar/navbar-section/navbar-section.component.ts
new file mode 100644
index 0000000000..60f270745b
--- /dev/null
+++ b/src/app/navbar/navbar-section/navbar-section.component.ts
@@ -0,0 +1,27 @@
+import { Component, Inject, Injector, OnInit } from '@angular/core';
+import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component';
+import { MenuService } from '../../shared/menu/menu.service';
+import { MenuID } from '../../shared/menu/initial-menus-state';
+import { rendersSectionForMenu } from '../../shared/menu/menu.decorator';
+import { HostWindowService } from '../../shared/host-window.service';
+
+@Component({
+  selector: 'ds-navbar-section',
+  templateUrl: './navbar-section.component.html',
+  styleUrls: ['./navbar-section.component.scss']
+})
+@rendersSectionForMenu(MenuID.PUBLIC, false)
+export class NavbarSectionComponent extends MenuSectionComponent implements OnInit {
+  menuID = MenuID.PUBLIC;
+
+  constructor(@Inject('sectionDataProvider') menuSection,
+              protected menuService: MenuService,
+              protected injector: Injector
+  ) {
+    super(menuSection, menuService, injector);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+}
diff --git a/src/app/navbar/navbar.actions.ts b/src/app/navbar/navbar.actions.ts
deleted file mode 100644
index c588c41f0c..0000000000
--- a/src/app/navbar/navbar.actions.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Action } from '@ngrx/store';
-
-import { type } from '../shared/ngrx/type';
-
-/**
- * For each action type in an action group, make a simple
- * enum object for all of this group's action types.
- *
- * The 'type' utility function coerces strings into string
- * literal types and runs a simple check to guarantee all
- * action types in the application are unique.
- */
-export const NavbarActionTypes = {
-  COLLAPSE: type('dspace/navbar/COLLAPSE'),
-  EXPAND: type('dspace/navbar/EXPAND'),
-  TOGGLE: type('dspace/navbar/TOGGLE')
-};
-
-/* tslint:disable:max-classes-per-file */
-export class NavbarCollapseAction implements Action {
-  type = NavbarActionTypes.COLLAPSE;
-}
-
-export class NavbarExpandAction implements Action {
-  type = NavbarActionTypes.EXPAND;
-}
-
-export class NavbarToggleAction implements Action {
-  type = NavbarActionTypes.TOGGLE;
-}
-/* tslint:enable:max-classes-per-file */
-
-/**
- * Export a type alias of all actions in this action group
- * so that reducers can easily compose action types
- */
-export type NavbarAction
-  = NavbarCollapseAction
-  | NavbarExpandAction
-  | NavbarToggleAction
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index f80f74724c..eb6164b26f 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,46 +1,17 @@
-<nav [ngClass]="{'open': !(isNavBarCollapsed | async)}"
-     [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((isNavBarCollapsed | async) ? 'collapsed' : 'expanded')"
+<nav [ngClass]="{'open': !(menuCollapsed | async)}"
+     [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
      class="navbar navbar-light navbar-expand-md p-md-0 navbar-container">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
     <div class="container">
         <div class="reset-padding-md w-100">
             <div id="collapsingNav">
                 <ul class="navbar-nav mr-auto shadow-none">
-                    <li ngbDropdown class="nav-item" #dropdown1="ngbDropdown"
-                        (mouseenter)="openDropdownOnHover(dropdown1)"
-                        (mouseleave)="closeDropdownOnHover(dropdown1)">
-                        <a href="#" ngbDropdownToggle class="nav-link" routerLinkActive="active"
-                           id="browseDropdown" (click)="$event.preventDefault();"
-                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{
-                            'nav.browse.header' | translate }}</a>
-                        <div ngbDropdownMenu aria-labelledby="browseDropdown"
-                             class="m-0 shadow-none border-top-0 browse-dropdown-menu">
-                            <a class="dropdown-item" href="/communitylist">Communities &
-                                Collections</a>
-                            <a class="dropdown-item" href="/browse?type=dateissued">By Issue
-                                Date</a>
-                            <a class="dropdown-item" href="/browse?type=author">By Author</a>
-                        </div>
-                    </li>
-                    <li ngbDropdown class="nav-item" #dropdown2="ngbDropdown"
-                        (mouseenter)="openDropdownOnHover(dropdown2)"
-                        (mouseleave)="closeDropdownOnHover(dropdown2)">
-                        <a href="#" ngbDropdownToggle class="nav-link" routerLinkActive="active"
-                           id="scopeBrowseDropdown" (click)="$event.preventDefault();"
-                           data-toggle="dropdown" aria-haspopup="true"
-                           aria-expanded="false">{{ 'nav.community-browse.header' | translate }}</a>
-                        <div ngbDropdownMenu aria-labelledby="scopeBrowseDropdown"
-                             class="rounded-bottom m-0 shadow-none border-top-0">
-                            <a class="dropdown-item" href="/browse?type=dateissued">By Issue
-                                Date</a>
-                            <a class="dropdown-item" href="/browse?type=author">By Author</a>
-                        </div>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" routerLink="/statistics" routerLinkActive="active">{{
-                            'nav.statistics.header' | translate }}</a>
-                    </li>
+                    <ng-container *ngFor="let section of (sections | async)">
+                        <ng-container
+                                *ngComponentOutlet="sectionComponents.get(section.id); injector: sectionInjectors.get(section.id);"></ng-container>
+                    </ng-container>
                 </ul>
             </div>
         </div>
     </div>
 </nav>
+
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 97caea624b..d3c682d004 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -5,12 +5,6 @@ nav.navbar {
     align-items: baseline;
 }
 
-.dropdown-menu {
-    min-width: 100%;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-
 /** Mobile menu styling **/
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     .navbar {
@@ -23,15 +17,6 @@ nav.navbar {
         &.open {
             height: 100vh; //doesn't matter because wrapper is sticky
         }
-        .dropdown-toggle {
-            &:after {
-                float: right;
-                margin-top: $spacer/2;
-            }
-        }
-        .dropdown-menu {
-            border: 0;
-        }
     }
 }
 
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
index 18a36b5a92..fac2b3cfe4 100644
--- a/src/app/navbar/navbar.component.spec.ts
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -15,12 +15,13 @@ import { Router } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import * as ngrx from '@ngrx/store';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { NavbarState } from './navbar.reducer';
-import { NavbarToggleAction } from './navbar.actions';
+import { ToggleMenuAction } from '../shared/menu/menu.actions';
+import { MenuID } from '../shared/menu/initial-menus-state';
+import { MenusState } from '../shared/menu/menu.reducer';
 
 let comp: NavbarComponent;
 let fixture: ComponentFixture<NavbarComponent>;
-let store: Store<NavbarState>;
+let store: Store<MenusState>;
 
 describe('NavbarComponent', () => {
 
@@ -49,7 +50,7 @@ describe('NavbarComponent', () => {
 
     comp = fixture.componentInstance;
 
-    store = fixture.debugElement.injector.get(Store) as Store<NavbarState>;
+    store = fixture.debugElement.injector.get(Store) as Store<MenusState>;
     spyOn(store, 'dispatch');
   });
 
@@ -61,7 +62,7 @@ describe('NavbarComponent', () => {
     });
 
     it('should dispatch a NavbarToggleAction', () => {
-      expect(store.dispatch).toHaveBeenCalledWith(new NavbarToggleAction());
+      expect(store.dispatch).toHaveBeenCalledWith(new ToggleMenuAction(MenuID.PUBLIC));
     });
 
   });
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index f25298ee64..0b6b4fef5c 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '../app.reducer';
+import { Component, Injector, OnInit } from '@angular/core';
 import { slideMobileNav } from '../shared/animations/slide';
+import { MenuComponent } from '../shared/menu/menu.component';
+import { MenuService } from '../shared/menu/menu.service';
+import { MenuID, SectionType } from '../shared/menu/initial-menus-state';
+import { TextSectionTypeModel } from '../shared/menu/models/section-types/text.model';
+import { LinkSectionTypeModel } from '../shared/menu/models/section-types/link.model';
 import { HostWindowService } from '../shared/host-window.service';
-import { first } from 'rxjs/operators';
-import { Observable } from 'rxjs/internal/Observable';
 
 @Component({
   selector: 'ds-navbar',
@@ -12,32 +13,81 @@ import { Observable } from 'rxjs/internal/Observable';
   templateUrl: 'navbar.component.html',
   animations: [slideMobileNav]
 })
-export class NavbarComponent {
-  @Input() isNavBarCollapsed: Observable<boolean>;
+export class NavbarComponent extends MenuComponent implements OnInit {
+  menuID = MenuID.PUBLIC;
 
-  constructor(
-    private store: Store<AppState>,
-    public windowService: HostWindowService
+  constructor(protected menuService: MenuService,
+              protected injector: Injector,
+              public windowService: HostWindowService
   ) {
+    super(menuService, injector);
   }
 
-  openDropdownOnHover(dropdown: any): void {
-    this.windowService.isXsOrSm().pipe(
-      first()
-    ).subscribe((isMobile) => {
-      if (!isMobile) {
-        dropdown.open();
-      }
-    });
+  ngOnInit(): void {
+    this.createMenu();
+    super.ngOnInit();
   }
 
-  closeDropdownOnHover(dropdown: any): void {
-    this.windowService.isXsOrSm().pipe(
-      first()
-    ).subscribe((isMobile) => {
-      if (!isMobile) {
-        dropdown.close();
-      }
-    });
+  createMenu() {
+    const menuList = [
+      /* News */
+      {
+        id: 'browse_global',
+        active: false,
+        visible: true,
+        model: {
+          type: SectionType.TEXT,
+          text: 'admin.sidebar.section.browse_global'
+        } as TextSectionTypeModel,
+      },
+      {
+        id: 'browse_global_communities_and_collections',
+        parentID: 'browse_global',
+        active: false,
+        visible: true,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.browse_global_communities_and_collections',
+          link: '#'
+        } as LinkSectionTypeModel,
+      },
+      {
+        id: 'browse_global_global_by_issue_date',
+        parentID: 'browse_global',
+        active: false,
+        visible: true,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.browse_global_by_issue_date',
+          link: '#'
+        } as LinkSectionTypeModel,
+      },
+      {
+        id: 'browse_global_by_author',
+        parentID: 'browse_global',
+        active: false,
+        visible: true,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.browse_global_by_author',
+          link: '#'
+        } as LinkSectionTypeModel,
+      },
+
+      /* Statistics */
+      {
+        id: 'statistics',
+        active: false,
+        visible: true,
+        model: {
+          type: SectionType.LINK,
+          text: 'admin.sidebar.section.statistics',
+          link: '#'
+        } as LinkSectionTypeModel,
+      },
+    ];
+    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));
+
   }
+
 }
diff --git a/src/app/navbar/navbar.effects.spec.ts b/src/app/navbar/navbar.effects.spec.ts
index 720e258884..39960d90d5 100644
--- a/src/app/navbar/navbar.effects.spec.ts
+++ b/src/app/navbar/navbar.effects.spec.ts
@@ -1,11 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 import { NavbarEffects } from './navbar.effects';
-import { NavbarCollapseAction } from './navbar.actions';
 import { HostWindowResizeAction } from '../shared/host-window.actions';
 import { Observable } from 'rxjs';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { cold, hot } from 'jasmine-marbles';
 import * as fromRouter from '@ngrx/router-store';
+import { CollapseMenuAction } from '../shared/menu/menu.actions';
+import { MenuID } from '../shared/menu/initial-menus-state';
 
 describe('NavbarEffects', () => {
   let navbarEffects: NavbarEffects;
@@ -28,7 +29,7 @@ describe('NavbarEffects', () => {
     it('should return a COLLAPSE action in response to a RESIZE action', () => {
       actions = hot('--a-', { a: new HostWindowResizeAction(800, 600) });
 
-      const expected = cold('--b-', { b: new NavbarCollapseAction() });
+      const expected = cold('--b-', { b: new CollapseMenuAction(MenuID.PUBLIC) });
 
       expect(navbarEffects.resize$).toBeObservable(expected);
     });
@@ -40,7 +41,7 @@ describe('NavbarEffects', () => {
     it('should return a COLLAPSE action in response to an UPDATE_LOCATION action', () => {
       actions = hot('--a-', { a: { type: fromRouter.ROUTER_NAVIGATION } });
 
-      const expected = cold('--b-', { b: new NavbarCollapseAction() });
+      const expected = cold('--b-', { b: new CollapseMenuAction(MenuID.PUBLIC) });
 
       expect(navbarEffects.routeChange$).toBeObservable(expected);
     });
diff --git a/src/app/navbar/navbar.effects.ts b/src/app/navbar/navbar.effects.ts
index 89320f9cf6..b06518980e 100644
--- a/src/app/navbar/navbar.effects.ts
+++ b/src/app/navbar/navbar.effects.ts
@@ -1,24 +1,25 @@
 import { map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
-import { Effect, Actions, ofType } from '@ngrx/effects'
+import { Actions, Effect, ofType } from '@ngrx/effects'
 import * as fromRouter from '@ngrx/router-store';
 
 import { HostWindowActionTypes } from '../shared/host-window.actions';
-import { NavbarCollapseAction } from './navbar.actions';
+import { CollapseMenuAction } from '../shared/menu/menu.actions';
+import { MenuID } from '../shared/menu/initial-menus-state';
 
 @Injectable()
 export class NavbarEffects {
-
+  menuID = MenuID.PUBLIC;
   @Effect() resize$ = this.actions$
     .pipe(
       ofType(HostWindowActionTypes.RESIZE),
-      map(() => new NavbarCollapseAction())
+      map(() => new CollapseMenuAction(this.menuID))
     );
 
   @Effect() routeChange$ = this.actions$
     .pipe(
       ofType(fromRouter.ROUTER_NAVIGATION),
-      map(() => new NavbarCollapseAction())
+      map(() => new CollapseMenuAction(this.menuID))
     );
 
   constructor(private actions$: Actions) {
diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts
new file mode 100644
index 0000000000..adb8b2d8ea
--- /dev/null
+++ b/src/app/navbar/navbar.module.ts
@@ -0,0 +1,45 @@
+import { SharedModule } from '../shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+import { CoreModule } from '../core/core.module';
+import { NavbarEffects } from './navbar.effects';
+import { NavbarSectionComponent } from './navbar-section/navbar-section.component';
+import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/expandable-navbar-section.component';
+import { NavbarComponent } from './navbar.component';
+
+const effects = [
+  NavbarEffects
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    EffectsModule.forFeature(effects),
+    CoreModule.forRoot()
+  ],
+  declarations: [
+    NavbarComponent,
+    NavbarSectionComponent,
+    ExpandableNavbarSectionComponent
+  ],
+  providers: [
+
+  ],
+  entryComponents: [
+    NavbarSectionComponent,
+    ExpandableNavbarSectionComponent
+  ],
+  exports: [
+    NavbarComponent,
+    NavbarSectionComponent,
+    ExpandableNavbarSectionComponent
+  ]
+})
+
+/**
+ * This module handles all components and pipes that are necessary for the search page
+ */
+export class NavbarModule {
+}
diff --git a/src/app/navbar/navbar.reducer.spec.ts b/src/app/navbar/navbar.reducer.spec.ts
deleted file mode 100644
index b9afbd743e..0000000000
--- a/src/app/navbar/navbar.reducer.spec.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as deepFreeze from 'deep-freeze';
-
-import { navbarReducer } from './navbar.reducer';
-import { NavbarCollapseAction, NavbarExpandAction, NavbarToggleAction } from './navbar.actions';
-
-class NullAction extends NavbarCollapseAction {
-  type = null;
-
-  constructor() {
-    super();
-  }
-}
-
-describe('navbarReducer', () => {
-  it('should return the current state when no valid actions have been made', () => {
-    const state = { navCollapsed: false };
-    const action = new NullAction();
-    const newState = navbarReducer(state, action);
-
-    expect(newState).toEqual(state);
-  });
-
-  it('should start with navCollapsed = true', () => {
-    const action = new NullAction();
-    const initialState = navbarReducer(undefined, action);
-
-    // The navigation starts collapsed
-    expect(initialState.navCollapsed).toEqual(true);
-  });
-
-  it('should set navCollapsed to true in response to the COLLAPSE action', () => {
-    const state = { navCollapsed: false };
-    const action = new NavbarCollapseAction();
-    const newState = navbarReducer(state, action);
-
-    expect(newState.navCollapsed).toEqual(true);
-  });
-
-  it('should perform the COLLAPSE action without affecting the previous state', () => {
-    const state = { navCollapsed: false };
-    deepFreeze(state);
-
-    const action = new NavbarCollapseAction();
-    navbarReducer(state, action);
-
-    // no expect required, deepFreeze will ensure an exception is thrown if the state
-    // is mutated, and any uncaught exception will cause the test to fail
-  });
-
-  it('should set navCollapsed to false in response to the EXPAND action', () => {
-    const state = { navCollapsed: true };
-    const action = new NavbarExpandAction();
-    const newState = navbarReducer(state, action);
-
-    expect(newState.navCollapsed).toEqual(false);
-  });
-
-  it('should perform the EXPAND action without affecting the previous state', () => {
-    const state = { navCollapsed: true };
-    deepFreeze(state);
-
-    const action = new NavbarExpandAction();
-    navbarReducer(state, action);
-  });
-
-  it('should flip the value of navCollapsed in response to the TOGGLE action', () => {
-    const state1 = { navCollapsed: true };
-    const action = new NavbarToggleAction();
-
-    const state2 = navbarReducer(state1, action);
-    const state3 = navbarReducer(state2, action);
-
-    expect(state2.navCollapsed).toEqual(false);
-    expect(state3.navCollapsed).toEqual(true);
-  });
-
-  it('should perform the TOGGLE action without affecting the previous state', () => {
-    const state = { navCollapsed: true };
-    deepFreeze(state);
-
-    const action = new NavbarToggleAction();
-    navbarReducer(state, action);
-  });
-
-});
diff --git a/src/app/navbar/navbar.reducer.ts b/src/app/navbar/navbar.reducer.ts
deleted file mode 100644
index c3edc80115..0000000000
--- a/src/app/navbar/navbar.reducer.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { NavbarAction, NavbarActionTypes } from './navbar.actions';
-
-export interface NavbarState {
-  navCollapsed: boolean;
-}
-
-const initialState: NavbarState = {
-  navCollapsed: true
-};
-
-export function navbarReducer(state = initialState, action: NavbarAction): NavbarState {
-  switch (action.type) {
-
-    case NavbarActionTypes.COLLAPSE: {
-      return Object.assign({}, state, {
-        navCollapsed: true
-      });
-    }
-
-    case NavbarActionTypes.EXPAND: {
-      return Object.assign({}, state, {
-        navCollapsed: false
-      });
-
-    }
-
-    case NavbarActionTypes.TOGGLE: {
-      return Object.assign({}, state, {
-        navCollapsed: !state.navCollapsed
-      });
-
-    }
-
-    default: {
-      return state;
-    }
-  }
-}
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index c20d077b7a..1d07bd1dc5 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -1,7 +1,8 @@
 import {
   animate,
   animateChild,
-  group, query, sequence,
+  group,
+  query,
   state,
   style,
   transition,
@@ -11,8 +12,15 @@ import {
 export const slide = trigger('slide', [
   state('void', style({ height: 0 })),
   state('*', style({ height: '*' })),
-  transition(':enter', [animate('2000ms')]),
-  transition(':leave', [animate('2000ms')])
+  transition(':enter', [animate('200ms')]),
+  transition(':leave', [animate('200ms')])
+]);
+
+export const slideHorizontal = trigger('slideHorizontal', [
+  state('void', style({ width: 0 })),
+  state('*', style({ width: '*' })),
+  transition(':enter', [animate('200ms')]),
+  transition(':leave', [animate('200ms')])
 ]);
 
 export const slideMobileNav = trigger('slideMobileNav', [
diff --git a/src/app/shared/menu/menu-section/menu-section.component.ts b/src/app/shared/menu/menu-section/menu-section.component.ts
index 119ae218d5..0c794ab9ce 100644
--- a/src/app/shared/menu/menu-section/menu-section.component.ts
+++ b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -6,6 +6,8 @@ import { MenuID, SectionType } from '../initial-menus-state';
 import { hasNoValue, hasValue } from '../../empty.util';
 import { Observable } from 'rxjs/internal/Observable';
 import { SectionTypeModel } from '../models/section-types/section-type.model';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
 
 @Component({
   selector: 'ds-menu-section',
@@ -14,12 +16,16 @@ import { SectionTypeModel } from '../models/section-types/section-type.model';
 export class MenuSectionComponent {
   active: Observable<boolean>;
   menuID: MenuID;
+  itemInjectors: Map<string, Injector> = new Map<string, Injector>();
+  itemComponents: Map<string, GenericConstructor<MenuSectionComponent>> = new Map<string, GenericConstructor<MenuSectionComponent>>();
+  subSections: Observable<MenuSection[]>;
 
-  constructor(protected section: MenuSection, protected menuService: MenuService, protected injector: Injector) {
+  constructor(public section: MenuSection, protected menuService: MenuService, protected injector: Injector) {
   }
 
   ngOnInit(): void {
-    this.active = this.menuService.isSectionActive(this.menuID, this.section.id);
+    this.active = this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged());
+    this.initializeInjectorData();
   }
 
   toggleSection(event: Event) {
@@ -27,6 +33,28 @@ export class MenuSectionComponent {
     this.menuService.toggleActiveSection(this.menuID, this.section.id);
   }
 
+  activateSection(event: Event) {
+    event.preventDefault();
+    this.menuService.activateSection(this.menuID, this.section.id);
+  }
+
+  deactivateSection(event: Event) {
+    event.preventDefault();
+    this.menuService.deactivateSection(this.menuID, this.section.id);
+  }
+
+  initializeInjectorData() {
+    this.itemInjectors.set(this.section.id, this.getItemModelInjector(this.section.model));
+    this.itemComponents.set(this.section.id, this.getMenuItemComponent(this.section.model));
+    this.subSections = this.menuService.getSubSectionsByParentID(this.menuID, this.section.id);
+    this.subSections.subscribe((sections: MenuSection[]) => {
+      sections.forEach((section: MenuSection) => {
+        this.itemInjectors.set(section.id, this.getItemModelInjector(section.model));
+        this.itemComponents.set(section.id, this.getMenuItemComponent(section.model));
+      })
+    })
+  }
+
   getMenuItemComponent(itemModel?: SectionTypeModel) {
     if (hasNoValue(itemModel)) {
       itemModel = this.section.model;
diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts
index 6285f84ed0..34c7f205b3 100644
--- a/src/app/shared/menu/menu.component.ts
+++ b/src/app/shared/menu/menu.component.ts
@@ -1,9 +1,9 @@
-import { Component, Injector, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/initial-menus-state';
 import { MenuSection } from '../../shared/menu/menu.reducer';
-import { map, tap } from 'rxjs/operators';
+import { first, map } from 'rxjs/operators';
 import { getComponentForMenu } from './menu.decorator';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
@@ -15,14 +15,25 @@ import { MenuSectionComponent } from './menu-section/menu-section.component';
 export class MenuComponent implements OnInit {
   menuID: MenuID;
   menuCollapsed: Observable<boolean>;
+  menuVisible: Observable<boolean>;
   sections: Observable<MenuSection[]>;
+  sectionInjectors: Map<string, Injector> = new Map<string, Injector>();
+  sectionComponents: Map<string, GenericConstructor<MenuSectionComponent>> = new Map<string, GenericConstructor<MenuSectionComponent>>();
+  changeDetection: ChangeDetectionStrategy.OnPush;
 
   constructor(protected menuService: MenuService, protected injector: Injector) {
   }
 
   ngOnInit(): void {
     this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
-    this.sections = this.menuService.getMenuTopSections(this.menuID);
+    this.menuVisible = this.menuService.isMenuVisible(this.menuID);
+    this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(first());
+    this.sections.subscribe((sections: MenuSection[]) => {
+      sections.forEach((section: MenuSection) => {
+        this.sectionInjectors.set(section.id, this.getSectionDataInjector(section));
+        this.getSectionComponent(section).pipe(first()).subscribe((constr) => this.sectionComponents.set(section.id, constr));
+      })
+    })
   }
 
   toggle(event: Event) {
diff --git a/src/app/shared/menu/menu.module.ts b/src/app/shared/menu/menu.module.ts
new file mode 100644
index 0000000000..9768fb946d
--- /dev/null
+++ b/src/app/shared/menu/menu.module.ts
@@ -0,0 +1,54 @@
+import { MenuSectionComponent } from './menu-section/menu-section.component';
+import { MenuComponent } from './menu.component';
+import { LinkTypeMenuItemComponent } from './type-components/link-type.component';
+import { TextTypeMenuItemComponent } from './type-components/text-type.component';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
+
+const COMPONENTS = [
+  MenuSectionComponent,
+  MenuComponent,
+  LinkTypeMenuItemComponent,
+  TextTypeMenuItemComponent
+];
+
+const ENTRY_COMPONENTS = [
+  LinkTypeMenuItemComponent,
+  TextTypeMenuItemComponent
+];
+
+const MODULES = [
+  TranslateModule,
+  RouterModule
+];
+const PROVIDERS = [
+
+];
+
+@NgModule({
+  imports: [
+    ...MODULES
+  ],
+  declarations: [
+    ...COMPONENTS,
+    ...ENTRY_COMPONENTS,
+  ],
+  providers: [
+    ...PROVIDERS
+  ],
+  exports: [
+    ...COMPONENTS,
+    ...MODULES
+  ],
+  entryComponents: [
+    ...ENTRY_COMPONENTS
+  ]
+})
+
+/**
+ * This module handles all components and pipes that need to be shared among multiple other modules
+ */
+export class MenuModule {
+
+}
diff --git a/src/app/shared/menu/menu.reducer.ts b/src/app/shared/menu/menu.reducer.ts
index 0e75256d61..f5cf909cf3 100644
--- a/src/app/shared/menu/menu.reducer.ts
+++ b/src/app/shared/menu/menu.reducer.ts
@@ -94,22 +94,31 @@ export function menusReducer(state: MenusState = initialMenusState, action: Menu
 }
 
 function addSection(state: MenusState, action: AddMenuSectionAction) {
-  const newState = addToIndex(state, action.section, action.menuID);
-  return putSectionState(newState, action, action.section);
+  // let newState = addToIndex(state, action.section, action.menuID);
+  const newState = putSectionState(state, action, action.section);
+  return reorderSections(newState, action)
 }
 
-function addToIndex(state: MenusState, section: MenuSection, menuID: MenuID) {
-  const sectionID = section.id;
-  const parentID = section.parentID;
-  if (hasValue(parentID)) {
-    const menuState: MenuState = state[menuID];
-    const index = menuState.sectionToSubsectionIndex;
-    const parentIndex = hasValue(index[parentID]) ? index[parentID] : [];
-    const newIndex = Object.assign({}, index, { [parentID]: [...parentIndex, sectionID] });
-    const newMenuState = Object.assign({}, menuState, { sectionToSubsectionIndex: newIndex });
-    return Object.assign({}, state, { [menuID]: newMenuState });
-  }
-  return state;
+function reorderSections(state: MenusState, action: MenuSectionAction) {
+  const menuState: MenuState = state[action.menuID];
+  const newSectionState: MenuSections = {};
+  const newSectionIndexState: MenuSectionIndex = {};
+  Object.values(menuState.sections).sort((sectionA: MenuSection, sectionB: MenuSection) => {
+    const indexA = sectionA.index || 0;
+    const indexB = sectionB.index || 0;
+    return indexA - indexB;
+  }).forEach((section: MenuSection) => {
+    newSectionState[section.id] = section;
+    if (hasValue(section.parentID)) {
+      const parentIndex = hasValue(newSectionIndexState[section.parentID]) ? newSectionIndexState[section.parentID] : [];
+      newSectionIndexState[section.parentID] = [...parentIndex, section.id];
+    }
+  });
+  const newMenuState = Object.assign({}, menuState, {
+    sections: newSectionState,
+    sectionToSubsectionIndex: newSectionIndexState
+  });
+  return Object.assign({}, state, { [action.menuID]: newMenuState });
 }
 
 function removeSection(state: MenusState, action: RemoveMenuSectionAction) {
@@ -167,11 +176,11 @@ function toggleActiveSection(state: MenusState, action: ToggleActiveMenuSectionA
 
 function putSectionState(state: MenusState, action: MenuAction, section: MenuSection): MenusState {
   const menuState: MenuState = state[action.menuID];
-  const newTopSections = Object.assign({}, menuState.sections, {
+  const newSections = Object.assign({}, menuState.sections, {
     [section.id]: section
   });
   const newMenuState = Object.assign({}, menuState, {
-    sections: newTopSections
+    sections: newSections
   });
   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 644374e058..8b586ee980 100644
--- a/src/app/shared/menu/menu.service.ts
+++ b/src/app/shared/menu/menu.service.ts
@@ -4,10 +4,11 @@ import { MenuSection, MenuSectionIndex, MenuSections, MenusState, MenuState } fr
 import { AppState, keySelector } from '../../app.reducer';
 import { MenuID } from './initial-menus-state';
 import { Observable } from 'rxjs/internal/Observable';
-import { distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import {
-  AddMenuSectionAction,
-  RemoveMenuSectionAction,
+  ActivateMenuSectionAction,
+  AddMenuSectionAction, DeactivateMenuSectionAction, HideMenuAction,
+  RemoveMenuSectionAction, ShowMenuAction,
   ToggleActiveMenuSectionAction,
   ToggleMenuAction,
 } from './menu.actions';
@@ -42,23 +43,28 @@ export class MenuService {
     return this.store.pipe(select(menuByIDSelector(id)));
   }
 
-  getMenuTopSections(menuID: MenuID): Observable<MenuSection[]> {
+  getMenuTopSections(menuID: MenuID, mustBeVisible = true): Observable<MenuSection[]> {
     return this.store.pipe(
       select(menuByIDSelector(menuID)),
       select(menuSectionStateSelector),
       map((sections: MenuSections) => {
-          return Object.values(sections).filter((section: MenuSection) => hasNoValue(section.parentID))
+          return Object.values(sections)
+            .filter((section: MenuSection) => hasNoValue(section.parentID))
+            .filter((section: MenuSection) => !mustBeVisible || section.visible)
         }
       )
     );
   }
 
-  getSubSectionsByParentID(menuID: MenuID, parentID: string): Observable<MenuSection[]> {
+  getSubSectionsByParentID(menuID: MenuID, parentID: string, mustBeVisible = true): Observable<MenuSection[]> {
     return this.store.pipe(
       select(menuByIDSelector(menuID)),
       select(getSubSectionsFromSectionSelector(parentID)),
       map((ids: string[]) => isNotEmpty(ids) ? ids : []),
-      switchMap((ids: string[]) => observableCombineLatest(ids.map((id: string) => this.getMenuSection(menuID, id)))),
+      switchMap((ids: string[]) =>
+        observableCombineLatest(ids.map((id: string) => this.getMenuSection(menuID, id)))
+      ),
+      map((sections: MenuSection[]) => sections.filter((section: MenuSection) => !mustBeVisible || section.visible))
     );
   }
 
@@ -91,20 +97,38 @@ export class MenuService {
     );
   }
 
+  isMenuVisible(menuID: MenuID): Observable<boolean> {
+    return this.getMenu(menuID).pipe(
+      map((state: MenuState) => state.visible)
+    );
+  }
+
   toggleMenu(menuID: MenuID): void {
     this.store.dispatch(new ToggleMenuAction(menuID));
   }
 
+  showMenu(menuID: MenuID): void {
+    this.store.dispatch(new ShowMenuAction(menuID));
+  }
+
+  hideMenu(menuID: MenuID): void {
+    this.store.dispatch(new HideMenuAction(menuID));
+  }
+
   toggleActiveSection(menuID: MenuID, id: string): void {
     this.store.dispatch(new ToggleActiveMenuSectionAction(menuID, id));
   }
 
+  activateSection(menuID: MenuID, id: string): void {
+    this.store.dispatch(new ActivateMenuSectionAction(menuID, id));
+  }
+
+  deactivateSection(menuID: MenuID, id: string): void {
+    this.store.dispatch(new DeactivateMenuSectionAction(menuID, id));
+  }
+
   isSectionActive(menuID: MenuID, id: string): Observable<boolean> {
-    return this.getMenuSection(menuID, id).pipe(tap((section) => console.log(section.id)), map((section) => section.active),
-      distinctUntilChanged((a, b) => {
-        console.log('DISTINCT', a, b);
-        return a === b
-      }));
+    return this.getMenuSection(menuID, id).pipe(map((section) => section.active));
   }
 
   isSectionVisible(menuID: MenuID, id: string): Observable<boolean> {
diff --git a/src/app/shared/menu/type-components/link-type.component.html b/src/app/shared/menu/type-components/link-type.component.html
index 1c6c88cca9..adfb4fffbf 100644
--- a/src/app/shared/menu/type-components/link-type.component.html
+++ b/src/app/shared/menu/type-components/link-type.component.html
@@ -1 +1 @@
-<a class="nav-item nav-link" [href]="item.link">{{item.text | translate}}</a>
\ No newline at end of file
+<a class="nav-item nav-link" [routerLink]="item.link">{{item.text | translate}}</a>
\ No newline at end of file
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ce6e630f0d..b7d42e4856 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -85,10 +85,7 @@ import { InputSuggestionsComponent } from './input-suggestions/input-suggestions
 import { CapitalizePipe } from './utils/capitalize.pipe';
 import { ObjectKeysPipe } from './utils/object-keys-pipe';
 import { MomentModule } from 'ngx-moment';
-import { MenuSectionComponent } from './menu/menu-section/menu-section.component';
-import { MenuComponent } from './menu/menu.component';
-import { LinkTypeMenuItemComponent } from './menu/type-components/link-type.component';
-import { TextTypeMenuItemComponent } from './menu/type-components/text-type.component';
+import { MenuModule } from './menu/menu.module';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -109,7 +106,8 @@ const MODULES = [
   TranslateModule,
   NouisliderModule,
   MomentModule,
-  TextMaskModule
+  TextMaskModule,
+  MenuModule
 ];
 
 const PIPES = [
@@ -163,10 +161,6 @@ const COMPONENTS = [
   TruncatablePartComponent,
   BrowseByComponent,
   InputSuggestionsComponent,
-  MenuSectionComponent,
-  MenuComponent,
-  LinkTypeMenuItemComponent,
-  TextTypeMenuItemComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -179,9 +173,7 @@ const ENTRY_COMPONENTS = [
   CollectionGridElementComponent,
   CommunityGridElementComponent,
   SearchResultGridElementComponent,
-  BrowseEntryListElementComponent,
-  LinkTypeMenuItemComponent,
-  TextTypeMenuItemComponent
+  BrowseEntryListElementComponent
 ];
 
 const PROVIDERS = [