Skip to content

Commit

Permalink
Add scroll for nav section
Browse files Browse the repository at this point in the history
  • Loading branch information
@farengeyt451
farengeyt451 committed Sep 21, 2023
1 parent 092ac37 commit 146f1e8
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 176 deletions.
1 change: 1 addition & 0 deletions projects/ngx-tippy-demo/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions projects/ngx-tippy-demo/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
TuiModeModule,
TuiNotificationModule,
TuiRootModule,
TuiScrollbarModule,
TuiSvgModule,
TuiThemeNightModule,
} from '@taiga-ui/core';
Expand Down Expand Up @@ -97,6 +98,7 @@ function initialize(SchemeService: SchemeService) {
TuiRootModule,
TuiSvgModule,
TuiThemeNightModule,
TuiScrollbarModule,
TuiRadioLabeledModule,
],
providers: [
Expand Down
354 changes: 178 additions & 176 deletions projects/ngx-tippy-demo/src/app/components/nav/nav.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 146f1e8

Please sign in to comment.