Finish Applying content page

farengeyt451 · Aug 29, 2023 · 6f18a2c · 6f18a2c
1 parent 12e21e3
commit 6f18a2c
Show file tree

Hide file tree

Showing 11 changed files with 620 additions and 12 deletions.
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
@@ -6,6 +6,7 @@
         class="nav__link"
         tuiLink
         routerLink="/getting-started"
+        routerLinkActive="nav__link--active"
       >
         Getting started
       </a>
@@ -17,6 +18,7 @@
         class="nav__link"
         tuiLink
         routerLink="/usage"
+        routerLinkActive="nav__link--active"
       >
         Usage
       </a>
@@ -29,6 +31,8 @@
               tuiLink
               routerLink="/usage"
               fragment="basic_usage"
+              routerLinkActive="nav__link--active"
+              [routerLinkActiveOptions]="linkActiveOptions"
               (click)="onFragmentNav('basic_usage')"
             >
               Basic usage
@@ -40,6 +44,8 @@
               tuiLink
               routerLink="/usage"
               fragment="initializing_on_condition"
+              routerLinkActive="nav__link--active"
+              [routerLinkActiveOptions]="linkActiveOptions"
               (click)="onFragmentNav('initializing_on_condition')"
             >
               Initializing on condition
@@ -54,6 +60,7 @@
         class="nav__link"
         tuiLink
         routerLink="/applying-props"
+        routerLinkActive="nav__link--active"
       >
         Applying props
       </a>
@@ -64,9 +71,31 @@
         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)"
+            >
+              {{ method.view }}
+            </a>
+          </li>
+        </ul>
+      </tui-expand>
     </li>
   </ul>
 </div>
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
@@ -3,7 +3,7 @@
 }
 
 .nav__item:not(:first-child) {
-  margin-top: 0.5rem;
+  margin-top: 1rem;
 }
 
 .nav__sub-list {
@@ -13,5 +13,5 @@
 }
 
 .nav__sub-item:not(:first-child) {
-  margin-top: 0.25rem;
+  margin-top: 0.75rem;
 }
diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.ts b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.ts
@@ -1,6 +1,7 @@
 import { ViewportScroller } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, IsActiveMatchOptions } from '@angular/router';
+import { CONTENT_METHODS } from '@constants';
 import { DestroyService } from '@services';
 import { ScrollComponent } from '@shared';
 
@@ -13,7 +14,13 @@ import { ScrollComponent } from '@shared';
 })
 export class NavComponent extends ScrollComponent implements OnInit, AfterViewInit {
   public isSubListExpanded: boolean = true;
-
+  public readonly contentMethods = CONTENT_METHODS;
+  public readonly linkActiveOptions: IsActiveMatchOptions = {
+    matrixParams: 'exact',
+    queryParams: 'exact',
+    paths: 'exact',
+    fragment: 'exact',
+  };
   constructor(
     protected readonly activatedRoute: ActivatedRoute,
     protected readonly scroller: ViewportScroller,

diff --git a/...mo/src/app/pages/app-content/constants.ts → ...o/src/app/constants/content-meth.const.ts b/...mo/src/app/pages/app-content/constants.ts → ...o/src/app/constants/content-meth.const.ts
diff --git a/projects/ngx-tippy-demo/src/app/constants/index.ts b/projects/ngx-tippy-demo/src/app/constants/index.ts
@@ -1,2 +1,3 @@
+export * from './content-meth.const';
 export * from './is-mobile.const';
 export * from './themes.const';