Layout changes for workspace sidemenu

app/src/assets/svg/icons/avatar.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="#96DAEA"/>
+<path d="M9.7745 16H7.79723L10.81 7.27273H13.1879L16.1964 16H14.2191L12.033 9.26705H11.9648L9.7745 16ZM9.65092 12.5696H14.3214V14.0099H9.65092V12.5696Z" fill="#212121"/>
+</svg>

app/src/assets/svg/icons/menu.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#212121" fill-opacity="0.12"/>
+<g clip-path="url(#clip0_1418_136226)">
+<path d="M13.1399 21H10.8331L14.348 10.8182H17.1222L20.6321 21H18.3253L15.7749 13.1449H15.6953L13.1399 21ZM12.9957 16.9979H18.4446V18.6783H12.9957V16.9979Z" fill="#212121"/>
+</g>
+<defs>
+<clipPath id="clip0_1418_136226">
+<rect width="11" height="32" fill="white" transform="translate(10.5)"/>
+</clipPath>
+</defs>
+</svg>

app/src/assets/svg/icons/settings.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5023 12C19.5023 12.34 19.4723 12.66 19.4323 12.98L21.5423 14.63C21.7323 14.78 21.7823 15.05 21.6623 15.27L19.6623 18.73C19.5723 18.89 19.4023 18.98 19.2323 18.98C19.1723 18.98 19.1123 18.97 19.0523 18.95L16.5623 17.95C16.0423 18.34 15.4823 18.68 14.8723 18.93L14.4923 21.58C14.4623 21.82 14.2523 22 14.0023 22H10.0023C9.75228 22 9.54228 21.82 9.51228 21.58L9.13228 18.93C8.52228 18.68 7.96228 18.35 7.44228 17.95L4.95228 18.95C4.90228 18.97 4.84228 18.98 4.78228 18.98C4.60228 18.98 4.43228 18.89 4.34228 18.73L2.34228 15.27C2.22228 15.05 2.27228 14.78 2.46228 14.63L4.57228 12.98C4.53228 12.66 4.50228 12.33 4.50228 12C4.50228 11.67 4.53228 11.34 4.57228 11.02L2.46228 9.37C2.27228 9.22 2.21228 8.95 2.34228 8.73L4.34228 5.27C4.43228 5.11 4.60228 5.02 4.77228 5.02C4.83228 5.02 4.89228 5.03 4.95228 5.05L7.44228 6.05C7.96228 5.66 8.52228 5.32 9.13228 5.07L9.51228 2.42C9.54228 2.18 9.75228 2 10.0023 2H14.0023C14.2523 2 14.4623 2.18 14.4923 2.42L14.8723 5.07C15.4823 5.32 16.0423 5.65 16.5623 6.05L19.0523 5.05C19.1023 5.03 19.1623 5.02 19.2223 5.02C19.4023 5.02 19.5723 5.11 19.6623 5.27L21.6623 8.73C21.7823 8.95 21.7323 9.22 21.5423 9.37L19.4323 11.02C19.4723 11.34 19.5023 11.66 19.5023 12ZM17.5023 12C17.5023 11.79 17.4923 11.58 17.4523 11.27L17.3123 10.14L18.2023 9.44L19.2723 8.59L18.5723 7.38L17.3023 7.89L16.2423 8.32L15.3323 7.62C14.9323 7.32 14.5323 7.09 14.1023 6.91L13.0423 6.48L12.8823 5.35L12.6923 4H11.3023L11.1023 5.35L10.9423 6.48L9.88228 6.91C9.47228 7.08 9.06228 7.32 8.63228 7.64L7.73228 8.32L6.69228 7.9L5.42228 7.39L4.72228 8.6L5.80228 9.44L6.69228 10.14L6.55228 11.27C6.52228 11.57 6.50228 11.8 6.50228 12C6.50228 12.2 6.52228 12.43 6.55228 12.74L6.69228 13.87L5.80228 14.57L4.72228 15.41L5.42228 16.62L6.69228 16.11L7.75228 15.68L8.66228 16.38C9.06228 16.68 9.46228 16.91 9.89228 17.09L10.9523 17.52L11.1123 18.65L11.3023 20H12.7023L12.9023 18.65L13.0623 17.52L14.1223 17.09C14.5323 16.92 14.9423 16.68 15.3723 16.36L16.2723 15.68L17.3123 16.1L18.5823 16.61L19.2823 15.4L18.2023 14.56L17.3123 13.86L17.4523 12.73C17.4823 12.43 17.5023 12.21 17.5023 12ZM12.0023 8C9.79228 8 8.00228 9.79 8.00228 12C8.00228 14.21 9.79228 16 12.0023 16C14.2123 16 16.0023 14.21 16.0023 12C16.0023 9.79 14.2123 8 12.0023 8ZM10.0023 12C10.0023 13.1 10.9023 14 12.0023 14C13.1023 14 14.0023 13.1 14.0023 12C14.0023 10.9 13.1023 10 12.0023 10C10.9023 10 10.0023 10.9 10.0023 12Z" fill="#212328" fill-opacity="0.6"/>
+</svg>

