Layout changes for workspace sidemenu

2025-10-01 14:41:14 +00:00 · 2023-02-07 20:37:03 +00:00
parent 04907df376
commit a3655e3e47
23 changed files with 432 additions and 259 deletions
--- a/projects/aca-content/assets/app.extensions.json
+++ b/projects/aca-content/assets/app.extensions.json
@@ -242,32 +242,24 @@
        "id": "app.navbar.primary",
        "items": [
          {
-            "id": "app.navbar.personalFiles",
+            "id": "app.navbar.menu",
            "order": 100,
            "icon": "folder",
-            "title": "APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL",
-            "description": "APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP",
-            "route": "personal-files",
-            "rules": {
-              "visible": "app.isContentServiceEnabled"
-            }
-          },
-          {
-            "id": "app.navbar.libraries.menu",
-            "order": 200,
-            "icon": "library_books",
-            "title": "APP.BROWSE.LIBRARIES.SIDENAV_LINK.LABEL",
-            "description": "APP.BROWSE.LIBRARIES.SIDENAV_LINK.TOOLTIP",
+            "title": "APP.BROWSE.FILE.SIDENAV_LINK.LABEL",
+            "description": "APP.BROWSE.FILE.SIDENAV_LINK.TOOLTIP",
            "rules": {
              "visible": "app.isContentServiceEnabled"
            },
            "children": [
              {
-                "id": "app.navbar.libraries.favorite",
+                "id": "app.navbar.personalFiles",
                "order": 100,
-                "title": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.LABEL",
-                "description": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.TOOLTIP",
-                "route": "favorite/libraries"
+                "title": "APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL",
+                "description": "APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP",
+                "route": "personal-files",
+                "rules": {
+                  "visible": "app.isContentServiceEnabled"
+                }
              },
              {
                "id": "app.navbar.libraries.files",
@@ -275,53 +267,45 @@
                "title": "APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.SIDENAV_LINK.LABEL",
                "description": "APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.SIDENAV_LINK.TOOLTIP",
                "route": "libraries"
+              },
+              {
+                "id": "app.navbar.libraries.favorite",
+                "order": 300,
+                "title": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.LABEL",
+                "description": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.TOOLTIP",
+                "route": "favorite/libraries"
+              },
+              {
+                "id": "app.navbar.recentFiles",
+                "order": 400,
+                "title": "APP.BROWSE.RECENT.SIDENAV_LINK.LABEL",
+                "description": "APP.BROWSE.RECENT.SIDENAV_LINK.TOOLTIP",
+                "route": "recent-files"
+              },
+              {
+                "id": "app.navbar.favorites",
+                "order": 500,
+                "title": "APP.BROWSE.FAVORITES.SIDENAV_LINK.LABEL",
+                "description": "APP.BROWSE.FAVORITES.SIDENAV_LINK.TOOLTIP",
+                "route": "favorites"
+              },
+              {
+                "id": "app.navbar.shared",
+                "order": 600,
+                "title": "APP.BROWSE.SHARED.SIDENAV_LINK.LABEL",
+                "description": "APP.BROWSE.SHARED.SIDENAV_LINK.TOOLTIP",
+                "route": "shared"
+              },
+              {
+                "id": "app.navbar.trashcan",
+                "order": 700,
+                "title": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.LABEL",
+                "description": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.TOOLTIP",
+                "route": "trashcan"
              }
            ]
          }
        ]
