feat(addon-doc): support icons inside menu

taiga-family · Sep 20, 2023 · 0b82cc3 · 0b82cc3
1 parent 2921a21
commit 0b82cc3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/projects/addon-doc/components/navigation/navigation.style.less b/projects/addon-doc/components/navigation/navigation.style.less
@@ -79,6 +79,10 @@
     }
 }
 
+.t-icon {
+    margin-left: 0.5rem;
+}
+
 .t-chevron {
     .transition(transform);
     width: 1rem;

diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html
@@ -23,6 +23,12 @@
                     (click)="onClick(input)"
                 >
                     {{ item.title }}
+                    <ng-container *polymorpheusOutlet="item.icon as icon">
+                        <tui-svg
+                            class="t-icon"
+                            [src]="icon"
+                        ></tui-svg>
+                    </ng-container>
                 </a>
             </tui-opt-group>
         </tui-data-list>
@@ -81,7 +87,14 @@
                 (click)="closeMenu()"
             >
                 {{ item.title }}
+                <ng-container *polymorpheusOutlet="item.icon as icon">
+                    <tui-svg
+                        class="t-icon"
+                        [src]="icon"
+                    ></tui-svg>
+                </ng-container>
             </a>
+
             <ng-template #subPagesTemplate>
                 <div
                     routerLinkActive
@@ -101,6 +114,12 @@
                             [src]="icons.more"
                         ></tui-svg>
                         {{ item.title }}
+                        <ng-container *polymorpheusOutlet="item.icon as icon">
+                            <tui-svg
+                                class="t-icon"
+                                [src]="icon"
+                            ></tui-svg>
+                        </ng-container>
                     </button>
                     <tui-expand
                         class="t-expand"
@@ -118,6 +137,12 @@
                                 (click)="closeMenu()"
                             >
                                 {{ subPage.title }}
+                                <ng-container *polymorpheusOutlet="item.icon as icon">
+                                    <tui-svg
+                                        class="t-icon"
+                                        [src]="icon"
+                                    ></tui-svg>
+                                </ng-container>
                             </a>
                         </div>
                     </tui-expand>

diff --git a/projects/addon-doc/interfaces/page.ts b/projects/addon-doc/interfaces/page.ts
@@ -1,3 +1,5 @@
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
 export interface TuiDocPageBase {
     readonly section?: string;
     readonly title: string;
@@ -7,6 +9,7 @@ export interface TuiDocPage extends TuiDocPageBase {
     readonly fragment?: string;
     readonly keywords?: string;
     readonly route: string;
+    readonly icon?: PolymorpheusContent;
 }
 
 export interface TuiDocPageGroup extends TuiDocPageBase {

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -1,4 +1,6 @@
-export const pages = [
+import {TuiDocPages} from '@taiga-ui/addon-doc';
+
+export const pages: TuiDocPages = [
     // Documentation
     {
         section: `Documentation`,