From 146f1e8f8072491ccde73511604348c06b4ec506 Mon Sep 17 00:00:00 2001
From: Alexander Kislov <strannik11.92@gmail.com>
Date: Thu, 21 Sep 2023 16:54:23 +0300
Subject: [PATCH] Add scroll for nav section

---
 .../ngx-tippy-demo/src/app/app.component.html |   1 +
 projects/ngx-tippy-demo/src/app/app.module.ts |   2 +
 .../src/app/components/nav/nav.component.html | 354 +++++++++---------
 .../src/app/components/nav/nav.component.scss |   4 +
 4 files changed, 185 insertions(+), 176 deletions(-)

diff --git a/projects/ngx-tippy-demo/src/app/app.component.html b/projects/ngx-tippy-demo/src/app/app.component.html
index bb7baed..874b359 100644
--- a/projects/ngx-tippy-demo/src/app/app.component.html
+++ b/projects/ngx-tippy-demo/src/app/app.component.html
@@ -17,6 +17,7 @@
       <nav class="t-demo__nav">
         <t-demo-nav></t-demo-nav>
       </nav>
+
       <div class="t-demo__wrapper">
         <div class="t-demo__content">
           <t-demo-content></t-demo-content>
diff --git a/projects/ngx-tippy-demo/src/app/app.module.ts b/projects/ngx-tippy-demo/src/app/app.module.ts
index 94887be..f340333 100644
--- a/projects/ngx-tippy-demo/src/app/app.module.ts
+++ b/projects/ngx-tippy-demo/src/app/app.module.ts
@@ -31,6 +31,7 @@ import {
   TuiModeModule,
   TuiNotificationModule,
   TuiRootModule,
+  TuiScrollbarModule,
   TuiSvgModule,
   TuiThemeNightModule,
 } from '@taiga-ui/core';