-      },
-      {
-        "id": "app.navbar.secondary",
-        "rules": {
-          "visible": "app.isContentServiceEnabled"
-        },
-        "items": [
-          {
-            "id": "app.navbar.shared",
-            "order": 100,
-            "icon": "people",
-            "title": "APP.BROWSE.SHARED.SIDENAV_LINK.LABEL",
-            "description": "APP.BROWSE.SHARED.SIDENAV_LINK.TOOLTIP",
-            "route": "shared",
-            "rules": {
-              "visible": "repository.isQuickShareEnabled"
-            }
-          },
-          {
-            "id": "app.navbar.recentFiles",
-            "order": 200,
-            "icon": "schedule",
-            "title": "APP.BROWSE.RECENT.SIDENAV_LINK.LABEL",
-            "description": "APP.BROWSE.RECENT.SIDENAV_LINK.TOOLTIP",
-            "route": "recent-files"
-          },
-          {
-            "id": "app.navbar.favorites",
-            "order": 300,
-            "icon": "star",
-            "title": "APP.BROWSE.FAVORITES.SIDENAV_LINK.LABEL",
-            "description": "APP.BROWSE.FAVORITES.SIDENAV_LINK.TOOLTIP",
-            "route": "favorites"
-          },
-          {
-            "id": "app.navbar.trashcan",
-            "order": 400,
-            "icon": "delete",
-            "title": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.LABEL",
-            "description": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.TOOLTIP",
-            "route": "trashcan"
-          }
-        ]
      }
    ],
    "toolbar": [
--- a/projects/aca-content/assets/i18n/en.json
+++ b/projects/aca-content/assets/i18n/en.json
@@ -1,6 +1,7 @@
 {
    "APP": {
      "COPYRIGHT": "© 2017 - 2020 Alfresco Software, Inc. All rights reserved.",
+      "TITLE": "Workspace",
      "ABOUT": {
        "VERSION": "Version:",
        "PLUGINS": {
@@ -103,6 +104,13 @@
            }
        },
        "BROWSE": {
+            "FILE": {
+                "TITLE": "Files",
+                "SIDENAV_LINK": {
+                    "LABEL": "Files",
+                    "TOOLTIP": "Files"
+                }
+            },
            "PERSONAL": {
                "TITLE": "Personal Files",
                "SIDENAV_LINK": {
@@ -409,7 +417,12 @@
                "EXPAND": "Expand",
                "CLOSE_LIBRARY": "Close Library"
            }
-        }
+        },
+        "TOOLTIPS": {
+            "COLLAPSE_NAVIGATION": "Collapse navigation menu",
+            "OPTIONS_SETTINGS": "Options and settings",
+            "MY_PROFILE": "My profile"
+          }
    },
    "NODE_SELECTOR": {
        "COPY_ITEM": "Copy '{{ name }}' to...",
--- a/projects/aca-content/src/lib/aca-content.module.ts
+++ b/projects/aca-content/src/lib/aca-content.module.ts
@@ -121,6 +121,7 @@ import { AppSharedLinkViewModule } from './components/shared-link-view/shared-li
 import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules';
 import { TagsColumnComponent } from './components/dl-custom-components/tags-column/tags-column.component';
 import { UserInfoComponent } from './components/common/user-info/user-info.component';
+import { CustomIconsModule } from './extensions/custom-icons.module';

 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -169,7 +170,8 @@ registerLocaleData(localeSv);
    ViewProfileModule,
    AppTrashcanModule,
    AppSharedLinkViewModule,
-    AcaFolderRulesModule
+    AcaFolderRulesModule,
+    CustomIconsModule
  ],
  declarations: [
    FilesComponent,
--- a/projects/aca-content/src/lib/components/header/header.component.html
+++ b/projects/aca-content/src/lib/components/header/header.component.html
@@ -1,19 +0,0 @@
-<adf-layout-header
-  [logo]="logo$ | async"
-  [redirectUrl]="landingPage"
-  [tooltip]="appName$ | async"
-  [color]="headerColor$ | async"
-  [title]="appName$ | async"
-  (clicked)="onToggleSidenav($event)"
-  [expandedSidenav]="isSidenavExpanded"
->
-  <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
-
-  <aca-search-input *ngIf="isContentServiceEnabled()"></aca-search-input>
-
-  <adf-toolbar-divider></adf-toolbar-divider>
-
-  <ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
-    <aca-toolbar-action [actionRef]="actionRef"> </aca-toolbar-action>
-  </ng-container>
-</adf-layout-header>
--- a/projects/aca-content/src/lib/components/header/header.component.spec.ts
+++ b/projects/aca-content/src/lib/components/header/header.component.spec.ts
@@ -33,7 +33,6 @@ import { AppTestingModule } from '../../testing/app-testing.module';
 import { AppExtensionService, SharedToolbarModule } from '@alfresco/aca-shared';
 import { CoreModule } from '@alfresco/adf-core';
 import { AppSearchInputModule } from '../search/search-input.module';
-import { By } from '@angular/platform-browser';

 describe('AppHeaderComponent', () => {
  let component: AppHeaderComponent;
@@ -94,29 +93,5 @@ describe('AppHeaderComponent', () => {
    tick();
    expect(component.actions).toEqual(actions);
  }));
-
-  describe('Search input', () => {
-    beforeEach(() => {
-      localStorage.clear();
-    });
-
-    afterEach(() => {
-      localStorage.clear();
-    });
-
-    it('should search be present when contentService is enabled', () => {
-      fixture.detectChanges();
-      const searchInput = fixture.debugElement.query(By.css('.aca-search-input'));
-
-      expect(searchInput).not.toBeNull();
-    });
-
-    it('should search not be present when contentService is disabled', () => {
-      localStorage.setItem('contentService', 'false');
-      fixture.detectChanges();
-      const searchInput = fixture.debugElement.query(By.css('.aca-search-input'));
-
-      expect(searchInput).toBeNull();
-    });
-  });
 });
+
--- a/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html
+++ b/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html
@@ -10,7 +10,6 @@
      mat-button
      class="action-button full-width"
    >
-      <adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
      <span class="action-button__label">{{ item.title | translate }}</span>
    </button>
  </div>
@@ -18,28 +17,23 @@

 <ng-container *ngIf="item.children && item.children.length">
  <mat-expansion-panel
-    [expanded]="acaExpansionPanel.hasActiveLinks()"
+  [expanded]="acaExpansionPanel.isItemExpanded()"
    [acaExpansionPanel]="item"
    #acaExpansionPanel="acaExpansionPanel"
    [@.disabled]="true"
  >
-    <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" role="group">
+    <mat-expansion-panel-header expandedHeight="32x" collapsedHeight="32px" role="group">
      <mat-panel-title>
        <div class="item">
-          <button
-            [ngClass]="{
-              'action-button--active': acaExpansionPanel.hasActiveLinks()
-            }"
+          <div
            [attr.aria-label]="item.title | translate"
            [id]="item.id"
            [attr.title]="item.description | translate"
            [attr.data-automation-id]="item.id"
-            mat-button
-            class="action-button full-width"
+            class="action-panel-header"
          >
-            <adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
-            <span class="action-button__label">{{ item.title | translate }}</span>
-          </button>
+            <span class="action-panel-header__label">{{ item.title | translate }}</span>
+          </div>
        </div>
      </mat-panel-title>
    </mat-expansion-panel-header>
--- a/projects/aca-content/src/lib/components/sidenav/directives/expansion-panel.directive.ts
+++ b/projects/aca-content/src/lib/components/sidenav/directives/expansion-panel.directive.ts
@@ -64,6 +64,26 @@ export class ExpansionPanelDirective implements OnInit, OnDestroy {
    return false;
  }

+  isRouteAbout(): boolean {
+    return this.router.url.includes('/about');
+  }
+
+  isRouteProfile(): boolean {
+    return this.router.url.includes('/profile');
+  }
+
+  isRouteSearch(): boolean {
+    return this.router.url.includes('/search');
+  }
+
+  isItemExpanded() {
+    if (this.isRouteAbout() || this.isRouteProfile() || this.isRouteSearch()) {
+      return !this.hasActiveLinks();
+    } else {
+      return this.hasActiveLinks();
+    }
+  }
+
  ngOnInit() {
    this.hasActiveChildren = this.hasActiveLinks();

--- a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html
+++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html
@@ -0,0 +1,35 @@
+<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="matMenu" class="app-menu-button">
+    <mat-icon svgIcon="menu" title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}"></mat-icon>
+</button>
+<mat-menu #menu="matMenu" xPosition="before">
+    <div mat-menu-item class="app-menu-user-details" [routerLink]="['/profile']" title="{{'APP.TOOLTIPS.MY_PROFILE' | translate}}">
+        <button class="app-menu-user-details-button" aria-label="matMenu">
+            <mat-icon svgIcon="avatar"></mat-icon>
+        </button>
+        <div class="app-menu-user-details-name-mail">
+            <div class="app-menu-user-details-name">{{ userName }}</div>
+            <div class="app-menu-user-details-name">{{ userEmail }}</div>
+        </div>
+    </div>
+    <mat-divider></mat-divider>
+    <button mat-menu-item data-automation-id="language-menu-button" [matMenuTriggerFor]="langMenu">
+        <mat-icon>language</mat-icon>
+        <span>{{ 'APP.LANGUAGE' | translate }}</span>
+    </button>
+    <mat-menu #langMenu="matMenu" class="adf-menu">
+        <adf-language-menu></adf-language-menu>
+    </mat-menu>
+    <button mat-menu-item data-automation-id="about" [routerLink]="['/about']">
+        <mat-icon>info</mat-icon>
+        {{ 'APP.BROWSE.ABOUT.TITLE' | translate }}
+    </button>
+    <button mat-menu-item data-automation-id="user-language-menu" [routerLink]="['/settings']">
+        <mat-icon svgIcon="settings"></mat-icon>
+        <span>{{ 'APP.SETTINGS.TITLE' | translate }}</span>
+    </button>
+    <mat-divider></mat-divider>
+    <button mat-menu-item data-automation-id="sign-out" adf-logout>
+        <mat-icon>exit_to_app</mat-icon>
+        {{ 'APP.SIGN_OUT' | translate }}
+    </button>
+</mat-menu>
--- a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss
+++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss
@@ -0,0 +1,32 @@
+app-navigation-menu {
+    .app-menu-button {
+        height: 32px;
+        background: none;
+        line-height: 24px;
+    }
+}
+
+.mat-menu-panel {
+    .app-menu-user-details {
+        display: flex;
+        height: 66px;
+
+        &-button {
+            height: 32px;
+            padding: 0;
+            line-height: 24px;
+            background: none;
+            border: none;
+            margin-top: 14px;
+            transform: scale(1.2);
+        }
+
+        &-name-mail {
+            line-height: 40px;
+        }
+
+        &-name {
+            height: 24px;
+        }
+    }
+}
--- a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts
+++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ContentApiService } from '@alfresco/aca-shared';
+
+@Component({
+  selector: 'app-navigation-menu',
+  templateUrl: './navigation-menu.component.html',
+  styleUrls: ['./navigation-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class NavigationMenuComponent implements OnInit {
+  userName = '';
+  userEmail = '';
+
+  constructor(private contentApi: ContentApiService) {}
+
+  ngOnInit() {
+    this.contentApi.getPerson('-me-').subscribe((person) => {
+      const personDetails = person?.entry;
+      this.userName = personDetails.displayName;
+      this.userEmail = personDetails.email;
+    });
+  }
+}
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html
+++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html
@@ -1,10 +1,21 @@
 <div class="sidenav">
  <ng-container [ngSwitch]="mode">
-    <div class="section action-menu" [ngClass]="'section--' + mode">
-      <app-main-action [expanded]="mode === 'expanded'"></app-main-action>
-      <app-create-menu [expanded]="mode === 'expanded'"></app-create-menu>
+    <div class="sidenav-header">
+      <div class="sidenav-header-title">
+        <div class="sidenav-header-title-logo">
+          <mat-icon svgIcon="workspace"
+            title="{{'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate}}"></mat-icon>
+        </div>
+        <div class="sidenav-header-title-text" [routerLink]="['/']">{{ 'APP.TITLE' | translate }}
+        </div>
+        <div class="sidenav-header-notification">
+          <adf-notification-history></adf-notification-history>
+        </div>
+        <div class="sidenav-header-menu-icon">
+          <app-navigation-menu></app-navigation-menu>
+        </div>
+      </div>
    </div>
-
    <div class="section-sub-actions">
      <div *ngFor="let group of groups; trackBy: trackByGroupId" class="section" [ngClass]="'section--' + mode">
        <ng-container *ngSwitchCase="'expanded'">
@@ -12,9 +23,9 @@
            <ng-container *ngIf="!item.component">
              <app-expand-menu [item]="item"></app-expand-menu>
            </ng-container>
-
            <ng-container *ngIf="item.component">
-              <adf-dynamic-component [data]="{ item: item, state: 'expanded' }" [id]="item.component"></adf-dynamic-component>
+              <adf-dynamic-component [data]="{ item: item, state: 'expanded' }"
+                [id]="item.component"></adf-dynamic-component>
            </ng-container>
          </mat-list-item>
        </ng-container>
@@ -22,11 +33,12 @@
        <ng-container *ngSwitchCase="'collapsed'">
          <div class="list-item" *ngFor="let item of group.items; trackBy: trackByLinkId">
            <ng-container *ngIf="!item.component">
-              <app-button-menu [item]="item"></app-button-menu>
+              <app-expand-menu [item]="item"></app-expand-menu>
            </ng-container>

            <ng-container *ngIf="item.component">
-              <adf-dynamic-component [data]="{ item: item, state: 'collapsed' }" [id]="item.component"> </adf-dynamic-component>
+              <adf-dynamic-component [data]="{ item: item, state: 'collapsed' }" [id]="item.component">
+              </adf-dynamic-component>
            </ng-container>
          </div>
        </ng-container>
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
+++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
@@ -1,150 +1,160 @@
-.app-sidenav {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: hidden;
-}
-
-.aca-menu-panel {
-  .action-button--active {
-    color: var(--theme-accent-color) !important;
-  }
-
-  .action-button {
-    color: var(--theme-primary-color);
-  }
-
-  .action-button:hover {
-    color: var(--theme-accent-color);
-  }
-}
-
 .sidenav {
+  width: 289px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--theme-sidenav-background-color);
  display: flex;
-  flex: 1;
  flex-direction: column;
  height: 100%;
-  background-color: var(--theme-background-color);
+
+  &-header {
+    padding: 32px 0;
+
+    &-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 32px;
+      padding: 0 24px;
+
+      &-logo {
+        position: absolute;
+        transform: scale(0.8);
+        cursor: pointer;
+      }
+
+      &-text {
+        color: var(--theme-selected-text-color);
+        padding-left: 32px;
+        letter-spacing: 0.25px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: var(--theme-body-1-font-size);
+        cursor: pointer;
+      }
+    }
+
+    &-menu-icon {
+      transform: scale(1.2);
+    }
+
+    &-notification {
+      padding-left: 63px;
+    }
+  }

  .section:last-child {
    border-bottom: 0;
  }

-  .action-menu {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-  }
-
-  .section.action-menu {
-    padding: 8px 14px;
-    position: sticky;
-  }
-
  .section-sub-actions {
    overflow-y: auto;
-  }

-  .section {
-    padding: 8px 6px;
-    border-bottom: 1px solid var(--theme-divider-color);
-  }
+    .mat-expansion-panel {
+      width: 100%;
+      background-color: unset;
+      box-shadow: none;
+      border-radius: 0;

-  .section--collapsed {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+      &-header {
+        height: 32px;
+        padding: 0 32px 0 0;
+        display: flex;
+        align-items: center;
+        border: none;
+      }

-  .list-item {
-    padding: 12px 0;
-    display: flex;
-    align-items: center;
-    height: 24px;
-  }
+      &-header:hover {
+        background: var(--theme-hover-background-color);
+      }

-  .menu {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-  }
+      &-header-title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }

-  .full-width {
-    display: flex;
-    width: 100%;
-  }
+      &-body {
+        padding: 0 0 16px;
+        font-size: var(--theme-body-1-font-size);

-  .action-button--active {
-    color: var(--theme-primary-color) !important;
-  }
+        .mat-button {
+          line-height: 32px;
+        }
+      }

-  .action-button {
-    color: var(--theme-text-color);
-  }
+      .mat-expansion-indicator {
+        display: flex;
+        align-content: center;
+      }

-  .action-button .action-button__label {
-    margin: 0 8px !important;
-  }
+      .mat-expansion-indicator::after {
+        transform: rotate(226deg);
+      }
+    }

-  .app-item,
-  .app-item .item {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-  }
+    .item {
+      flex-direction: row;
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      width: 100%;
+      user-select: none;
+    }

-  .item {
-    padding: 12px 0;
-    flex-direction: row;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    height: 24px;
-    width: 100%;
-    user-select: none;
-  }
+    .action-button {
+      color: var(--theme-action-button-text-color);
+      height: 32px;
+      padding: 0 24px;
+      border-radius: 0;
+    }

-  .item:hover .action-button__label {
-    color: var(--theme-primary-color);
-  }
+    .full-width {
+      display: flex;
+      width: 100%;
+    }

-  .mat-expansion-panel-header {
-    padding: 0 8px 0 0 !important;
-    display: flex;
-    align-items: center;
-    font-size: 14px !important;
-  }
+    .action-button--active {
+      color: var(--theme-selected-text-color) !important;
+      background: var(--theme-selected-background-color);
+    }

-  .mat-expansion-panel {
-    width: 100%;
-    background-color: unset;
-    box-shadow: none !important;
-  }
+    .item:hover .action-button__label {
+      color: var(--theme-selected-text-color);
+    }

-  .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
-    background: none !important;
-  }
+    .action-panel-header {
+      color: var(--theme-action-button-text-color);
+      padding: 0 24px;
+    }