app/src/assets/svg/icons/workspace.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18H18V9Z" fill="#2A7DE2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9984 16.6856V9.05664C17.9984 5.06228 15.3963 1.67568 11.7948 0.499512C9.56758 3.98205 9.97569 8.66281 13.0191 11.7062L17.9984 16.6856Z" fill="#0055B9"/>
+</svg>

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",
+            "title": "APP.BROWSE.FILE.SIDENAV_LINK.LABEL",
-            "description": "APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP",
+            "description": "APP.BROWSE.FILE.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",
             "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",
+                "title": "APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL",
-                "description": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.TOOLTIP",
+                "description": "APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP",
-                "route": "favorite/libraries"
+                "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": [

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...",

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,

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>

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();
-    });
-  });
 });
+

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
+          <div
-            [ngClass]="{
-              'action-button--active': acaExpansionPanel.hasActiveLinks()
-            }"
             [attr.aria-label]="item.title | translate"
             [id]="item.id"
             [attr.title]="item.description | translate"
             [attr.data-automation-id]="item.id"
-            mat-button
+            class="action-panel-header"
-            class="action-button full-width"
           >
-            <adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
+            <span class="action-panel-header__label">{{ item.title | translate }}</span>
-            <span class="action-button__label">{{ item.title | translate }}</span>
+          </div>
-          </button>
         </div>
       </mat-panel-title>
     </mat-expansion-panel-header>

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();
 

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>

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;
+        }
+    }
+}

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;
+    });
+  }
+}

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">
+    <div class="sidenav-header">
-      <app-main-action [expanded]="mode === 'expanded'"></app-main-action>
+      <div class="sidenav-header-title">
-      <app-create-menu [expanded]="mode === 'expanded'"></app-create-menu>
+        <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>

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 {
+    .mat-expansion-panel {
-    padding: 8px 6px;
+      width: 100%;
-    border-bottom: 1px solid var(--theme-divider-color);
+      background-color: unset;
-  }
+      box-shadow: none;
+      border-radius: 0;
 
-  .section--collapsed {
+      &-header {
-    display: flex;
+        height: 32px;
-    flex-direction: column;
+        padding: 0 32px 0 0;
-    align-items: center;
+        display: flex;
-  }
+        align-items: center;
+        border: none;
+      }
 
-  .list-item {
+      &-header:hover {
-    padding: 12px 0;
+        background: var(--theme-hover-background-color);
-    display: flex;
+      }
-    align-items: center;
-    height: 24px;
-  }
 
-  .menu {
+      &-header-title {
-    display: flex;
+        display: flex;
-    flex: 1;
+        flex-direction: row;
-    flex-direction: row;
+        align-items: center;
-  }
+      }
 
-  .full-width {
+      &-body {
-    display: flex;
+        padding: 0 0 16px;
-    width: 100%;
+        font-size: var(--theme-body-1-font-size);
-  }
 
-  .action-button--active {
+        .mat-button {
-    color: var(--theme-primary-color) !important;
+          line-height: 32px;
-  }
+        }
+      }
 
-  .action-button {
+      .mat-expansion-indicator {
-    color: var(--theme-text-color);
+        display: flex;
-  }
+        align-content: center;
+      }
 
-  .action-button .action-button__label {
+      .mat-expansion-indicator::after {
-    margin: 0 8px !important;
+        transform: rotate(226deg);
-  }
+      }
+    }
 
-  .app-item,
+    .item {
-  .app-item .item {
+      flex-direction: row;
-    display: flex;
+      display: flex;
-    flex: 1;
+      align-items: center;
-    flex-direction: row;
+      text-decoration: none;
-  }
+      width: 100%;
+      user-select: none;
+    }
 
-  .item {
+    .action-button {
-    padding: 12px 0;
+      color: var(--theme-action-button-text-color);
-    flex-direction: row;
+      height: 32px;
-    display: flex;
+      padding: 0 24px;
-    align-items: center;
+      border-radius: 0;
-    text-decoration: none;
+    }
-    height: 24px;
-    width: 100%;
-    user-select: none;
-  }
 
-  .item:hover .action-button__label {
+    .full-width {
-    color: var(--theme-primary-color);
+      display: flex;
-  }
+      width: 100%;
+    }
 
-  .mat-expansion-panel-header {
+    .action-button--active {
-    padding: 0 8px 0 0 !important;
+      color: var(--theme-selected-text-color) !important;
-    display: flex;
+      background: var(--theme-selected-background-color);
-    align-items: center;
+    }
-    font-size: 14px !important;
-  }
 
-  .mat-expansion-panel {
+    .item:hover .action-button__label {
-    width: 100%;
+      color: var(--theme-selected-text-color);
-    background-color: unset;
+    }
-    box-shadow: none !important;
-  }
 
-  .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
+    .action-panel-header {
-    background: none !important;
+      color: var(--theme-action-button-text-color);
-  }
+      padding: 0 24px;
+    }
 
-  .mat-expansion-indicator {
+    .action-panel-header__label {
-    display: flex;
+      font-size: var(--theme-caption-font-size);
-    align-content: center;
+    }
-  }
-
-  .mat-expansion-panel-body {
-    padding-bottom: 0;
-  }
-
-  .mat-expansion-panel-header-title {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
   }
 }
 
-[dir='rtl'] .sidenav {
+.adf-sidenav-layout {
-  .mat-expansion-panel-header {
+  .mat-sidenav {
-    padding: 0 0 0 8px !important;
+    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;
+    }
   }
 }

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,

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">

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 {

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();
+  }
+}

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`));
+    });
+  }
+}

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;
   }
 }

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