feat(admin-ui): New app layout with updated nav menu

Relates to #1645

packages/admin-ui/src/lib/core/src/common/detail-breadcrumb.ts

@@ -2,7 +2,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 
-import { BreadcrumbValue } from '../components/breadcrumb/breadcrumb.component';
+import { BreadcrumbValue } from '../providers/breadcrumb/breadcrumb.service';
 
 /**
  * Creates an observable of breadcrumb links for use in the route config of a detail route.

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html

@@ -1,22 +1,44 @@
-<clr-main-container>
-    <clr-header>
-        <div class="branding">
-            <a [routerLink]="['/']"><img src="assets/logo-75px.png" class="logo" /><span class="wordmark" *ngIf="!hideVendureBranding">vendure</span></a>
+<div class="app-container">
+    <div class="left-nav">
+        <div class="branding py-2">
+            <a [routerLink]="['/']"
+                ><img src="assets/logo-75px.png" class="logo" /><span
+                    class="wordmark md:hidden"
+                    *ngIf="!hideVendureBranding"
+                    >vendure</span
+                ></a
+            >
         </div>
-        <div class="header-nav"></div>
-        <div class="header-actions">
+        <div class="mx-2">
             <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>
-            <vdr-user-menu [userName]="userName$ | async"
-                           [uiLanguageAndLocale]="uiLanguageAndLocale$ | async"
-                           [availableLanguages]="availableLanguages"
-                           (selectUiLanguage)="selectUiLanguage()"
-                           (logOut)="logOut()"></vdr-user-menu>
         </div>
-    </clr-header>
-    <nav class="subnav"><vdr-breadcrumb></vdr-breadcrumb></nav>
+        <div class="px-2 main-nav-container">
+            <vdr-main-nav></vdr-main-nav>
+        </div>
+        <div class="m-2">
+            <vdr-settings-nav></vdr-settings-nav>
+        </div>
+        <div class="mx-2"></div>
+    </div>
 
-    <div class="content-container">
-        <div class="content-area"><router-outlet></router-outlet></div>
-        <vdr-main-nav></vdr-main-nav>
+    <div class="surface">
+        <div class="content-container">
+            <div class="top-bar">
+                <div></div>
+                <div class="universal-search flex-spacer"></div>
+                <div>
+                    <vdr-user-menu
+                        [userName]="userName$ | async"
+                        [uiLanguageAndLocale]="uiLanguageAndLocale$ | async"
+                        [availableLanguages]="availableLanguages"
+                        (selectUiLanguage)="selectUiLanguage()"
+                        (logOut)="logOut()"
+                    ></vdr-user-menu>
+                </div>
+            </div>
+            <vdr-breadcrumb></vdr-breadcrumb>
+            <vdr-page-title [value]="(pageTitle$ | async) || '' | translate"></vdr-page-title>
+            <div class="content-area"><router-outlet></router-outlet></div>
+        </div>
     </div>
-</clr-main-container>
+</div>

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -1,31 +1,115 @@
-@import "variables";
+@import 'variables';
+
+.app-container {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.left-nav {
+    background-color: var(--color-left-nav-bg);
+    color: var(--color-left-nav-text);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-shadow: -3px 1px 10px 0px rgb(0 0 0 / 18%);
+    z-index: 1;
+}
+
+.top-bar {
+    height: 48px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--color-top-bar-bg);
+    border-bottom: 1px solid var(--color-component-border-200);
+}
+
+.main-nav-container {
+    overflow: auto;
+    flex: 1;
+    /* ===== Scrollbar CSS ===== */
+    /* Firefox */
+    scrollbar-width: auto;
+    scrollbar-color: var(--color-primary-700) #052731;
+
+    /* Chrome, Edge, and Safari */
+    &::-webkit-scrollbar {
+        width: 16px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: #052731;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-primary-700);
+        border-radius: var(--border-radius);
+        &:hover {
+            background-color: #0f5070;
+        }
+    }
+}
+
+.surface {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background-color: var(--color-component-bg-100);
+}
+
+.content-container {
+    overflow: auto;
+}
 
 .branding {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     min-width: 0;
 }
+
 .logo {
     width: 40px;
 }
+
 .wordmark {
     font-weight: bold;
     margin-left: 12px;
     font-size: 24px;
     color: var(--color-primary-500);
+    @media screen and (max-width: $breakpoint-medium) {
+        display: none;
+    }
 }
 vdr-breadcrumb {
-    @media screen and (min-width: $breakpoint-small){
-        margin-left: $clr-sidenav-width;
-    }
+    width: 100%;
+    max-width: var(--layout-content-max-width);
+    background-color: var(--color-component-bg-100);
+    padding: var(--space-unit) 0;
+    z-index: 5;
+    margin: 0 auto;
+    position: sticky;
+    top: 0;
 }
+
 .header-actions {
     align-items: center;
 }
+
 .content-area {
     position: relative;
+    max-width: var(--layout-content-max-width);
+    margin: 0 auto;
+    padding: 0 var(--space-unit);
 }
 
 ::ng-deep {
     .header {
-        background-image: linear-gradient(to right, var(--color-header-gradient-from), var(--color-header-gradient-to));
+        background-image: linear-gradient(
+            to right,
+            var(--color-header-gradient-from),
+            var(--color-header-gradient-to)
+        );
     }
 }

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.ts

@@ -7,6 +7,7 @@ import { getAppConfig } from '../../app.config';
 import { LanguageCode } from '../../common/generated-types';
 import { DataService } from '../../data/providers/data.service';
 import { AuthService } from '../../providers/auth/auth.service';
+import { BreadcrumbService } from '../../providers/breadcrumb/breadcrumb.service';
 import { I18nService } from '../../providers/i18n/i18n.service';
 import { LocalStorageService } from '../../providers/local-storage/local-storage.service';
 import { ModalService } from '../../providers/modal/modal.service';
@@ -22,6 +23,7 @@ export class AppShellComponent implements OnInit {
     uiLanguageAndLocale$: Observable<[LanguageCode, string | undefined]>;
     availableLanguages: LanguageCode[] = [];
     hideVendureBranding = getAppConfig().hideVendureBranding;
+    pageTitle$: Observable<string>;
 
     constructor(
         private authService: AuthService,
@@ -30,6 +32,7 @@ export class AppShellComponent implements OnInit {
         private i18nService: I18nService,
         private modalService: ModalService,
         private localStorageService: LocalStorageService,
+        private breadcrumbService: BreadcrumbService,
     ) {}
 
     ngOnInit() {
@@ -40,6 +43,9 @@ export class AppShellComponent implements OnInit {
             .uiState()
             .stream$.pipe(map(({ uiState }) => [uiState.language, uiState.locale ?? undefined]));
         this.availableLanguages = this.i18nService.availableLanguages;
+        this.pageTitle$ = this.breadcrumbService.breadcrumbs$.pipe(
+            map(breadcrumbs => breadcrumbs[breadcrumbs.length - 1].label),
+        );
     }
 
     selectUiLanguage() {