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

[ivanvpetrov]

Description

Adds a new Angular project template option to the ig new wizard: Side navigation + collapsible mini nav.

The template is similar to the existing side-nav but the navigation drawer can collapse to a compact icons-only (mini) variant instead of disappearing completely. The top navbar is always full-width and fixed at the top of the screen.

Behavior

• Large screens (> 1024px): Full side nav is shown by default. The burger menu in the navbar toggles between the full nav (icon + label) and the mini nav (icon only). The transition is animated.
• Small screens (≤ 1024px): The burger menu is hidden via CSS and the drawer is always in mini mode (icons only, always visible).
• The drawer is always pinned ([pin]="true", [pinThreshold]="0"), so the mini nav occupies inline layout space and is never an overlay.

Changes

• packages/igx-templates/igx-ts/projects/side-nav-mini/index.ts — template class extending SideNavProject, auto-discovered via folder name
• files/src/app/app.ts — imports IgxNavDrawerMiniTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxNavbarActionDirective; handles responsive collapse via @HostListener('window:resize')
• files/src/app/app.html — navbar above the row layout (full-width fixed top); igxDrawer template with icon + label; igxDrawerMini template with icon only; [pinThreshold]="0" to prevent auto-pin override
• files/src/app/app.scss — app-root as column flexbox, .row-layout as row flexbox, .view-container with overflow: auto; burger hidden on small screens via @media
• files/src/app/app.config.ts — providers for IgxNavigationDrawerModule, IgxNavbarModule, IgxIconModule, IgxRippleModule
• files/src/app/app.routes.ts — overrides base routes to add icon: 'home' to the Home route; new views added via ig add fall back to radio_button_unchecked

How to test

Build the CLI, then generate a new project using the new template:

# 1. Build
npm run build

# 2. Start the wizard and select the new template
node D:\Repos\igniteui-cli\packages\cli\bin\execute.js new

# Select: Angular → Ignite UI for Angular → "Side navigation + collapsible mini nav"
# Give it a name and follow the prompts

# 3. cd into the generated project and run it
cd <project-name>
npm install
npm start

[coveralls]

coverage: 87.927%. remained the same — ipetrov/new-mini-side-nav-template into master

[Copilot]

Pull request overview

Adds a new Ignite UI for Angular project template (side-nav-mini) that extends the existing side-nav layout with a pinned navigation drawer that can collapse to a mini (icons-only) variant, plus supporting routes/config/styles.

Changes:

• Introduces SideNavMiniProject template extending the existing SideNavProject.
• Adds a standalone Angular app shell (navbar + pinned nav drawer with full/mini templates) with responsive collapse behavior.
• Adds template-specific routing (including icon route metadata), providers, styles, and a basic app creation spec.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/igx-templates/igx-ts/projects/side-nav-mini/index.ts	Registers the new side-nav-mini template by extending the existing side-nav template.
packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.ts	Implements the app shell logic (drawer toggle + resize handling) and builds nav links from route metadata.
packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.html	Defines the navbar and nav drawer full/mini templates with route-driven items.
packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.scss	Styles the fixed navbar + row layout and adjusts behavior at the 1024px breakpoint.
packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.config.ts	Provides Angular + Ignite UI providers/modules needed by the template.
packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.routes.ts	Defines base routes and adds icon metadata for navigation rendering.
packages/igx-templates/igx-ts/projects/side-nav-mini/files/src/app/app.spec.ts	Adds a basic “should create app” unit test for the template.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.