feat(design): update the way the nav height is calculated

apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts

@@ -1,16 +1,30 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  Injector,
 } from '@angular/core';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { Store } from '@ngrx/store';
 
+import { DaffSidebarViewportNavDirective } from '@daffodil/design/sidebar';
+
 import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions';
 
 @Component({
   selector: 'daffio-docs-header-container',
   templateUrl: './docs-header.component.html',
+  styles: [`
+  :host {
+    display: block;
+    border-bottom: 1px solid black;
+  }`],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: DaffSidebarViewportNavDirective,
+      useValue: {},
+    },
+  ],
 })
 export class DaffioDocsHeaderContainer {
   faBars = faBars;
@@ -19,9 +33,13 @@ export class DaffioDocsHeaderContainer {
     { path: '/api', title: 'API Index' },
   ];
 
-  constructor(private store: Store<any>) { }
+  constructor(private store: Store<any>, private injector: Injector) { }
 
   openDocsSidebar() {
     this.store.dispatch(new ToggleSidebar());
   }
+
+  get height() {
+    return 65;
+  }
 }

apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts

@@ -5,12 +5,20 @@ import {
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { Store } from '@ngrx/store';
 
+import { DaffSidebarViewportNavDirective } from '@daffodil/design/sidebar';
+
 import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions';
 
 @Component({
   selector: 'daffio-marketing-header-container',
   templateUrl: './marketing-header.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: DaffSidebarViewportNavDirective,
+      useValue: {},
+    },
+  ],
 })
 export class DaffioMarketingHeaderContainer {
   faBars = faBars;
@@ -25,4 +33,8 @@ export class DaffioMarketingHeaderContainer {
   openSidebar() {
     this.store.dispatch(new ToggleSidebar());
   }
+
+  get height() {
+    return 64;
+  }
 }

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html

@@ -10,8 +10,8 @@
       <a href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-sidebar-viewport__get-started">Get Started</a>
     </daff-sidebar-footer>
   </daff-sidebar>
-  <ng-container daff-sidebar-viewport-nav>
-    <ng-content select="[daff-sidebar-viewport-nav]"></ng-content>
+  <ng-container ngProjectAs="[daff-sidebar-viewport-nav]">
+    <ng-container [daffRouterNamedViewOutlet]="navNamedView"></ng-container>
   </ng-container>
   <ng-content></ng-content>
 </daff-sidebar-viewport>

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts

@@ -31,7 +31,7 @@ import * as fromDaffioSidebar from '../../reducers/index';
 })
 export class DaffioSidebarViewportContainer implements OnInit {
   faTimes = faTimes;
-  readonly sidebarNamedView = DaffioRouterNamedViewsEnum.SIDEBAR;
+  readonly navNamedView = DaffioRouterNamedViewsEnum.NAV;
 
   showSidebar$: Observable<boolean>;
   sidebarContents$: Observable<DaffioGuideList>;

apps/daffio/src/app/core/template/template.component.html

@@ -1,5 +1,4 @@
 <daffio-sidebar-viewport-container>
-  <ng-container [daffRouterNamedViewOutlet]="navNamedView" daff-sidebar-viewport-nav></ng-container>
   <router-outlet></router-outlet>
   <daffio-sub-footer></daffio-sub-footer>
   <daffio-simple-footer></daffio-simple-footer>

apps/daffio/src/app/core/template/template.component.ts

@@ -11,5 +11,4 @@ import { DaffioRouterNamedViewsEnum } from '../../named-views/models/named-views
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TemplateComponent {
-  readonly navNamedView = DaffioRouterNamedViewsEnum.NAV;
 }

libs/design/sidebar/src/public_api.ts

@@ -5,6 +5,7 @@ export * from './sidebar-header/sidebar-header.component';
 export * from './sidebar-footer/sidebar-footer.component';
 export * from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
 export * from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
+export * from './sidebar-viewport/nav/nav.directive';
 export {
   DaffSidebarMode,
   DaffSidebarModeEnum,

libs/design/sidebar/src/sidebar-viewport/nav/nav.directive.ts

@@ -0,0 +1,23 @@
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+} from '@angular/core';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[daff-sidebar-viewport-nav]',
+})
+export class DaffSidebarViewportNavDirective implements AfterViewInit {
+  private _height = 64;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    this._height = this.elementRef.nativeElement.offsetHeight;
+  }
+
+  get height() {
+    return this._height;
+  }
+}

libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts

@@ -13,9 +13,13 @@ import {
   Inject,
   SkipSelf,
   Optional,
+  ViewChild,
+  ViewContainerRef,
+  ContentChild,
 } from '@angular/core';
 
 import { hasParentViewport } from './helper/has-parent-viewport';
+import { DaffSidebarViewportNavDirective } from './nav/nav.directive';
 import {
   DaffNavPlacement,
   DaffNavPlacementEnum,
@@ -134,6 +138,8 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
    */
   public _navPadRight = 0;
 
+  private _navHeight = 0;
+
   /**
    * Whether or not the backdrop is interactable
    */
@@ -144,6 +150,11 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
    */
   _animationState: DaffSidebarViewportAnimationStateWithParams = { value: DaffSidebarAnimationStates.CLOSED, params: { shift: '0px' }};
 
+  /**
+   * @docs-private
+   */
+  @ContentChild(DaffSidebarViewportNavDirective, { static: false, descendants: true }) nav: DaffSidebarViewportNavDirective;
+
   /**
    * Event fired when the backdrop is clicked. This is often used to close the sidebar.
    */
@@ -164,6 +175,12 @@ export class DaffSidebarViewportComponent implements AfterContentChecked {
       this.cdRef.markForCheck();
     }
 
+    const nextNavHeight = this.nav?.height;
+    if( nextNavHeight !== this._navHeight ) {
+      this._navHeight = nextNavHeight;
+      this._elementRef.nativeElement.style.setProperty('--daff-sidebar-side-fixed-top-shift', nextNavHeight + 'px');
+    }
+
     const nextBackdropInteractable = sidebarViewportBackdropInteractable(this.sidebars);
     if (this._backdropInteractable !== nextBackdropInteractable) {
       this._backdropInteractable = nextBackdropInteractable;

libs/design/sidebar/src/sidebar.module.ts

@@ -9,6 +9,7 @@ import { DaffSidebarFooterComponent } from './sidebar-footer/sidebar-footer.comp
 import { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
 import { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
 import { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
+import { DaffSidebarViewportNavDirective } from './sidebar-viewport/nav/nav.directive';
 import { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
 
 @NgModule({
@@ -24,6 +25,7 @@ import { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewpor
     DaffSidebarFooterComponent,
     DaffSidebarHeaderTitleDirective,
     DaffSidebarHeaderActionDirective,
+    DaffSidebarViewportNavDirective,
   ],
   exports: [
     DaffSidebarComponent,
@@ -32,6 +34,7 @@ import { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewpor
     DaffSidebarFooterComponent,
     DaffSidebarHeaderTitleDirective,
     DaffSidebarHeaderActionDirective,
+    DaffSidebarViewportNavDirective,
   ],
 })
 export class DaffSidebarModule { }

libs/router/src/named-view/outlet/outlet.directive.ts

@@ -97,7 +97,7 @@ export class DaffRouterNamedViewOutletDirective implements OnInit, OnChanges, On
     ).subscribe((component) => {
       this.viewRef.clear();
       if (component) {
-        const ref = this.viewRef.createComponent(component);
+        const ref = this.viewRef.createComponent(component, { injector: this.viewRef.injector });
         ref.changeDetectorRef.markForCheck();
       }
     });