Layout, navbar and sidebar

<ng-doc-root>
  <ng-doc-navbar>
    <a ngDocNavbarLeft routerLink="/">My library</a>
    <nav ngDocNavbarCenter aria-label="Primary">
      <a routerLink="/docs/get-started/installation">Guides</a>
      <a routerLink="/docs/api">API</a>
    </nav>
    <ng-doc-theme-toggle ngDocNavbarRight />
  </ng-doc-navbar>

  <ng-doc-sidebar />
  <router-outlet />
</ng-doc-root>

<ng-doc-root [footerContent]="footer">
  <!-- The navbar, the sidebar and the router outlet -->
</ng-doc-root>

<ng-template #footer>MIT License</ng-template>

<ng-doc-navbar>
  <a ngDocNavbarLeft routerLink="/">
    <img src="images/logo.svg" alt="" width="28" height="28" />
    My library
  </a>
  <ng-doc-theme-toggle ngDocNavbarRight />
  <a ngDocNavbarRight ng-doc-button-icon size="large" href="https://github.com/me/my-library" target="_blank" rel="noopener" aria-label="My library on GitHub" ngDocTooltip="Repository on GitHub">
    <ng-doc-icon customIcon="github" size="24" />
  </a>
</ng-doc-navbar>

:root {
  --ng-doc-app-max-width: 1600px;
  --ng-doc-sidebar-width: 320px;
}

<ng-doc-root>
  <app-navbar ngDocCustomNavbar />
  <ng-doc-sidebar />
  <router-outlet />
</ng-doc-root>

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgDocSearchComponent, NgDocSidebarService } from '@ng-doc/app';

@Component({
  selector: 'app-navbar',
  imports: [RouterLink, NgDocSearchComponent],
  template: `
    <button type="button" aria-controls="ng-doc-sidenav" [attr.aria-expanded]="sidebar.expandedState()" (click)="sidebar.toggle()">Menu</button>
    <a routerLink="/">My library</a>
    <ng-doc-search />
  `,
  styles: `
    :host {
      display: flex;
      align-items: center;
      gap: 16px;
      height: var(--ng-doc-navbar-height);
      padding: 0 var(--ng-doc-app-horizontal-padding);
      background: var(--ng-doc-navbar-background);
      border-bottom: var(--ng-doc-navbar-border);
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavbarComponent {
  protected readonly sidebar = inject(NgDocSidebarService);
}

<ng-doc-root>
  <ng-doc-navbar />
  <app-sidebar ngDocCustomSidebar />
  <router-outlet />
</ng-doc-root>

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { NG_DOC_CONTEXT } from '@ng-doc/app';

@Component({
  selector: 'app-sidebar',
  imports: [RouterLink, RouterLinkActive],
  template: `
    <nav aria-label="Documentation">
      @for (item of navigation; track item.route) {
        @if (item.children?.length) {
          <h2>{{ item.title }}</h2>
          @for (child of item.children; track child.route) {
            <a [routerLink]="child.route" routerLinkActive="active">{{ child.title }}</a>
          }
        } @else {
          <a [routerLink]="item.route" routerLinkActive="active">{{ item.title }}</a>
        }
      }
    </nav>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SidebarComponent {
  protected readonly navigation = inject(NG_DOC_CONTEXT).navigation;
}

<!-- Your header, footer and other parts of the shell -->
<router-outlet />

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterOutlet, Routes } from '@angular/router';
import { NgDocNavbarComponent, NgDocRootComponent, NgDocSidebarComponent } from '@ng-doc/app';
import { NG_DOC_ROUTING } from '@ng-doc/generated';

@Component({
  selector: 'app-docs',
  imports: [RouterOutlet, NgDocRootComponent, NgDocNavbarComponent, NgDocSidebarComponent],
  template: `
    <ng-doc-root>
      <ng-doc-navbar>
        <span ngDocNavbarLeft>My library</span>
      </ng-doc-navbar>
      <ng-doc-sidebar />
      <router-outlet />
    </ng-doc-root>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DocsComponent {}

const routes: Routes = [{ path: '', component: DocsComponent, children: NG_DOC_ROUTING }];

export default routes;

provideRouter([...routes, { path: 'docs', loadChildren: () => import('./docs/docs.routes') }], withInMemoryScrolling({ scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled' }));

import { NgDocConfiguration } from '@ng-doc/builder';

const config: NgDocConfiguration = {
  routePrefix: 'docs',
};

export default config;

import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgDocSearchComponent, NgDocSidebarService } from '@ng-doc/app';

@Component({
  selector: 'app-header',
  imports: [RouterLink, NgDocSearchComponent],
  template: `
    @if (inDocs()) {
      <button type="button" aria-controls="ng-doc-sidenav" [attr.aria-expanded]="sidebar.expandedState()" (click)="sidebar.toggle()">Menu</button>
    }
    <a routerLink="/">My app</a>
    <a routerLink="/docs/getting-started">Docs</a>
    @if (inDocs()) {
      <ng-doc-search />
    }
  `,
  styles: `
    :host {
      display: flex;
      align-items: center;
      gap: 16px;
      height: var(--ng-doc-navbar-height);
      padding: 0 var(--ng-doc-app-horizontal-padding);
      background: var(--ng-doc-navbar-background);
      border-bottom: var(--ng-doc-navbar-border);
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppHeader {
  readonly inDocs = input(false);
  protected readonly sidebar = inject(NgDocSidebarService);
}

<ng-doc-root>
  <app-header ngDocCustomNavbar [inDocs]="true" />
  <ng-doc-sidebar />
  <router-outlet />
</ng-doc-root>

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { filter, map } from 'rxjs';

import { AppHeader } from './header/header';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, AppHeader],
  template: `
    @if (!inDocs()) {
      <app-header />
    }
    <router-outlet />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
  private readonly router = inject(Router);

  protected readonly inDocs = toSignal(
    this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      map(() => this.router.url.startsWith('/docs')),
    ),
    { initialValue: false },
  );
}