chore: add navigation

apps/taiga-lumbermill/src/components/app/app.component.html

@@ -0,0 +1,4 @@
+<tui-root>
+    <app-navigation />
+    <!-- <router-outlet /> -->
+</tui-root>

apps/taiga-lumbermill/src/app/app.component.ts → apps/taiga-lumbermill/src/components/app/app.component.ts

@@ -2,12 +2,12 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiRoot} from '@taiga-ui/core';
 
-import {NxWelcomeComponent} from './nx-welcome.component';
+import {NavigationComponent} from '../navigation/navigation.component';
 
 @Component({
     standalone: true,
     selector: 'app-root',
-    imports: [NxWelcomeComponent, RouterModule, TuiRoot],
+    imports: [RouterModule, TuiRoot, NavigationComponent],
     templateUrl: './app.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/taiga-lumbermill/src/components/app/app.routes.ts

@@ -0,0 +1,8 @@
+import type {Route} from '@angular/router';
+
+import {AppComponent} from './app.component';
+
+export const appRoutes: Route[] = [
+    {path: 'dashboards', component: AppComponent},
+    {path: '**', redirectTo: 'dashboards'},
+];

apps/taiga-lumbermill/src/components/navigation/navigation.component.html

@@ -0,0 +1,148 @@
+<header tuiNavigationHeader>
+    <button
+        appearance="secondary"
+        iconStart="@tui.layout-grid"
+        tuiIconButton
+    >
+        Menu
+    </button>
+    <span tuiNavigationLogo>
+        <tui-icon icon="@tui.home" />
+        <span tuiFade>A very very long product name</span>
+        <tui-badge>Test</tui-badge>
+    </span>
+    <button
+        appearance="secondary"
+        tuiButton
+        tuiChevron
+        tuiDropdownOpen
+        [tuiDropdown]="products"
+    >
+        <span tuiFade>A very very long project</span>
+        <ng-template #products>
+            <tui-data-list size="s">
+                <button tuiOption>
+                    A very very long project
+                    <tui-icon
+                        icon="@tui.check"
+                        [style.font-size.em]="1"
+                        [style.margin-left.rem]="0.5"
+                    />
+                </button>
+                <button tuiOption>Something else</button>
+            </tui-data-list>
+        </ng-template>
+    </button>
+    <hr />
+    <button
+        appearance="secondary"
+        iconStart="@tui.plus"
+        tuiButton
+    >
+        Create
+    </button>
+    <button
+        iconStart="@tui.bell"
+        tuiIconButton
+    >
+        Notifications
+        <tui-badge-notification />
+    </button>
+    <button
+        iconStart="@tui.ellipsis"
+        tuiIconButton
+    >
+        More
+    </button>
+    <tui-avatar src="AI" />
+</header>
+<div [style.display]="'flex'">
+    <aside
+        class="AsideBar"
+        [tuiNavigationAside]="expanded"
+    >
+        <header>
+            <button
+                iconStart="@tui.home"
+                tuiButton
+                tuiHintAside
+            >
+                <span tuiFade>A very very long product name</span>
+            </button>
+        </header>
+        <button
+            iconStart="@tui.search"
+            tuiButton
+            tuiHintAside
+        >
+            Search
+        </button>
+        <a
+            iconStart="@tui.users"
+            routerLinkActive="active"
+            tuiButton
+            tuiHintAside
+            [routerLink]="routes.Navigation"
+        >
+            Groups
+        </a>
+        <button
+            iconStart="@tui.settings"
+            tuiButton
+            [tuiAppearanceState]="open ? 'hover' : null"
+            [tuiChevron]="expanded && submenu"
+            [tuiDropdown]="dropdown"
+            [tuiDropdownEnabled]="!expanded"
+            [tuiDropdownSided]="true"
+            [(tuiDropdownOpen)]="open"
+            (click)="submenu = expanded && !submenu"
+        >
+            Settings
+            <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>
+        </button>
+        <tui-expand [expanded]="expanded && submenu">
+            <button tuiButton>Account</button>
+            <button tuiButton>Notifications</button>
+            <button tuiButton>Privacy</button>
+        </tui-expand>
+        <button
+            iconStart="@tui.heart"
+            tuiButton
+            tuiHintAside
+        >
+            <span tuiFade>By default ellipsis is used but you can use fade too</span>
+        </button>
+        <hr />
+        <button
+            iconStart="@tui.plus"
+            tuiButton
+            tuiHintAside
+        >
+            Add
+        </button>
+        <footer>
+            <button
+                iconStart="@tui.star"
+                tuiButton
+                tuiHintAside
+            >
+                Favorites
+            </button>
+            <button
+                tuiButton
+                tuiHintAside
+                [iconStart]="expanded ? '@tui.chevron-left' : '@tui.chevron-right'"
+                (click)="expanded = !expanded"
+            >
+                {{ expanded ? 'Collapse' : 'Expand' }}
+            </button>
+        </footer>
+    </aside>
+    <main class="show"></main>
+</div>

apps/taiga-lumbermill/src/components/navigation/navigation.component.less

@@ -0,0 +1,12 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.show {
+    height: 200vh;
+}
+
+.AsideBar {
+    height: calc(100vh - 3rem);
+}

apps/taiga-lumbermill/src/components/navigation/navigation.component.spec.ts

@@ -0,0 +1,23 @@
+import type {ComponentFixture} from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
+
+import {NavigationComponent} from './navigation.component';
+
+describe('NavigationComponent', () => {
+    let component: NavigationComponent;
+    let fixture: ComponentFixture<NavigationComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [NavigationComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(NavigationComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

apps/taiga-lumbermill/src/components/navigation/navigation.component.ts

@@ -0,0 +1,63 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {RouterLink, RouterLinkActive} from '@angular/router';
+import {TuiRepeatTimes} from '@taiga-ui/cdk';
+import {
+    TuiAppearance,
+    TuiButton,
+    TuiDataList,
+    TuiDropdown,
+    TuiExpand,
+    TuiIcon,
+    TuiSurface,
+    TuiTitle,
+} from '@taiga-ui/core';
+import {TuiNavigation} from '@taiga-ui/experimental';
+import {
+    TuiAvatar,
+    TuiBadge,
+    TuiBadgeNotification,
+    TuiChevron,
+    TuiFade,
+    TuiTabs,
+} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    selector: 'app-navigation',
+    imports: [
+        CommonModule,
+        TuiNavigation,
+        TuiButton,
+        TuiIcon,
+        TuiChevron,
+        TuiDropdown,
+        TuiFade,
+        TuiDataList,
+        TuiBadgeNotification,
+        TuiAvatar,
+        RouterLink,
+        RouterLinkActive,
+        TuiAppearance,
+        TuiExpand,
+        TuiBadge,
+        TuiTabs,
+        TuiRepeatTimes,
+        TuiCardLarge,
+        TuiHeader,
+        TuiSurface,
+        TuiTitle,
+    ],
+    templateUrl: './navigation.component.html',
+    styleUrl: './navigation.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavigationComponent {
+    protected open = false;
+    protected expanded = false;
+    protected submenu = false;
+    protected readonly routes = {
+        Navigation: '/',
+    };
+}

apps/taiga-lumbermill/src/main.ts

@@ -2,7 +2,7 @@
 
 import {bootstrapApplication} from '@angular/platform-browser';
 
-import {AppComponent} from './app/app.component';
-import {appConfig} from './app/app.config';
+import {AppComponent} from './components/app/app.component';
+import {appConfig} from './components/app/app.config';
 
 bootstrapApplication(AppComponent, appConfig).catch((err: any) => console.error(err));

apps/taiga-lumbermill/src/styles.less

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+.root {
+    height: 100vh;
+}

nx.json

@@ -49,6 +49,9 @@
             "linter": "eslint",
             "style": "less",
             "unitTestRunner": "jest"
+        },
+        "@nx/angular:component": {
+            "style": "css"
         }
     },
     "nxCloudAccessToken": "ODZhMmU0MWQtMDQ1OC00MjRmLTgwODktZTQ3M2FmMmI1MWQ0fHJlYWQtd3JpdGU="