feat: added dbxSidenav

packages/dbx-core/src/lib/storage/storage.module.ts

@@ -16,11 +16,11 @@ export function defaultStorageObjectFactory(): FullStorageObject {
 }
 
 @NgModule()
-export class AppStorageModule {
+export class DbxStorageModule {
 
-  static forRoot(): ModuleWithProviders<AppStorageModule> {
+  static forRoot(): ModuleWithProviders<DbxStorageModule> {
     return {
-      ngModule: AppStorageModule,
+      ngModule: DbxStorageModule,
       providers: [{
         provide: DEFAULT_STORAGE_OBJECT_TOKEN,
         useFactory: defaultStorageObjectFactory

packages/dbx-web/src/lib/router/_router.scss

@@ -1,9 +1,12 @@
-@use './anchor/anchor';
+@use './layout/anchor/anchor';
+@use './layout/sidenav/sidenav';
 
 @mixin all-router-typography($typography-config) {
   @include anchor.typography($typography-config);
+  @include sidenav.typography($typography-config);
 }
 
 @mixin all-router-theme($theme-config) {
   @include anchor.theme($theme-config);
+  @include sidenav.theme($theme-config);
 }

packages/dbx-web/src/lib/router/index.ts

@@ -1,2 +1,2 @@
-export * from './anchor';
+export * from './layout';
 export * from './provider';

packages/dbx-web/src/lib/router/anchor/_anchor.scss → packages/dbx-web/src/lib/router/layout/anchor/_anchor.scss

@@ -1,4 +1,4 @@
-@use '../../style/theming';
+@use '../../../style/theming';
 
 @mixin typography($typography-config) {
 

packages/dbx-web/src/lib/router/anchor/anchor.component.spec.ts → packages/dbx-web/src/lib/router/layout/anchor/anchor.component.spec.ts

@@ -1,4 +1,4 @@
-import { DbxWebUIRouterModule } from './../provider/uirouter/uirouter.router.module';
+import { DbxWebUIRouterModule } from './../../provider/uirouter/uirouter.router.module';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { Component, Input, ViewChild } from '@angular/core';

packages/dbx-web/src/lib/router/anchor/anchor.component.ts → packages/dbx-web/src/lib/router/layout/anchor/anchor.component.ts

@@ -4,7 +4,7 @@ import { AbstractDbxAnchorDirective, DbxInjectedComponentConfig } from '@dereekb
 import { Maybe } from '@dereekb/util';
 import { BehaviorSubject } from 'rxjs';
 import { map, distinctUntilChanged, shareReplay } from 'rxjs/operators';
-import { DbxRouterWebProviderConfig } from '../provider/router.provider.config';
+import { DbxRouterWebProviderConfig } from '../../provider/router.provider.config';
 
 /**
  * Component that renders an anchor element depending on the input.

packages/dbx-web/src/lib/router/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './anchor';
+export * from './sidenav';

packages/dbx-web/src/lib/router/layout/layout.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { DbxAnchorModule } from './anchor/anchor.module';
+
+@NgModule({
+  exports: [
+    DbxAnchorModule
+  ]
+})
+export class DbxRouterLayoutModule { }

packages/dbx-web/src/lib/router/layout/sidenav/_sidenav.scss

@@ -0,0 +1,116 @@
+@use '../../../style/theming';
+
+$side-nav-width: 220px;
+$side-nav-mobile-width: 80vw;
+$side-nav-icon-only-width: 64px;
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-sidenav') {
+
+    .dbx-sidenav {
+      height: var(--vh100);
+
+      mat-sidenav {
+        width: $side-nav-width;
+      }
+    }
+
+    /*
+    .side-nav {
+      // overflow hidden set on style.scss
+
+      &.side-nav-mobile {
+        mat-sidenav {
+          width: $side-nav-mobile-width;
+        }
+      }
+
+      &.side-nav-icon {
+        mat-sidenav {
+          width: $side-nav-icon-only-width;
+        }
+
+        mat-sidenav-content {
+          margin-left: $side-nav-icon-only-width;
+        }
+      }
+
+      &.side-nav-full {
+        mat-sidenav {
+          width: $side-nav-width;
+        }
+
+        mat-sidenav-content {
+          margin-left: $side-nav-width;
+        }
+      }
+
+      .side-nav-top-bar {
+
+        .mat-toolbar {
+          height: $side-nav-top-bar-top-navbar-height;
+        }
+
+      }
+
+    }
+
+    $active-border-left-width: 4px;
+
+    .mat-list-base {
+      padding-top: 0;
+    }
+
+    .mat-list-item {
+      .mat-icon {
+        padding-right: 18px;
+      }
+    }
+
+    .active {
+      &.mat-list-item {
+        background-color: rgba(0, 0, 0, 0.1);
+        border-left: $active-border-left-width solid $sidenav-active-color;
+      }
+
+      mat-icon {
+        color: $sidenav-active-color;
+
+        // Offset the added border by clearing the default padding width (4px)
+        padding-left: 4px - $active-border-left-width;
+      }
+    }
+
+    $app-side-nav-bar-padding: 14px;
+
+    .app-side-nav-bar-title {
+      // text-align: center;
+      padding: $app-side-nav-bar-padding;
+
+      .app-side-nav-bar-title-header {
+        display: flex;
+
+        >img {
+          width: 32px;
+          height: 32px;
+          padding-left: 2px;
+          padding-right: 16px;
+        }
+
+        span {
+          @include mat-typography-level-to-styles($config, title);
+          font-weight: 300;
+        }
+      }
+
+    }
+
+    .app-side-nav-bar-title-content {
+      padding-top: $app-side-nav-bar-padding;
+    }
+    */
+
+  }
+}

packages/dbx-web/src/lib/router/layout/sidenav/index.ts

@@ -0,0 +1,5 @@
+export * from './sidenav.component';
+export * from './sidenav.module';
+// export * from './side.item.component';
+// export * from './side.title.component';
+// export * from './side.title.content.component';

packages/dbx-web/src/lib/router/layout/sidenav/side.item.component.html

@@ -0,0 +1,18 @@
+<!-- Template is projected into other outlets. -->
+<ng-template #content>
+  <mat-icon mat-list-icon>{{ anchor.icon }}</mat-icon>
+  <div mat-line>{{ anchor.title }}</div>
+  <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
+</ng-template>
+<ng-container [ngSwitch]="type">
+  <!-- Click -->
+  <a mat-list-item class="app-anchor app-anchor-click" [ngClass]="anchorClass" (click)="anchor.onClick($event)"
+    *ngSwitchCase="1">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </a>
+  <!-- Sref -->
+  <a mat-list-item class="app-anchor app-anchor-sref" [ngClass]="anchorClass" [uiSref]="anchor.ref"
+    [uiParams]="anchor.refParams" uiSrefActive="active" [uiOptions]="anchor.refOptions" *ngSwitchCase="2">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </a>
+</ng-container>

packages/dbx-web/src/lib/router/layout/sidenav/side.item.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { AbstractAnchorDirective } from '../anchor/anchor.directive';
+import { ClickableAnchorLink } from '@/app/common/nav/anchor/anchor';
+
+@Component({
+  selector: 'app-side-nav-bar-item',
+  templateUrl: './side.item.component.html',
+  styleUrls: ['./side.scss']
+})
+export class AppSideNavBarItemComponent extends AbstractAnchorDirective<ClickableAnchorLink> {
+
+  @Input()
+  last: boolean;
+
+}

packages/dbx-web/src/lib/router/layout/sidenav/side.title.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Input } from '@angular/core';
+
+/**
+ * Pre-styled top/title component.
+ */
+@Component({
+  selector: 'app-side-nav-bar-title',
+  template: `
+    <div class="app-side-nav-bar-title">
+      <div class="app-side-nav-bar-title-header">
+        <img src="assets/brand/icon.png"/>
+        <span>{{ header }}</span>
+      </div>
+      <ng-content></ng-content>
+    </div>
+  `,
+  styleUrls: ['./side.scss']
+})
+export class AppSideNavBarTitleComponent {
+
+  @Input()
+  header: string;
+
+}

packages/dbx-web/src/lib/router/layout/sidenav/side.title.content.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-side-nav-bar-title-content',
+  template: `
+    <div class="app-side-nav-bar-title-content">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styleUrls: ['./side.scss']
+})
+export class AppSideNavBarTitleContentComponent { }

packages/dbx-web/src/lib/router/layout/sidenav/sidenav.component.html

@@ -0,0 +1,19 @@
+<mat-sidenav-container class="dbx-sidenav">
+  <mat-sidenav [mode]="(drawer$ | async)!">
+    <ng-content select="[top]"></ng-content>
+    <p>Side navigation</p>
+    <mat-nav-list>
+      <ng-container *ngFor="let anchor of anchors">
+        <dbx-anchor mat-list-item>
+          <mat-icon mat-list-icon>{{ anchor.icon }}</mat-icon>
+          <div mat-line>{{ anchor.title }}</div>
+        </dbx-anchor>
+        <!-- <mat-divider *ngIf="!last"></mat-divider> -->
+      </ng-container>
+    </mat-nav-list>
+    <ng-content select="[bottom]"></ng-content>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <ng-content></ng-content>
+  </mat-sidenav-content>
+</mat-sidenav-container>