@@ -97,6 +98,7 @@ function initialize(SchemeService: SchemeService) {
     TuiRootModule,
     TuiSvgModule,
     TuiThemeNightModule,
+    TuiScrollbarModule,
     TuiRadioLabeledModule,
   ],
   providers: [
diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html
index fce9161..d6e9c56 100644
--- a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html
+++ b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html
@@ -1,190 +1,192 @@
-<div class="nav">
-  <ul class="nav__list">
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/getting-started"
-        routerLinkActive="nav__link--active"
-      >
-        Getting started
-      </a>
-    </li>
+<tui-scrollbar class="nav-box">
+  <div class="nav">
+    <ul class="nav__list">
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/getting-started"
+          routerLinkActive="nav__link--active"
+        >
+          Getting started
+        </a>
+      </li>
 
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/demo"
-        routerLinkActive="nav__link--active"
-      >
-        Demo
-      </a>
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/demo"
+          routerLinkActive="nav__link--active"
+        >
+          Demo
+        </a>
 
-    </li>
+      </li>
 
 
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/usage"
-        routerLinkActive="nav__link--active"
-      >
-        Usage
-      </a>
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/usage"
+          routerLinkActive="nav__link--active"
+        >
+          Usage
+        </a>
 
-      <tui-expand [expanded]="isSubListExpanded">
-        <ul class="nav__sub-list">
-          <li class="nav__sub-item">
-            <a
-              class="nav__link"
-              tuiLink
-              routerLink="/usage"
-              fragment="basic_usage"
-              routerLinkActive="nav__link--active"
-              [routerLinkActiveOptions]="linkActiveOptions"
-              (click)="onFragmentNav('basic_usage')"
-            >
-              Basic usage
-            </a>
-          </li>
-          <li class="nav__sub-item">
-            <a
-              class="nav__link"
-              tuiLink
-              routerLink="/usage"
-              fragment="initializing_on_condition"
-              routerLinkActive="nav__link--active"
-              [routerLinkActiveOptions]="linkActiveOptions"
-              (click)="onFragmentNav('initializing_on_condition')"
-            >
-              Initializing on condition
-            </a>
-          </li>
-        </ul>
-      </tui-expand>
-    </li>
+        <tui-expand [expanded]="isSubListExpanded">
+          <ul class="nav__sub-list">
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/usage"
+                fragment="basic_usage"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+                (click)="onFragmentNav('basic_usage')"
+              >
+                Basic usage
+              </a>
+            </li>
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/usage"
+                fragment="initializing_on_condition"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+                (click)="onFragmentNav('initializing_on_condition')"
+              >
+                Initializing on condition
+              </a>
+            </li>
+          </ul>
+        </tui-expand>
+      </li>
 
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/applying-props"
-        routerLinkActive="nav__link--active"
-      >
-        Applying props
-      </a>
-    </li>
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/applying-props"
+          routerLinkActive="nav__link--active"
+        >
+          Applying props
+        </a>
+      </li>
 
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/applying-content"
-        routerLinkActive="nav__link--active"
-      >
-        Applying content
-      </a>
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/applying-content"
+          routerLinkActive="nav__link--active"
+        >
+          Applying content
+        </a>
 
-      <tui-expand [expanded]="isSubListExpanded">
-        <ul class="nav__sub-list">
-          <li
-            *ngFor="let method of contentMethods"
-            class="nav__sub-item"
-          >
-            <a
-              class="nav__link"
-              tuiLink
-              routerLink="/applying-content"
-              fragment="{{ method.value }}"
-              routerLinkActive="nav__link--active"
-              [routerLinkActiveOptions]="linkActiveOptions"
-              (click)="onFragmentNav(method.value)"
+        <tui-expand [expanded]="isSubListExpanded">
+          <ul class="nav__sub-list">
+            <li
+              *ngFor="let method of contentMethods"
+              class="nav__sub-item"
             >
-              {{ method.view }}
-            </a>
-          </li>
-        </ul>
-      </tui-expand>
-    </li>
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/applying-content"
+                fragment="{{ method.value }}"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+                (click)="onFragmentNav(method.value)"
+              >
+                {{ method.view }}
+              </a>
+            </li>
+          </ul>
+        </tui-expand>
+      </li>
 
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/working-with-service"
-        routerLinkActive="nav__link--active"
-      >
-        Working with service
-      </a>
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/working-with-service"
+          routerLinkActive="nav__link--active"
+        >
+          Working with service
+        </a>
 
-      <tui-expand [expanded]="isSubListExpanded">
-        <ul class="nav__sub-list">
-          <li class="nav__sub-item">
-            <a
-              class="nav__link"
-              tuiLink
-              routerLink="/working-with-service"
-              fragment="additional_methods"
-              routerLinkActive="nav__link--active"
-              [routerLinkActiveOptions]="linkActiveOptions"
-              (click)="onFragmentNav('additional_methods')"
-            >
-              Additional methods
-            </a>
-          </li>
-          <li class="nav__sub-item">
-            <a
-              class="nav__link"
-              tuiLink
-              routerLink="/working-with-service"
-              fragment="static_methods"
-              routerLinkActive="nav__link--active"
-              [routerLinkActiveOptions]="linkActiveOptions"
-              (click)="onFragmentNav('static_methods')"
-            >
-              Static methods
-            </a>
-          </li>
-          <li class="nav__sub-item">
-            <a
-              class="nav__link"
-              tuiLink
-              routerLink="/working-with-service"
-              fragment="subscription_instances_changes"
-              routerLinkActive="nav__link--active"
-              [routerLinkActiveOptions]="linkActiveOptions"
-              (click)="onFragmentNav('subscription_instances_changes')"
-            >
-              Subscription to instances changes
-            </a>
-          </li>
-        </ul>
-      </tui-expand>
+        <tui-expand [expanded]="isSubListExpanded">
+          <ul class="nav__sub-list">
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/working-with-service"
+                fragment="additional_methods"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+                (click)="onFragmentNav('additional_methods')"
+              >
+                Additional methods
+              </a>
+            </li>
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/working-with-service"
+                fragment="static_methods"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+                (click)="onFragmentNav('static_methods')"
+              >
+                Static methods
+              </a>
+            </li>
+            <li class="nav__sub-item">
+              <a
+                class="nav__link"
+                tuiLink
+                routerLink="/working-with-service"
+                fragment="subscription_instances_changes"
+                routerLinkActive="nav__link--active"
+                [routerLinkActiveOptions]="linkActiveOptions"
+                (click)="onFragmentNav('subscription_instances_changes')"
+              >
+                Subscription to instances changes
+              </a>
+            </li>
+          </ul>
+        </tui-expand>
 
-    </li>
+      </li>
 
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/grouped-tooltips"
-        routerLinkActive="nav__link--active"
-      >
-        Grouped tooltips
-      </a>
-    </li>
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/grouped-tooltips"
+          routerLinkActive="nav__link--active"
+        >
+          Grouped tooltips
+        </a>
+      </li>
 
-    <li class="nav__item">
-      <a
-        class="nav__link"
-        tuiLink
-        routerLink="/multiple-tooltips"
-        routerLinkActive="nav__link--active"
-      >
-        Multiple tooltips on a single element
-      </a>
-    </li>
-  </ul>
-</div>
+      <li class="nav__item">
+        <a
+          class="nav__link"
+          tuiLink
+          routerLink="/multiple-tooltips"
+          routerLinkActive="nav__link--active"
+        >
+          Multiple tooltips on a single element
+        </a>
+      </li>
+    </ul>
+  </div>
+</tui-scrollbar>
diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss
index 4d4552b..985f031 100644
--- a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss
+++ b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss
@@ -1,3 +1,7 @@
+.nav-box {
+  height: calc(100% - 128px);
+}
+
 .nav__list {
   font-size: 1rem;
 }