feat(daffio): render nav links from route data (#3013)

apps/daffio/src/app/app-routing.module.ts

@@ -4,10 +4,9 @@ import {
   RouterModule,
 } from '@angular/router';
 
-import { DaffRouteWithNamedViews } from '@daffodil/router';
-
 import { DaffioMarketingFooterComponent } from './core/footer/marketing-footer/marketing-footer.component';
-import { DaffioMarketingHeaderContainer } from './core/header/containers/marketing-header/marketing-header.component';
+import { DaffioNavHeaderContainer } from './core/nav/header/header.component';
+import { DaffioRoute } from './core/router/route.type';
 import { DaffioMarketingSidebarContentComponent } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.component';
 import { DaffioSidebarFooterComponent } from './core/sidebar/components/sidebar-footer/sidebar-footer.component';
 import { DaffioSidebarHeaderComponent } from './core/sidebar/components/sidebar-header/sidebar-header.component';
@@ -17,17 +16,23 @@ import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enu
 
 
 export const appRoutes: Routes = [
-  {
+  <DaffioRoute>{
     path: '',
     component: TemplateComponent,
     data: {
       daffNamedViews: {
+        [DaffioRouterNamedViewsEnum.NAV]: DaffioNavHeaderContainer,
         [DaffioRouterNamedViewsEnum.SIDEBARHEADER]: DaffioSidebarHeaderComponent,
         [DaffioRouterNamedViewsEnum.SIDEBARFOOTER]: DaffioSidebarFooterComponent,
       },
+      daffioNavLinks: [
+        { url: '/why-pwa', title: 'Why PWA' },
+        { url: '/docs', title: 'Docs' },
+        { url: 'https://github.com/sponsors/graycoreio', title: 'Sponsor', external: true },
+      ],
     },
     children: [
-      <DaffRouteWithNamedViews>{
+      <DaffioRoute>{
         path: '',
         children: [
           { path: '', pathMatch: 'full', loadChildren: () => import('./content/home/home.module').then(m => m.DaffioHomeModule) },
@@ -37,7 +42,6 @@ export const appRoutes: Routes = [
         ],
         data: {
           daffNamedViews: {
-            [DaffioRouterNamedViewsEnum.NAV]: DaffioMarketingHeaderContainer,
             [DaffioRouterNamedViewsEnum.SIDEBARCONTENT]: DaffioMarketingSidebarContentComponent,
             [DaffioRouterNamedViewsEnum.FOOTER]: DaffioMarketingFooterComponent,
           },

apps/daffio/src/app/app.module.ts

@@ -21,8 +21,6 @@ import { AppRoutingModule } from './app-routing.module';
 import { DaffioAppComponent } from './app.component';
 import { DaffioMarketingFooterComponentModule } from './core/footer/marketing-footer/marketing-footer.module';
 import { DaffioSimpleFooterComponentModule } from './core/footer/simple-footer/simple-footer.module';
-import { DaffioDocsHeaderContainerModule } from './core/header/containers/docs-header/docs-header.module';
-import { DaffioMarketingHeaderContainerModule } from './core/header/containers/marketing-header/marketing-header.module';
 import { DaffioDocsSidebarContentComponentModule } from './core/sidebar/components/docs-sidebar-content/docs-sidebar-content.module';
 import { DaffioMarketingSidebarContentComponentModule } from './core/sidebar/components/marketing-sidebar-content/marketing-sidebar-content.module';
 import { DaffioSidebarFooterComponentModule } from './core/sidebar/components/sidebar-footer/sidebar-footer.module';
@@ -40,8 +38,6 @@ import { environment } from '../environments/environment';
     HttpClientModule,
 
     AppRoutingModule,
-    DaffioMarketingHeaderContainerModule,
-    DaffioDocsHeaderContainerModule,
     DaffioMarketingSidebarContentComponentModule,
     DaffioDocsSidebarContentComponentModule,
     DaffioSidebarHeaderComponentModule,

apps/daffio/src/app/content/home/home.module.ts

@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 
 import { DaffioHomeRoutingModule } from './home-routing.module';
 import { DaffioHomeViewModule } from './view/home-view.module';
-import { DaffioMarketingHeaderContainerModule } from '../../core/header/containers/marketing-header/marketing-header.module';
 import { TemplateModule } from '../../core/template/template.module';
 import { IphoneModule } from '../../design/device/iphone/iphone.module';
 
@@ -20,7 +19,6 @@ import { IphoneModule } from '../../design/device/iphone/iphone.module';
 
     DaffioHomeRoutingModule,
     DaffioHomeViewModule,
-    DaffioMarketingHeaderContainerModule,
   ],
 })
 export class DaffioHomeModule { }

apps/daffio/src/app/content/home/view/home-view.module.ts

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { DaffioHomeViewComponent } from './home-view.component';
-import { DaffioMarketingHeaderContainerModule } from '../../../core/header/containers/marketing-header/marketing-header.module';
 import { DaffioHomeCalloutPlatformsComponentModule } from '../components/home-callout-platforms/home-callout-platforms.module';
 import { DaffioHomeCalloutPwaComponentModule } from '../components/home-callout-pwa/home-callout-pwa.module';
 import { DaffioHomeHeroComponentModule } from '../components/home-hero/home-hero.module';
@@ -16,7 +15,6 @@ import { DaffioHomeHeroComponentModule } from '../components/home-hero/home-hero
     DaffioHomeHeroComponentModule,
     DaffioHomeCalloutPwaComponentModule,
     DaffioHomeCalloutPlatformsComponentModule,
-    DaffioMarketingHeaderContainerModule,
   ],
   declarations: [
     DaffioHomeViewComponent,

apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html → apps/daffio/src/app/core/nav/header/header.component.html

@@ -1,12 +1,19 @@
-<daffio-header class="daffio-marketing-header">
+<daffio-header class="daffio-header">
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
   <daff-theme-switch-button theme-toggle></daff-theme-switch-button>
-  <a daffioHeaderItem routerLink="{{ link.path }}" *ngFor="let link of links">{{ link.title }}</a>
-  <a daffioHeaderItem href="https://github.com/sponsors/graycoreio" target="_blank">Sponsor</a>
+  @for (link of links$ | async; track $index) {
+    <ng-container daffioHeaderItem>
+      @if (link.external) {
+        <a daffioHeaderItem [href]="link.url" target="_blank">{{link.title}}</a>
+      } @else {
+        <a daffioHeaderItem [routerLink]="link.url">{{ link.title }}</a>
+      }
+    </ng-container>
+  }
   <a daff-button color="theme-contrast" size="sm" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
-  <button daff-icon-button color="theme-contrast" aria-label="Open Main Navigation Sidebar"
+  <button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
     sidebar-button
     (click)="openSidebar()">
     <fa-icon [icon]="faBars"></fa-icon>

apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.scss → apps/daffio/src/app/core/nav/header/header.component.scss

@@ -1,6 +1,6 @@
 // @use 'utilities' as daff;
 
-// .daffio-marketing-header {
+// .daffio-header {
 // 	padding: 0 24px;
 
 // 	@include daff.breakpoint(mobile) {
@@ -10,4 +10,4 @@
 // 	@include daff.breakpoint(small-laptop) {
 // 		padding: 0;
 // 	}
-// }
+// }