chore(admin-ui): Tweak styles

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

@@ -1,6 +1,6 @@
 <div class="app-container">
     <div class="left-nav">
-        <div class="branding py-2">
+        <div class="branding py-2 px-2">
             <a [routerLink]="['/']"
                 ><img src="assets/logo-75px.png" class="logo" /><span
                     class="wordmark md:hidden"
@@ -12,7 +12,7 @@
         <div class="mx-2">
             <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>
         </div>
-        <div class="px-2 main-nav-container">
+        <div class="px-2 mt-4 main-nav-container">
             <vdr-main-nav></vdr-main-nav>
         </div>
         <div class="m-2">
@@ -24,7 +24,9 @@
     <div class="surface">
         <div class="content-container">
             <div class="top-bar">
-                <div></div>
+                <div>
+                    <vdr-breadcrumb></vdr-breadcrumb>
+                </div>
                 <div class="universal-search flex-spacer"></div>
                 <div>
                     <vdr-user-menu
@@ -36,7 +38,6 @@
                     ></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>

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

@@ -13,17 +13,24 @@
     flex-direction: column;
     height: 100%;
     border-right: 1px solid var(--color-component-border-200);
-    box-shadow: -3px 1px 10px 0px rgb(0 0 0 / 18%);
+    //box-shadow: -3px 1px 10px 0px rgb(0 0 0 / 18%);
     z-index: 1;
+    @media screen and (min-width: $breakpoint-medium) {
+        width: 260px;
+    }
 }
 
 .top-bar {
+    position: sticky;
+    top: 0;
     height: 48px;
     width: 100%;
     display: flex;
+    z-index: 20;
     justify-content: space-between;
-    background-color: var(--color-top-bar-bg);
-    border-bottom: 1px solid var(--color-component-border-200);
+    background-color: var(--color-left-nav-bg);
+    //background-color: var(--color-top-bar-bg);
+    //border-bottom: 1px solid var(--color-component-border-200);
 }
 
 .main-nav-container {
@@ -67,7 +74,6 @@
 .branding {
     display: flex;
     align-items: center;
-    justify-content: center;
     min-width: 0;
 }
 
@@ -118,9 +124,9 @@ vdr-breadcrumb {
 ::ng-deep {
     .header {
         background-image: linear-gradient(
-                to right,
-                var(--color-header-gradient-from),
-                var(--color-header-gradient-to)
+            to right,
+            var(--color-header-gradient-from),
+            var(--color-header-gradient-to)
         );
     }
 }

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.html

@@ -31,7 +31,7 @@
                                             [type]="itemBadge.type"
                                         ></vdr-status-badge>
                                     </ng-container>
-                                    <clr-icon [attr.shape]="item.icon || 'block'" size="20" [title]="item.label | translate"></clr-icon>
+                                    <clr-icon [attr.shape]="item.icon || 'block'" size="18" [title]="item.label | translate"></clr-icon>
                                     <span class="md:hidden">{{ item.label | translate }}</span>
                                 </a>
                             </div>

packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss

@@ -17,11 +17,12 @@ nav.main-nav {
     .nav-group-header {
         margin: 0;
         line-height: 1.2;
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-xs);
         padding-left: calc(var(--space-unit) * 1);
         //font-weight: bold;
         color: var(--color-left-nav-text);
         opacity: 0.7;
+        text-transform: uppercase;
     }
     .nav-link {
         display: flex;
@@ -38,8 +39,7 @@ nav.main-nav {
         }
 
         &.active {
-            background-color: var(--color-primary-600);
-            color: var(--color-text-inverse);
+            color: var(--color-primary-600);
         }
         @media screen and (max-width: $breakpoint-medium) {
             justify-content: center;

packages/admin-ui/src/lib/core/src/providers/breadcrumb/breadcrumb.service.ts

@@ -1,14 +1,8 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Data, NavigationEnd, Params, PRIMARY_OUTLET, Router } from '@angular/router';
 import { flatten } from 'lodash';
-import {
-    combineLatest as observableCombineLatest,
-    Observable,
-    of as observableOf,
-    share,
-    Subject,
-} from 'rxjs';
-import { filter, map, startWith, switchMap, takeUntil } from 'rxjs/operators';
+import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subject } from 'rxjs';
+import { filter, map, shareReplay, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { DataService } from '../../data/providers/data.service';
 
 export type BreadcrumbString = string;
@@ -39,7 +33,7 @@ export class BreadcrumbService implements OnDestroy {
             takeUntil(this.destroy$),
             startWith(true),
             switchMap(() => this.generateBreadcrumbs(this.route.root)),
-            share(),
+            shareReplay(1),
         );
     }