feat(experimental): Navigation add new module

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

@@ -473,6 +473,15 @@ export const ROUTES: Routes = [
             title: 'ThumbnailCard ',
         },
     },
+    {
+        path: 'experimental/navigation',
+        loadChildren: async () =>
+            (await import('../experimental/navigation/navigation.module'))
+                .ExampleTuiNavigationModule,
+        data: {
+            title: 'Navigation',
+        },
+    },
     {
         path: 'experimental/pin',
         loadChildren: async () =>

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

@@ -1059,6 +1059,12 @@ export const pages: TuiDocPages = [
         keywords: 'card, card-large, large, block, карточка, блок',
         route: '/experimental/card-large',
     },
+    {
+        section: 'Experimental',
+        title: 'Navigation',
+        keywords: 'шапка, header, sidebar, aside, сайдбар, навигация',
+        route: '/experimental/navigation',
+    },
     {
         section: 'Experimental',
         title: 'Pin',

projects/demo/src/modules/experimental/navigation/examples/1/index.html

@@ -0,0 +1,183 @@
+<header tuiHead>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconGrid"
+        tuiIconButton
+    >
+        Menu
+    </button>
+    <span tuiLogo>
+        <tui-icon icon="tuiIconHome"></tui-icon>
+        A very very long product name
+        <tui-badge>Test</tui-badge>
+    </span>
+    <tui-hosted-dropdown [content]="products">
+        <button
+            appearance="secondary"
+            iconRight="tuiIconChevronDown"
+            tuiButton
+        >
+            <span>A very very long project</span>
+        </button>
+        <ng-template #products>
+            <tui-data-list size="s">
+                <button tuiOption>
+                    A very very long project
+                    <tui-icon
+                        icon="tuiIconCheck"
+                        [style.font-size.em]="1"
+                        [style.margin-left.rem]="0.5"
+                    ></tui-icon>
+                </button>
+                <button tuiOption>Something else</button>
+            </tui-data-list>
+        </ng-template>
+    </tui-hosted-dropdown>
+    <hr />
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconPlus"
+        tuiButton
+    >
+        Create
+    </button>
+    <button
+        iconLeft="tuiIconBell"
+        tuiIconButton
+    >
+        Notifications
+        <tui-badge-notification></tui-badge-notification>
+    </button>
+    <button
+        iconLeft="tuiIconMoreHorizontal"
+        tuiIconButton
+    >
+        More
+    </button>
+    <tui-avatar src="AI"></tui-avatar>
+</header>
+<div [style.display]="'flex'">
+    <aside
+        [style.height.rem]="25"
+        [tuiAside]="expanded"
+    >
+        <header>
+            <button
+                iconLeft="tuiIconHome"
+                tuiButton
+            >
+                <span>A very very long product name</span>
+            </button>
+        </header>
+        <button
+            iconLeft="tuiIconSearch"
+            tuiButton
+        >
+            Search
+        </button>
+        <button
+            iconLeft="tuiIconUsers"
+            tuiAppearance="flat"
+            tuiAppearanceState="hover"
+            tuiButton
+        >
+            Groups
+        </button>
+        <tui-hosted-dropdown
+            [canOpen]="!expanded"
+            [content]="dropdown"
+            [sided]="true"
+            [(open)]="open"
+        >
+            <button
+                iconLeft="tuiIconSettings"
+                iconRight="tuiIconChevronDown"
+                tuiAppearance="flat"
+                tuiButton
+                [tuiAppearanceState]="open ? 'hover' : null"
+                (click)="submenu = expanded && !submenu"
+            >
+                Settings
+            </button>
+            <ng-template #dropdown>
+                <tui-data-list size="s">
+                    <button tuiOption>Account</button>
+                    <button tuiOption>Notifications</button>
+                    <button tuiOption>Privacy</button>
+                </tui-data-list>
+            </ng-template>
+        </tui-hosted-dropdown>
+        <tui-expand [expanded]="expanded && submenu">
+            <button tuiButton>Account</button>
+            <button tuiButton>Notifications</button>
+            <button tuiButton>Privacy</button>
+        </tui-expand>
+        <button
+            iconLeft="tuiIconHeart"
+            tuiButton
+        >
+            <span tuiFade>By default ellipsis is used but you can use fade too</span>
+        </button>
+        <hr />
+        <button
+            iconLeft="tuiIconPlus"
+            tuiButton
+        >
+            Add
+        </button>
+        <footer>
+            <button
+                iconLeft="tuiIconStar"
+                tuiButton
+            >
+                Favorites
+            </button>
+            <button
+                tuiButton
+                [iconLeft]="expanded ? 'tuiIconChevronLeft' : 'tuiIconChevronRight'"
+                (click)="expanded = !expanded"
+            >
+                Collapse
+            </button>
+        </footer>
+    </aside>
+    <main tuiMain>
+        <nav
+            tuiNav
+            [style.position]="'sticky'"
+        >
+            <a routerLink=".">
+                <tui-icon icon="tuiIconChevronLeft"></tui-icon>
+                Back
+            </a>
+            /
+            <strong>Groups</strong>
+            <tui-badge iconLeft="tuiIconLock">Status</tui-badge>
+            <hr />
+            <tui-tabs>
+                <button tuiTab>Default view</button>
+                <button tuiTab>Details</button>
+                <button tuiTab>Followers</button>
+            </tui-tabs>
+            <button
+                appearance="secondary"
+                tuiButton
+            >
+                Secondary
+            </button>
+            <button tuiButton>Primary</button>
+        </nav>
+        <div
+            *tuiRepeatTimes="let index of 10"
+            tuiCardLarge
+            tuiHeader
+            tuiSurface="elevated"
+            [style.margin-bottom.rem]="1.25"
+        >
+            <h2 tuiTitle>
+                Some random content
+                <span tuiSubtitle>A subtitle</span>
+            </h2>
+        </div>
+    </main>
+</div>

projects/demo/src/modules/experimental/navigation/examples/1/index.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-navigation-example-1',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiNavigationExample1 {
+    open = false;
+    expanded = false;
+    submenu = false;
+}

projects/demo/src/modules/experimental/navigation/examples/2/index.html

@@ -0,0 +1,106 @@
+<header tuiHead>
+    <span tuiLogo>
+        Custom color
+        <input
+            tuiToggle
+            type="checkbox"
+            [ngModel]="color"
+            (ngModelChange)="onColor($event)"
+        />
+    </span>
+    <tui-hosted-dropdown content="Set --tui-theme-color for :root and theme-color meta tag to the same color">
+        <button
+            iconRight="tuiIconChevronDown"
+            tuiButton
+        >
+            How to?
+        </button>
+    </tui-hosted-dropdown>
+</header>
+<main tuiMain>
+    <a
+        appearance="icon"
+        iconLeft="tuiIconChevronLeft"
+        size="xs"
+        tuiButton
+    >
+        Back
+    </a>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            <div tuiLogo>
+                <tui-icon icon="tuiIconGitlab"></tui-icon>
+                Research and Development Platform
+                <tui-icon
+                    icon="tuiIconHeart"
+                    tuiBadge
+                ></tui-icon>
+            </div>
+            <div tuiSubtitle>
+                In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the
+                visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used
+                as a placeholder before the final copy is available. It is also used to temporarily replace text in a
+                process called greeking, which allows designers to consider the form of a webpage or publication,
+                without the meaning of the text influencing the design.
+            </div>
+            <div
+                tuiCaption
+                tuiFade
+            >
+                <span>
+                    <tui-icon icon="tuiIconUser"></tui-icon>
+                    Alex Inkin
+                </span>
+                <span>Edited 6 minutes ago</span>
+                <span>
+                    <tui-icon icon="tuiIconLock"></tui-icon>
+                    Private
+                </span>
+            </div>
+        </h1>
+        <aside tuiAccessories>
+            <button
+                appearance="secondary"
+                tuiButton
+            >
+                Secondary
+            </button>
+            <button tuiButton>Primary</button>
+            <button
+                appearance="secondary"
+                iconLeft="tuiIconMoreHorizontal"
+                tuiIconButton
+            >
+                More
+            </button>
+        </aside>
+    </header>
+    <nav tuiNav>
+        <tui-tabs>
+            <button tuiTab>Default view</button>
+            <button tuiTab>Details</button>
+            <button tuiTab>Followers</button>
+        </tui-tabs>
+        <hr />
+        <button tuiButton>Primary</button>
+        <button
+            appearance="secondary"
+            iconLeft="tuiIconMoreHorizontal"
+            tuiIconButton
+        >
+            More
+        </button>
+    </nav>
+    <div
+        *tuiRepeatTimes="let index of 10"
+        tuiCardLarge
+        tuiHeader
+        tuiSurface="elevated"
+        [style.margin-bottom.rem]="1.25"
+    >
+        <h2 tuiTitle>
+            Some random content
+            <span tuiSubtitle>A subtitle</span>
+        </h2>
+    </div>
+</main>

projects/demo/src/modules/experimental/navigation/examples/2/index.ts

@@ -0,0 +1,29 @@
+import {DOCUMENT} from '@angular/common';
+import {Component, Inject} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-navigation-example-2',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiNavigationExample2 {
+    color = false;
+
+    readonly initial =
+        this.doc.head
+            .querySelector('meta[name="theme-color"]')
+            ?.getAttribute('content') || '';
+
+    constructor(@Inject(DOCUMENT) private readonly doc: Document) {}
+
+    onColor(color: boolean): void {
+        this.color = color;
+        this.doc.body.style.setProperty('--tui-theme-color', color ? 'purple' : 'black');
+        this.doc.head
+            .querySelector('meta[name="theme-color"]')
+            ?.setAttribute('content', color ? 'purple' : this.initial);
+    }
+}