From 0541ff4b79a113d31699adaf8c4fc218ed41ab01 Mon Sep 17 00:00:00 2001
From: "INFRAGISTICS\\IPetrov" <IPetrov@infragistics.com>
Date: Tue, 19 May 2026 15:54:18 +0300
Subject: [PATCH 1/2] fix(templates): layout of navdrawer

---
 .../side-nav-auth/files/src/app/app.scss      | 38 +++++++++++++++++++
 .../projects/side-nav/files/src/app/app.html  |  2 +-
 .../projects/side-nav/files/src/app/app.scss  |  8 ++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss

diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss
new file mode 100644
index 000000000..d61a74e52
--- /dev/null
+++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss
@@ -0,0 +1,38 @@
+.outer-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: stretch;
+  overflow: auto;
+
+  > *:not(router-outlet) {
+    padding: 0 24px;
+  }
+
+  p {
+    margin: 15px;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .content {
+    justify-content: flex-start;
+
+    > *:not(router-outlet) {
+      padding: 0 15px;
+    }
+  }
+}
diff --git a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html
index 3e6ad582c..1ec8dc1de 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html
+++ b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html
@@ -7,7 +7,7 @@
       }
     </ng-template>
   </igx-nav-drawer>
-  <div igxFlex igxLayout igxLayoutDir="columns">
+  <div class="main" igxFlex igxLayout igxLayoutDir="columns">
     <igx-navbar title="<%=name%>" actionButtonIcon="menu" (action)="nav.toggle()"></igx-navbar>
     <div class="content" igxFlex>
       <router-outlet></router-outlet>
diff --git a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
index 6f341092a..d61a74e52 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
+++ b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
@@ -1,5 +1,13 @@
 .outer-wrapper {
   height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
 }
 
 .content {

From 18e5493605346f4d6d8fb3f16a6004eaef9e4c65 Mon Sep 17 00:00:00 2001
From: "INFRAGISTICS\\IPetrov" <IPetrov@infragistics.com>
Date: Thu, 21 May 2026 09:31:52 +0300
Subject: [PATCH 2/2] fix(templates): navdrawer now fixed when scrolling

---
 .../igx-ts/projects/side-nav-auth/files/src/app/app.scss    | 6 ++++++
 .../igx-ts/projects/side-nav/files/src/app/app.scss         | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss
index d61a74e52..7c7876bd8 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss
+++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss
@@ -1,5 +1,10 @@
+app-root {
+  overflow: hidden;
+}
+
 .outer-wrapper {
   height: 100%;
+  overflow: hidden;
   display: flex;
   flex-direction: row;
 }
@@ -8,6 +13,7 @@
   flex: 1;
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
 }
 
 .content {
diff --git a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
index d61a74e52..7c7876bd8 100644
--- a/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
+++ b/packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss
@@ -1,5 +1,10 @@
+app-root {
+  overflow: hidden;
+}
+
 .outer-wrapper {
   height: 100%;
+  overflow: hidden;
   display: flex;
   flex-direction: row;
 }
@@ -8,6 +13,7 @@
   flex: 1;
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
 }
 
 .content {