Add route data service

src/app/app.routes.ts

@@ -56,11 +56,13 @@ createRoutes('docs', docsUrl, docsConfig);
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () => import('./pages/main/main.page')
+    loadComponent: () => import('./pages/main/main.page'),
+    data: { staticNav: true }
   },
   ...createRoutes('docs', docsUrl, docsConfig, 'https://github.com/openworkers/openworkers-website/tree/master'),
   {
     path: '**',
-    loadComponent: () => import('./pages/not-found/not-found.page')
+    loadComponent: () => import('./pages/not-found/not-found.page'),
+    data: { staticNav: true }
   }
 ];

src/app/main.component.html

@@ -1,4 +1,4 @@
-<nav class="w-full bg-white px-4" [ngClass]="(isMainPage$ | async) ? '' : 'fixed border-b shadow-sm'">
+<nav class="w-full bg-white px-4" [ngClass]="(staticNav$ | async) ? '' : 'fixed border-b shadow-sm'">
   <div class="container max-w-8xl h-16 justify-between items-center">
     <div class="flex gap-2 flex-1">
       <a routerLink="/">

src/app/main.component.ts

@@ -1,8 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { NavigationEnd, Router, RouterModule, RouterOutlet } from '@angular/router';
-import { filter, map } from 'rxjs';
-import { loginUrl, buildId } from '~/environment';
+import { RouterModule, RouterOutlet } from '@angular/router';
+import { Observable, map } from 'rxjs';
+import { buildId, loginUrl } from '~/environment';
+import { RouteDataService } from './services/route-data.service';
 
 @Component({
   selector: 'main',
@@ -15,10 +16,9 @@ export class MainComponent {
   public readonly loginUrl = loginUrl;
   public readonly buildId = buildId;
 
-  public readonly isMainPage$ = this.router.events.pipe(
-    filter((event) => event instanceof NavigationEnd),
-    map(() => this.router.url === '/')
-  );
+  public readonly staticNav$: Observable<any>;
 
-  constructor(private router: Router) {}
+  constructor(routeData: RouteDataService) {
+    this.staticNav$ = routeData.data$.pipe(map((data) => data.staticNav === true));
+  }
 }

src/app/pages/not-found/not-found.page.html

@@ -1,5 +1,5 @@
 
-<div class="container max-w-7xl flex-col items-center justify-center min-h-[calc(100vh-2.5rem)]">
+<div class="container max-w-7xl flex-col items-center justify-center min-h-[calc(100vh-2.5rem-4rem)]">
   <div class="sm:flex items-center">
     <h1 class="text-4xl font-bold text-center sm:mr-6 sm:pr-6 sm:border-r text-red-theme">404</h1>
     <h2 class="text-lg text-center mt-4 sm:mt-0">This page could not be found</h2>

src/app/services/route-data.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { filter, map, mergeMap, shareReplay } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class RouteDataService {
+  public readonly data$: Observable<IRouteData>;
+
+  constructor(router: Router, activatedRoute: ActivatedRoute) {
+    this.data$ = router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      map(() => activatedRoute),
+      map((route) => {
+        while (route.firstChild) {
+          route = route.firstChild;
+        }
+
+        return route;
+      }),
+      filter((route) => route.outlet === 'primary'),
+      mergeMap((route) => route.data),
+      shareReplay(1)
+    );
+  }
+}

src/types/index.d.ts

@@ -9,7 +9,7 @@ declare global {
 
   interface IRouteData {
     // Layout
-    fullScreen?: boolean;
+    staticNav?: boolean;
 
     // Metadata
     title?: string;