-  .mat-expansion-indicator {
-    display: flex;
-    align-content: center;
-  }
-
-  .mat-expansion-panel-body {
-    padding-bottom: 0;
-  }
-
-  .mat-expansion-panel-header-title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+    .action-panel-header__label {
+      font-size: var(--theme-caption-font-size);
+    }
  }
 }

-[dir='rtl'] .sidenav {
-  .mat-expansion-panel-header {
-    padding: 0 0 0 8px !important;
+.adf-sidenav-layout {
+  .mat-sidenav {
+    width: 0 !important;
+  }
+}
+
+@media screen and (max-width: 587px) {
+  .adf-sidenav-layout {
+    .adf-container-full-width {
+      margin-left: 0px !important;
+    }
+  }
+}
+
+@media screen and (min-width: 600px) {
+  .adf-sidenav-layout {
+    .adf-container-full-width {
+      margin-left: 289px !important;
+    }
  }
 }
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts
+++ b/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts
@@ -39,6 +39,7 @@ import { ButtonMenuComponent } from './components/button-menu.component';
 import { ActionDirective } from './directives/action.directive';
 import { MainActionModule } from '../main-action/main-action.module';
 import { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.component';
+import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';

@NgModule({
  imports: [
@@ -58,7 +59,8 @@ import { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.compo
    ExpandMenuComponent,
    ButtonMenuComponent,
    SidenavComponent,
-    SidenavWrapperComponent
+    SidenavWrapperComponent,
+    NavigationMenuComponent
  ],
  exports: [
    MenuPanelDirective,
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
@@ -4,7 +4,6 @@
      <mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
      <h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
    </div>
-    <mat-divider class="app-mat-divider"></mat-divider>
  </div>
  <div class="app-profile-general-row" [formGroup]="profileForm">
    <div class="app-profile-general">
--- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
+++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
@@ -2,23 +2,30 @@ app-view-profile {
  letter-spacing: .5px;

  .app-profile-container {
-    margin-top: 1rem;
    overflow: scroll;
-    height:100%;
+    height: 100%;
    width: 100%;
  }

  .app-profile-row {
    width: 100%;
+    height: 32px;
+    padding: 32px 0;
+    border-bottom: 1px solid var(--theme-header-border-color);
  }

  .app-profile-title {
    display: flex;
-    margin-left: 2rem;
+    flex-direction: row;
+    align-items: center;
+    height: 32px;
+    padding: 0 24px;
  }

  .app-profile {
    cursor: pointer;
+    margin-top: 1rem;
+
  }

  .app-profile-general-row {
@@ -30,7 +37,6 @@ app-view-profile {

  .app-profile-icon {
    margin-right: 1rem;
-    margin-top: 1rem;
    cursor: pointer;
  }

@@ -48,7 +54,7 @@ app-view-profile {
  }

  .app-profile-general-bottom-radius {
-    border-bottom-left-radius:0;
+    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

@@ -66,7 +72,7 @@ app-view-profile {
  }

  .app-general-edit-btn {
-    width:60%;
+    width: 60%;
    text-align: end;
  }

@@ -80,13 +86,12 @@ app-view-profile {
  .app-selected:focus {
    border: 2px solid var(--theme-blue-button-color) !important;
    border-radius: 6px;
-    outline : none !important;
+    outline: none !important;
    box-shadow: 0 0 2px (--theme-blue-button-color);
  }

  .app-profile-row {
    width: 100%;
-    margin: 2rem 0 0 0;
  }

  .app-general-edit {
@@ -166,7 +171,7 @@ app-view-profile {
    height: 25px;
    border: none;
    margin-top: 1.3rem;
-    background-color: var(--theme-dropdown-color) ;
+    background-color: var(--theme-dropdown-color);
  }

  .app-profile-login-dropdown-heading-forgot {
--- a/projects/aca-content/src/lib/extensions/custom-icons.module.ts
+++ b/projects/aca-content/src/lib/extensions/custom-icons.module.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { NgModule } from '@angular/core';
+import { IconService } from '../services/icon.service';
+
+@NgModule({})
+export class CustomIconsModule {
+  constructor(iconService: IconService) {
+    iconService.registerIcons();
+  }
+}
--- a/projects/aca-content/src/lib/services/icon.service.ts
+++ b/projects/aca-content/src/lib/services/icon.service.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Injectable } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IconService {
+  contentIcons: string[] = ['workspace', 'menu', 'avatar', 'settings'];
+  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {}
+  public registerIcons(): void {
+    this.loadIcons(this.contentIcons, './assets/svg/icons');
+  }
+  private loadIcons(iconKeys: string[], iconUrl: string): void {
+    iconKeys.forEach((key) => {
+      this.matIconRegistry.addSvgIcon(key, this.domSanitizer.bypassSecurityTrustResourceUrl(`${iconUrl}/${key}.svg`));
+    });
+  }
+}
--- a/projects/aca-content/src/lib/ui/application.scss
+++ b/projects/aca-content/src/lib/ui/application.scss
@@ -44,6 +44,6 @@ ng-component {
  adf-layout-container,
  aca-search-results,
  ng-component {
-    height: 80vh;
+    height: 100vh;
  }
 }
--- a/projects/aca-content/src/lib/ui/variables/variables.scss
+++ b/projects/aca-content/src/lib/ui/variables/variables.scss
@@ -46,6 +46,11 @@ $datetimepicker-selected-date-background: #2254b2;
 $datetimepicker-cell-background-color: #ffffff;
 $datetimepicker-cell-focus-border-color: #1F74DB;
 $datetimepicker-cell-focus-background-color: rgba(33, 33, 33, 0.12);
+$sidenav-background-color: #f8f8f8;
+$selected-text-color: #212121;
+$selected-background-color: rgba(31, 116, 219, 0.24);
+$action-button-text-color: rgba(33, 35, 40, 0.7);
+$tooltip-background-color: #ffffff;

 $defaults: (
  --theme-primary-color: mat.get-color-from-palette($primary),
@@ -83,6 +88,13 @@ $defaults: (
  --theme-datetimepicker-cell-background: $datetimepicker-cell-background-color,
  --theme-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color,
  --theme-datetimepicker-cell-focus-background: $datetimepicker-cell-focus-background-color
+  --theme-sidenav-background-color: $sidenav-background-color,
+  --theme-selected-text-color: $selected-text-color,
+  --theme-selected-background-color: $selected-background-color,
+  --theme-hover-background-color: $grey-text-background,
+  --theme-action-button-text-color: $action-button-text-color,
+  --theme-header-border-color: $grey-background,
+  --theme-tooltip-background-color: $tooltip-background-color,
 );

 // propagates SCSS variables into the CSS variables scope