fix(igx-templates): fix side-nav layout stacking and scrolling issues

[ivanvpetrov]

Closes #1615

Description

Fixes the Angular side-nav and side-nav-auth generated app shell layout where:

• The navigation drawer and main content were stacked vertically instead of side by side
• The navigation drawer would scroll out of view when the page content was taller than the viewport

Root Cause

The .outer-wrapper container relied solely on the igxLayout directive for display: flex, but had no explicit overflow: hidden to constrain the flex container to its height. Because html/body already have height: 100% but overflow: visible, page-level scrolling was triggered for tall content — causing the nav drawer to scroll away with the page instead of staying fixed.

Additionally, side-nav-auth was missing its app.scss file entirely, even though app.ts referenced it via styleUrl: './app.scss'.

Changes

• side-nav/files/src/app/app.scss: Added display: flex; flex-direction: row to .outer-wrapper, added overflow: hidden to app-root, .outer-wrapper, and .main, and added .main rule with flex: 1; min-width: 0; min-height: 0
• side-nav/files/src/app/app.html: Added class="main" to the inner content <div> so it can be targeted by the .main CSS rule
• side-nav-auth/files/src/app/app.scss: Created the missing stylesheet with the same layout rules (the side-nav-auth template already had class="main" on the inner div)

Result

The nav drawer and navbar are now stationary. Only the routed page content area scrolls via overflow: auto on .content.

Preview before fix

Screen.Recording.2026-05-21.100741.mp4

Preview after fix

Screen.Recording.2026-05-21.100853.mp4

[Copilot]

Pull request overview

This PR updates the Angular side-nav and side-nav-auth app shell templates to ensure the generated layout renders the nav drawer and main content side-by-side and keeps the drawer stationary while only the routed content area scrolls.

Changes:

• Adds explicit flex row layout and overflow containment styles to the side-nav app shell.
• Adds a .main hook in side-nav markup to correctly apply the new layout constraints.
• Adds the missing app.scss to the side-nav-auth template with matching layout/scroll rules.

Reviewed changes

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

File	Description
packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss	Adds overflow containment + explicit flex-row wrapper and .main constraints for correct scrolling/layout.
packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html	Adds class="main" to allow the new .main sizing/overflow rules to apply.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss	Introduces the missing stylesheet and applies the same app shell layout/scroll rules.

---

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

[coveralls]

coverage: 87.455%. remained the same — ipetrov/fix-1615-nav-drawer-layout into master