feat(demo): add page for Sidebar directive (#125)

projects/addon-doc/src/internal/header/header.template.html

@@ -4,14 +4,13 @@
     icon="tuiIconMenuLarge"
     appearance="icon"
     [title]="menu"
-    [tuiSidebar]="sidebar"
-    [tuiSidebarOpen]="open$ | async"
     (click)="onClick()"
     (tuiActiveZoneChange)="onActiveZone($event)"
 >
-    <ng-template #sidebar>
-        <tui-doc-navigation class="navigation"></tui-doc-navigation>
-    </ng-template>
+    <tui-doc-navigation
+        *tuiSidebar="open$ | async"
+        class="navigation"
+    ></tui-doc-navigation>
 </button>
 <div polymorpheus-outlet class="logo tui-text_h5" [content]="logo"></div>
 <ng-content></ng-content>

projects/addon-mobile/directives/sidebar/sidebar.directive.ts

@@ -6,24 +6,21 @@ import {
     Injector,
     Input,
     OnDestroy,
+    TemplateRef,
 } from '@angular/core';
 import {TuiPortalService} from '@taiga-ui/cdk';
 import {TuiHorizontalDirection} from '@taiga-ui/core';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {TuiSidebarComponent} from './sidebar.component';
 
 @Directive({
     selector: '[tuiSidebar]',
 })
 export class TuiSidebarDirective implements OnDestroy {
-    @Input('tuiSidebar')
-    content: PolymorpheusContent = '';
-
     @Input('tuiSidebarDirection')
     direction: TuiHorizontalDirection = 'left';
 
     @Input()
-    set tuiSidebarOpen(open: boolean) {
+    set tuiSidebar(open: boolean) {
         if (open) {
             this.show();
         } else {
@@ -34,6 +31,7 @@ export class TuiSidebarDirective implements OnDestroy {
     private sidebarRef: ComponentRef<TuiSidebarComponent> | null = null;
 
     constructor(
+        @Inject(TemplateRef) readonly content: TemplateRef<{}>,
         @Inject(Injector) private readonly injector: Injector,
         @Inject(ComponentFactoryResolver)
         private readonly componentFactoryResolver: ComponentFactoryResolver,

projects/demo/src/modules/app/app.routes.ts

@@ -1129,6 +1129,16 @@ export const ROUTES = [
             title: 'Ripple',
         },
     },
+    {
+        path: 'tui-sidebar',
+        loadChildren: () =>
+            import(`../directives/sidebar/sidebar.module`).then(
+                m => m.ExampleTuiSidebarModule,
+            ),
+        data: {
+            title: 'Sidebar',
+        },
+    },
     {
         path: 'tui-touchable',
         loadChildren: () =>

projects/demo/src/modules/app/pages.ts

@@ -888,6 +888,13 @@ export const pages: TuiDocPages = [
                 keywords: 'touch, mobile, смартфон, pwa, native, hybrid, android',
                 route: '/tui-ripple',
             },
+            {
+                section: $localize`Tools`,
+                title: 'Sidebar',
+                keywords:
+                    'sidebar, hamburger, drawer menu, mobile, смартфон, pwa, native, hybrid, сайдбар, меню',
+                route: '/tui-sidebar',
+            },
             {
                 section: $localize`Tools`,
                 title: 'DropdownController',

projects/demo/src/modules/directives/sidebar/examples/1/index.html

@@ -0,0 +1,41 @@
+<button
+    tuiButton
+    type="button"
+    (click)="toggle(true)"
+    (tuiActiveZoneChange)="toggle($event)"
+>
+    Show sidebar
+    <!-- Nest the directive so it is considered the same active zone -->
+    <div *tuiSidebar="open; direction: 'right'">
+        <tui-accordion [rounded]="false">
+            <tui-accordion-item borders="top-bottom">
+                Web APIs for Angular
+                <ng-template tuiAccordionItemContent>
+                    <a
+                        *ngFor="let link of webApis"
+                        tuiLink
+                        class="link"
+                        target="_blank"
+                        href="https://github.com/ng-web-apis/{{link}}"
+                    >
+                        {{link}}
+                    </a>
+                </ng-template>
+            </tui-accordion-item>
+            <tui-accordion-item borders="top-bottom">
+                Other libraries
+                <ng-template tuiAccordionItemContent>
+                    <a
+                        *ngFor="let link of tinkoff"
+                        tuiLink
+                        class="link"
+                        target="_blank"
+                        href="https://github.com/TinkoffCreditSystems/{{link}}"
+                    >
+                        {{link}}
+                    </a>
+                </ng-template>
+            </tui-accordion-item>
+        </tui-accordion>
+    </div>
+</button>

projects/demo/src/modules/directives/sidebar/examples/1/index.less

@@ -0,0 +1,4 @@
+.link {
+    display: block;
+    margin: 12px 0;
+}

projects/demo/src/modules/directives/sidebar/examples/1/index.ts

@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '../../../../../change-detection-strategy';
+import {encapsulation} from '../../../../../view-encapsulation';
+
+@Component({
+    selector: 'tui-sidebar-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiSidebarExample1 {
+    open = false;
+
+    readonly webApis = [
+        'Common',
+        'Audio',
+        'Canvas',
+        'Geolocation',
+        'MIDI',
+        'Workers',
+    ];
+
+    readonly tinkoff = [
+        'Taiga-UI',
+        'ng-event-plugins',
+        'ng-polymorpheus',
+        'ng-dompurify',
+    ];
+
+    toggle(open: boolean) {
+        this.open = open;
+    }
+}

projects/demo/src/modules/directives/sidebar/examples/import/component.txt

@@ -0,0 +1,5 @@
+open = false;
+
+toggle(open: boolean) {
+    this.open = open;
+}

projects/demo/src/modules/directives/sidebar/examples/import/import-module.txt

@@ -0,0 +1,12 @@
+import {TuiSidebarModule} from '@taiga-ui/addon-mobile';
+import {TuiActiveZoneModule} from '@taiga-ui/cdk';
+
+...
+
+@NgModule({
+    imports: [
+        ...
+        TuiSidebarModule,
+        TuiActiveZoneModule,
+    ],
+...

projects/demo/src/modules/directives/sidebar/examples/import/insert-template.txt

@@ -0,0 +1,11 @@
+<button
+    tuiButton
+    type="button"
+    (click)="toggle(true)"
+    (tuiActiveZoneChange)="toggle($event)"
+>
+    Show sidebar
+    <div *tuiSidebar="open">
+        Content
+    </div>
+</button>

projects/demo/src/modules/directives/sidebar/sidebar.component.ts

@@ -0,0 +1,27 @@
+import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
+import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
+import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
+import {default as exampleComponent} from '!!raw-loader!./examples/import/component.txt';
+import {default as exampleImportModule} from '!!raw-loader!./examples/import/import-module.txt';
+import {default as exampleInsertTemplate} from '!!raw-loader!./examples/import/insert-template.txt';
+
+import {Component} from '@angular/core';
+import {changeDetection} from '../../../change-detection-strategy';
+import {FrontEndExample} from '../../interfaces/front-end-example';
+
+@Component({
+    selector: 'example-tui-sidebar',
+    templateUrl: './sidebar.template.html',
+    changeDetection,
+})
+export class ExampleTuiSidebarComponent {
+    readonly example1: FrontEndExample = {
+        TypeScript: example1Ts,
+        HTML: example1Html,
+        LESS: example1Less,
+    };
+
+    readonly exampleImportModule = exampleImportModule;
+    readonly exampleInsertTemplate = exampleInsertTemplate;
+    readonly exampleComponent = exampleComponent;
+}

projects/demo/src/modules/directives/sidebar/sidebar.module.ts

@@ -0,0 +1,26 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc';
+import {TuiSidebarModule} from '@taiga-ui/addon-mobile';
+import {TuiActiveZoneModule} from '@taiga-ui/cdk';
+import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
+import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiSidebarExample1} from './examples/1';
+import {ExampleTuiSidebarComponent} from './sidebar.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiSidebarModule,
+        TuiActiveZoneModule,
+        TuiButtonModule,
+        TuiAccordionModule,
+        TuiLinkModule,
+        ...TUI_DOC_PAGE_MODULES,
+        RouterModule.forChild(generateRoutes(ExampleTuiSidebarComponent)),
+    ],
+    declarations: [ExampleTuiSidebarComponent, TuiSidebarExample1],
+    exports: [ExampleTuiSidebarComponent],
+})
+export class ExampleTuiSidebarModule {}

projects/demo/src/modules/directives/sidebar/sidebar.template.html

@@ -0,0 +1,52 @@
+<tui-doc-page i18n-header header="Sidebar" package="ADDON-MOBILE">
+    <ng-template pageTab>
+        <p i18n>
+            Directive allows to show arbitrary content in a sidebar above all content.
+            A darkening overlay is shown under the sidebar.
+        </p>
+
+        <tui-doc-example
+            id="basic"
+            i18n-heading
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-sidebar-example-1></tui-sidebar-example-1>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template i18n-pageTab pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p i18n>
+                    Import <code>TuiSidevarModule</code> into your component
+                    module. Also add <code>TuiActiveZoneModule</code> if you want
+                    to close sidebar when user clicked outside:
+                </p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleImportModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p i18n>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleInsertTemplate"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p i18n>Control sidebar in component</p>
+
+                <tui-doc-code
+                    filename="myComponent.component.ts"
+                    [code]="exampleComponent"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>