[ACA-1237] Sidenav - navigation menu UX (#256)

src/app/components/sidenav/sidenav.component.html

@@ -1,14 +1,20 @@
 <div class="sidenav">
     <div class="sidenav__section sidenav__section--new" [ngClass]="{ 'section--new--mini': !showLabel }">
         <button *ngIf="showLabel"
-            class="sidenav__section--new__button" mat-button [matMenuTriggerFor]="menu">
+            [matMenuTriggerFor]="menu"
+            class="sidenav__section--new__button"
+            [disableRipple]="true"
+            mat-raised-button
+            color="accent">
+
             <span>{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
             <mat-icon>arrow_drop_down</mat-icon>
         </button>
 
-        <button
+        <button [matMenuTriggerFor]="menu"
-            class="new__button--mini"
+            *ngIf="!showLabel"
-            *ngIf="!showLabel" mat-icon-button [matMenuTriggerFor]="menu">
+            color="accent"
+            mat-icon-button>
             <mat-icon>add_box</mat-icon>
         </button>
 
@@ -55,19 +61,32 @@
         </mat-menu>
     </div>
 
-    <div class="sidenav__section" *ngFor="let list of navigation">
+    <div class="sidenav__section sidenav__section--menu" *ngFor="let list of navigation">
         <ul class="sidenav-menu">
-            <li class="sidenav-menu__item" *ngFor="let item of list">
+            <li *ngFor="let item of list" class="sidenav-menu__item"
-                <a
+                routerLinkActive
-                    class="sidenav-link"
+                #rla="routerLinkActive"
-                    [ngClass]="{ 'sidenav-menu__item-link--noicon' : !item.icon }"
+                title="{{ item.title || '' | translate }}">
-                    routerLinkActive="sidenav-link--active"
+
-                    [routerLink]="item.disabled? null : item.route.url"
+                <button [routerLink]="item.route.url"
-                    [ngClass]="{ 'disabled': item.disabled }"
+                    [color]="rla.isActive ? 'accent': 'primary'"
-                    title="{{ item.title || '' | translate }}">
+                    mat-icon-button
-                    <mat-icon class="sidenav-link__icon">{{ item.icon }}</mat-icon>
+                    mat-ripple
-                    <span class="sidenav-link__label" *ngIf="showLabel">{{ item.label | translate }}</span>
+                    [matRippleColor]="primary"
-                </a>
+                    [matRippleTrigger]="rippleTrigger"
+                    [matRippleCentered]="true">
+
+                    <mat-icon>{{ item.icon }}</mat-icon>
+                </button>
+
+                <span #rippleTrigger
+                    class="menu__item--label"
+                    [routerLink]="item.route.url"
+                    [hidden]="!showLabel"
+                    [ngClass]="{
+                        'menu__item--active': rla.isActive,
+                        'menu__item--default': !rla.isActive
+                    }">{{ item.label | translate }}</span>
             </li>
         </ul>
     </div>

src/app/components/sidenav/sidenav.component.scss

@@ -1,106 +1,62 @@
-@import 'variables';
+.sidenav {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
 
-$sidenav-section--h-padding: 24px;
+    &__section:last-child {
-$sidenav-section--v-padding: 8px;
+        border-bottom: 0;
+    }
 
-$sidenav-menu-item--h-padding: 24px;
+    .section--new--mini  {
-$sidenav-menu-item--v-padding: 12px;
-
-$sidenav-menu-item--icon-size: 24px;
-
-:host {
-    .sidenav {
         display: flex;
-        flex: 1;
+        justify-content: center;
-        flex-direction: column;
+        align-items: center;
-        background: #fafafa;
+    }
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
-        height: 100%;
 
-        &__section:last-child {
+    &__section {
-            border-bottom: 0;
+        padding: 8px 14px;
+        position: relative;
+
+        &--new {
+            padding: 16px 24px;
+            height: 40px;
         }
 
-        .section--new--mini  {
+        &--new__button {
-            display: flex;
+            width: 100%;
-            justify-content: center;
-            align-items: center;
         }
 
-        &__section {
+        &--new__button.mat-raised-button {
-            padding:
+            box-shadow: none !important;
-                $sidenav-section--v-padding
-                $sidenav-section--h-padding;
-
-            border-bottom: 1px solid $alfresco-divider-color;
-            position: relative;
-
-            &--new {
-                padding-top: 2 * $sidenav-section--v-padding;
-                padding-bottom: 2 * $sidenav-section--v-padding;
-                height: 40px;
-            }
-
-            &--new__button {
-                width: 100%;
-                color: $alfresco-white;
-                background-color: $alfresco-primary-accent--default;
-            }
-
-            .new__button--mini {
-                color: $alfresco-primary-accent--default;
-            }
-        }
-
-        &-menu {
-            display: inline-flex;
-            flex-direction: column;
-            padding: 0;
-            margin: 0;
-            list-style-type: none;
-
-            &__item {
-                height: 24px;
-                padding: 12px 0;
-            }
-        }
-
-        &-link {
-            flex-direction: row;
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            color: $alfresco-secondary-text-color;
-            text-decoration: none;
-            height: 24px;
-
-            &--active {
-                color: $alfresco-primary-accent--default;
-            }
-
-            &:not(&--active):hover {
-                color: $alfresco-primary-text-color;
-            }
-
-            &.disabled {
-                cursor: default !important;
-                color: $alfresco-secondary-text-color !important;
-                opacity: .25;
-            }
-
-            &--noicon {
-                padding-left: 26px;
-            }
-        }
-
-        &-link__icon {
-            width: 24px;
-        }
-
-        &-link__label {
-            opacity: 1;
-            width: 240px;
-            margin-left: 20px;
         }
     }
+
+    &-menu {
+        display: inline-flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+    }
+
+    &-menu__item {
+        padding: 12px 0;
+        flex-direction: row;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        text-decoration: none;
+        height: 24px;
+    }
+
+    .menu__item--label {
+        cursor: pointer;
+        width: 240px;
+        padding-left: 10px;
+    }
+
+    .menu__item--label:focus {
+        outline: none;
+    }
 }

src/app/components/sidenav/sidenav.component.theme.scss

@@ -0,0 +1,32 @@
+@mixin sidenav-component-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $border: 1px solid mat-color($foreground, divider, .07);
+
+    .sidenav {
+        @include angular-material-theme($theme);
+
+        background-color: mat-color($background, background);
+        border-right: $border;
+
+        &__section {
+            border-bottom: $border;
+        }
+
+        .menu__item--label:not(.menu__item--active):hover {
+            color: mat-color($foreground, text);
+        }
+
+        .menu__item--active {
+            color: mat-color($accent);
+        }
+
+        .menu__item--default {
+            color: mat-color($primary, .87);
+        }
+
+    }
+  }

src/app/ui/custom-theme.scss

@@ -0,0 +1,48 @@
+@import "~@angular/material/theming";
+@import '~@alfresco/adf-content-services/theming';
+
+@import '../components/sidenav/sidenav.component.theme';
+
+$grey-scale: (
+    50 : #e0e0e0,
+    100 : #b3b3b3,
+    200 : #808080,
+    300 : #4d4d4d,
+    400 : #262626,
+    500 : #000000,
+    600 : #000000,
+    700 : #000000,
+    800 : #000000,
+    900 : #000000,
+    A100 : #a6a6a6,
+    A200 : #8c8c8c,
+    A400 : #737373,
+    A700 : #666666,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
+
+@include mat-core();
+
+$custom-theme-primary: mat-palette($grey-scale, A400);
+$custom-theme-accent: mat-palette($alfresco-accent-orange);
+$custom-theme-warn: mat-palette($alfresco-warn);
+$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
+
+@mixin custom-theme($theme) {
+    @include sidenav-component-theme($custom-theme);
+}

src/app/ui/overrides/_toolbar.scss

@@ -1,6 +1,10 @@
 @import 'variables.scss';
 
 .adf-toolbar {
+    .mat-toolbar-single-row {
+        padding: 0 14px;
+    }
+
     // TODO: review and remove once ADF 2.0.0 is out
     &.inline {
         .mat-toolbar {

src/app/ui/theme.scss

@@ -3,6 +3,8 @@
 @import '~@alfresco/adf-content-services/theming';
 @import '~@alfresco/adf-core/theming';
 
+@import 'custom-theme';
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-accent-orange);
@@ -14,3 +16,5 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include adf-content-services-theme($theme);
 @include adf-core-theme($theme);
+
+@include custom-theme($custom-theme);