feat(templates): add side-nav-mini template (collapsible mini navigation) for React, Angular, WC by ivanvpetrov · Pull Request #1716 · IgniteUI/igniteui-cli

ivanvpetrov · 2026-06-02T13:24:02Z

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

…ble mini nav

coveralls · 2026-06-02T13:27:52Z

Coverage is 87.809% — ipetrov/new-mini-side-nav-template into ganastasov/align-side-nav-templates. No base build found for ganastasov/align-side-nav-templates.

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.

…ion) for React and WC

…ini-side-nav-template

…e improved defalt side-nav

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…ini-side-nav-template

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated 6 comments.

+.app__drawer {
+  flex: 0 0 auto;
+  height: 100%;
+  --menu-full-width: 280px;
+  --ig-nav-drawer-item-active-background: #e0f2ff;
+  --ig-nav-drawer-item-active-text-color: #0075d2;
+  --ig-nav-drawer-item-active-icon-color: #0075d2;
+}


+.app--mini .app__drawer {
+  --menu-full-width: 68px;
+}


+  registerIcon(name, `https://unpkg.com/material-design-icons@3.0.1/${path}`, 'material')
+);
+
+const navRoutes = routes.filter((r: any) => r.text);


+      </header>
+      <div className={!drawerOpen ? 'app__body app--mini' : 'app__body'}>
+        <IgrNavDrawer className="app__drawer" open position="relative">
+          {navRoutes.map((route: any) => (


+    .app__drawer {
+      flex: 0 0 auto;
+      height: 100%;
+      --menu-full-width: 280px;
+      --ig-nav-drawer-item-active-background: #e0f2ff;
+      --ig-nav-drawer-item-active-text-color: #0075d2;
+      --ig-nav-drawer-item-active-icon-color: #0075d2;
+    }


+    .app--mini .app__drawer {
+      --menu-full-width: 68px;
+    }


feat(igx-templates): add side-nav-mini project template with collapsi…

1db0a71

…ble mini nav

Copilot AI review requested due to automatic review settings June 2, 2026 13:24

Copilot started reviewing on behalf of ivanvpetrov June 2, 2026 13:24 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

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

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

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

kdinev added 🛠️ status: in-development templates component OR scenario template angular-standalone labels Jun 3, 2026

ivanvpetrov and others added 7 commits June 3, 2026 14:08

feat(templates): add side-nav-mini template (collapsible mini navigat…

278ac98

…ion) for React and WC

Merge branch 'master' into ipetrov/new-mini-side-nav-template

4943879

Merge branch 'ganastasov/align-side-nav-templates' into ipetrov/new-m…

1ce3b97

…ini-side-nav-template

feat(templates): side-nav-mini template for React and WC now match th…

03fa783

…e improved defalt side-nav

Potential fix for pull request finding

84ec5aa

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

cc43e19

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

feat(templates): fix side-nav-mini animation

ca6feb7

ivanvpetrov changed the base branch from master to ganastasov/align-side-nav-templates June 3, 2026 12:23

ivanvpetrov added 2 commits June 3, 2026 16:16

feat(templates): fix side-nav-mini icon size

097829c

Merge branch 'ganastasov/align-side-nav-templates' into ipetrov/new-m…

87430f4

…ini-side-nav-template

ivanvpetrov changed the title ~~feat(igx-templates): add side-nav-mini template (collapsible mini navigation)~~ feat(templates): add side-nav-mini template (collapsible mini navigation) for React, Angular, WC Jun 3, 2026

ivanvpetrov added react web-components labels Jun 3, 2026

ivanvpetrov and others added 2 commits June 3, 2026 16:28

feat(templates): fix some code according to base PR

ad6ec27

Potential fix for pull request finding

ecc02bb

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

ivanvpetrov requested a review from Copilot June 3, 2026 13:29

Copilot started reviewing on behalf of ivanvpetrov June 3, 2026 13:29 View session

Copilot AI reviewed Jun 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(templates): add side-nav-mini template (collapsible mini navigation) for React, Angular, WC#1716

feat(templates): add side-nav-mini template (collapsible mini navigation) for React, Angular, WC#1716
ivanvpetrov wants to merge 12 commits into
ganastasov/align-side-nav-templatesfrom
ipetrov/new-mini-side-nav-template

ivanvpetrov commented Jun 2, 2026

Uh oh!

coveralls commented Jun 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

ivanvpetrov commented Jun 2, 2026

Description

Behavior

Changes

How to test

Uh oh!

coveralls commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

coveralls commented Jun 2, 2026 •

edited

Loading