feat(igx-templates): add side-nav-mini template (collapsible mini navigation)

packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.config.ts

@@ -0,0 +1,29 @@
+import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { BrowserModule, HammerModule } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+import {
+  IgxNavigationDrawerModule,
+  IgxNavbarModule,
+  IgxIconModule,
+  IgxRippleModule
+} from '<%=igxPackage%>';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    importProvidersFrom(
+      BrowserModule,
+      HammerModule,
+      IgxNavigationDrawerModule,
+      IgxNavbarModule,
+      IgxIconModule,
+      IgxRippleModule
+    ),
+    provideAnimations()
+  ]
+};

packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.html

@@ -0,0 +1,30 @@
+<igx-navbar class="app-navbar" title="<%=name%>">
+  <igx-navbar-action>
+    <button igxIconButton="flat" class="nav-toggle-btn" (click)="toggleNav()">
+      <igx-icon>menu</igx-icon>
+    </button>
+  </igx-navbar-action>
+</igx-navbar>
+<div class="row-layout">
+  <igx-nav-drawer #nav [pin]="true" [pinThreshold]="0" [isOpen]="initiallyOpen" width="280px" miniWidth="68px">
+    <ng-template igxDrawer>
+      <span igxDrawerItem [isHeader]="true">Views</span>
+      @for (link of topNavLinks; track link) {
+        <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" [routerLink]="link.path">
+          <igx-icon fontSet="material">{{link.icon}}</igx-icon>
+          <span>{{link.name}}</span>
+        </span>
+      }
+    </ng-template>
+    <ng-template igxDrawerMini>
+      @for (link of topNavLinks; track link) {
+        <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" [routerLink]="link.path">
+          <igx-icon fontSet="material">{{link.icon}}</igx-icon>
+        </span>
+      }
+    </ng-template>
+  </igx-nav-drawer>
+  <div class="view-container">
+    <router-outlet></router-outlet>
+  </div>
+</div>

packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.routes.ts

@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { Home } from './home/home';
+import { NotFound } from './error-routing/not-found/not-found';
+import { UncaughtError } from './error-routing/error/uncaught-error';
+
+export const routes: Routes = [
+	{ path: '', redirectTo: '/home', pathMatch: 'full'},
+	{ path: 'home', component: Home, data: { text: 'Home', icon: 'home' }},
+	{ path: 'error', component: UncaughtError },
+	{ path: '**', component: NotFound } // must always be last
+];

packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.scss

@@ -0,0 +1,55 @@
+// Root element fills the viewport and stacks navbar above content
+app-root {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+// Navbar spans full width; height is determined by igx-navbar itself
+.app-navbar {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+// Row container holds the nav drawer and the page content side by side
+.row-layout {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  min-height: 0; // allow flex children to shrink below their content height
+}
+
+// Page content fills remaining horizontal space and scrolls independently
+.view-container {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: flex-start;
+
+  > *:not(router-outlet) {
+    padding: 0 24px;
+    width: 100%;
+  }
+
+  p {
+    margin: 15px;
+  }
+}
+
+// On small screens: hide the burger button — the nav is always in mini mode
+@media only screen and (max-width: 1024px) {
+  .nav-toggle-btn {
+    display: none;
+  }
+
+  .view-container {
+    justify-content: flex-start;
+
+    > *:not(router-outlet) {
+      padding: 0 15px;
+    }
+  }
+}

packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([]),
+        App
+      ]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});

packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.ts

@@ -0,0 +1,88 @@
+import { Component, HostListener, OnInit, AfterViewInit, viewChild, ViewEncapsulation, inject } from '@angular/core';
+import { NavigationStart, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
+import {
+  IgxNavigationDrawerComponent,
+  IgxNavDrawerTemplateDirective,
+  IgxNavDrawerMiniTemplateDirective,
+  IgxNavDrawerItemDirective,
+  IgxRippleDirective,
+  IgxNavbarComponent,
+  IgxNavbarActionDirective,
+  IgxIconComponent,
+  IgxIconButtonDirective,
+} from 'igniteui-angular';
+import { filter } from 'rxjs/operators';
+import { routes } from './app.routes';
+
+const MINI_BREAKPOINT = 1024;
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    IgxNavigationDrawerComponent,
+    IgxNavDrawerTemplateDirective,
+    IgxNavDrawerMiniTemplateDirective,
+    IgxNavDrawerItemDirective,
+    IgxRippleDirective,
+    RouterLinkActive,
+    RouterLink,
+    IgxNavbarComponent,
+    IgxNavbarActionDirective,
+    IgxIconComponent,
+    IgxIconButtonDirective,
+    RouterOutlet
+  ]
+})
+export class App implements OnInit, AfterViewInit {
+  // Start open on wide screens, collapsed (mini) on narrow screens
+  public readonly initiallyOpen = window.innerWidth > MINI_BREAKPOINT;
+  public topNavLinks: Array<{ path: string; name: string; icon: string }> = [];
+
+  public navdrawer = viewChild.required(IgxNavigationDrawerComponent);
+
+  private router = inject(Router);
+
+  constructor() {
+    for (const route of routes) {
+      if (route.path && route.data && route.path.indexOf('*') === -1) {
+        this.topNavLinks.push({
+          name: route.data['text'],
+          icon: route.data['icon'] ?? 'radio_button_unchecked',
+          path: '/' + route.path
+        });
+      }
+    }
+  }
+
+  public ngOnInit(): void {
+    this.router.events.pipe(
+      filter((x): x is NavigationStart => x instanceof NavigationStart)
+    ).subscribe(() => {
+      // On small screens the nav stays in mini mode — nothing to close
+      if (window.innerWidth <= MINI_BREAKPOINT) {
+        return;
+      }
+    });
+  }
+
+  public ngAfterViewInit(): void {
+    this.updateDrawerState();
+  }
+
+  /** Burger menu toggle — only active on large screens */
+  public toggleNav(): void {
+    this.navdrawer().toggle();
+  }
+
+  @HostListener('window:resize')
+  public updateDrawerState(): void {
+    const isWide = window.innerWidth > MINI_BREAKPOINT;
+    if (!isWide && this.navdrawer().isOpen) {
+      // Collapse to mini on small screens
+      this.navdrawer().close();
+    }
+  }
+}

packages/igx-templates/igx-ts/projects/side-nav-mini/index.ts

@@ -0,0 +1,19 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import * as path from "path";
+import { SideNavProject } from "../side-nav";
+
+export class SideNavMiniProject extends SideNavProject implements ProjectTemplate {
+	public id: string = "side-nav-mini";
+	public name = "Side navigation + collapsible mini nav";
+	public description = "Side navigation with a collapsible mini (icons-only) variant and responsive breakpoints";
+	public dependencies: string[] = [];
+	public framework: string = "angular";
+	public projectType: string = "igx-ts";
+	public hasExtraConfiguration = false;
+
+	public get templatePaths() {
+		return [...super.templatePaths, path.join(__dirname, "files")];
+	}
+}
+
+export default new SideNavMiniProject();