chore: temporary change nav

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

@@ -4,63 +4,54 @@ export const appRoutes: Route[] = [
     {
         path: 'dashboards',
         loadComponent: async () =>
-            import('../../dashboards/dashboards/dashboards.component').then(
-                (mod) => mod.DashboardsComponent,
-            ),
-        children: [
-            {
-                path: '',
-                loadComponent: async () =>
-                    import(
-                        '../../components/dashboards-list/dashboards-list.component'
-                    ).then((mod) => mod.DashboardsListComponent),
-                data: {title: ''},
-            },
-            {
-                path: 'iot',
-                loadComponent: async () =>
-                    import('../../dashboards/iot/iot.component').then(
-                        (mod) => mod.IotComponent,
-                    ),
-                data: {title: 'Iot'},
-            },
-            {
-                path: 'crypto',
-                loadComponent: async () =>
-                    import('../../dashboards/crypto/crypto.component').then(
-                        (mod) => mod.CryptoComponent,
-                    ),
-                data: {title: 'Crypto'},
-            },
-        ],
+            import('../list/list.component').then((mod) => mod.ListComponent),
     },
     {
-        path: 'theme',
+        path: 'dashboards/iot',
         loadComponent: async () =>
-            import('../../features/theme-generator/theme-generator.component').then(
-                (mod) => mod.ThemeGeneratorComponent,
-            ),
+            import('../../dashboards/iot/iot.component').then((mod) => mod.IotComponent),
+        data: {title: 'Iot'},
     },
     {
-        path: '',
+        path: 'dashboards/crypto',
         loadComponent: async () =>
-            import('../../components/common-page/common-page.component').then(
-                (mod) => mod.CommonPageComponent,
+            import('../../dashboards/crypto/crypto.component').then(
+                (mod) => mod.CryptoComponent,
             ),
+        data: {title: 'Crypto'},
+    },
+    {
+        path: 'pages',
+        loadComponent: async () =>
+            import('../list/list.component').then((mod) => mod.ListComponent),
     },
     {
-        path: 'login',
+        path: 'pages/login',
         loadComponent: async () =>
             import('../../features/login/login.component').then(
                 (mod) => mod.LoginComponent,
             ),
     },
     {
-        path: 'sign-up',
+        path: 'pages/sign-up',
         loadComponent: async () =>
             import('../../features/sign-up/sign-up.component').then(
                 (mod) => mod.SignUpComponent,
             ),
     },
+    {
+        path: 'color-generator',
+        loadComponent: async () =>
+            import('../../features/theme-generator/theme-generator.component').then(
+                (mod) => mod.ThemeGeneratorComponent,
+            ),
+    },
+    {
+        path: '',
+        loadComponent: async () =>
+            import('../../components/common-page/common-page.component').then(
+                (mod) => mod.CommonPageComponent,
+            ),
+    },
     {path: '**', redirectTo: 'dashboards'},
 ];

apps/taiga-lumbermill/src/components/common-page/common-page.component.html

@@ -46,9 +46,11 @@ <h2 tuiTitle>
         </div>
     </button>
 
-    <div
+    <button
+        routerLink="/pages"
         tuiCardLarge
         tuiSurface="elevated"
+        type="button"
     >
         <tui-avatar
             appearance="opposite"
@@ -58,10 +60,10 @@ <h2 tuiTitle>
             Pages
             <div tuiSubtitle>Some common pages such as login, registration</div>
         </div>
-    </div>
+    </button>
 
     <button
-        routerLink="/theme"
+        routerLink="/color-generator"
         tuiCardLarge
         tuiSurface="elevated"
         type="button"

apps/taiga-lumbermill/src/components/common-page/common-page.component.less

@@ -22,10 +22,14 @@
     align-items: baseline;
     justify-content: space-evenly;
     flex-wrap: wrap;
-    margin-top: 5rem;
+    margin-top: 3rem;
     gap: 1rem;
 
     [tuiCardLarge] {
-        inline-size: 25rem;
+        inline-size: 100%;
+
+        :host-context([data-platform='web']) & {
+            inline-size: 25rem;
+        }
     }
 }

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

@@ -0,0 +1,28 @@
+<nav
+    tuiNavigationNav
+    [style.position]="'sticky'"
+>
+    <a routerLink="/">
+        <tui-icon icon="@tui.chevron-left" />
+        Back
+    </a>
+    /
+    <span tuiNavigationLogo>
+        <span tuiFade>{{ type() }}</span>
+    </span>
+    <hr />
+</nav>
+
+@for (card of list(); track $index) {
+    <a
+        tuiCardLarge
+        tuiHeader
+        tuiSurface="elevated"
+        [routerLink]="card.link"
+    >
+        <h2 tuiTitle>
+            {{ card.title }}
+            <span tuiSubtitle>{{ card.description }}</span>
+        </h2>
+    </a>
+}

apps/taiga-lumbermill/src/components/dashboards-list/dashboards-list.component.less → apps/taiga-lumbermill/src/components/list/list.component.less

@@ -1,6 +1,5 @@
 :host {
     display: flex;
-    padding-top: 1rem;
     flex-direction: column;
     gap: 1rem;
 }

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

@@ -0,0 +1,72 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {NavigationEnd, Router, RouterLink, RouterOutlet} from '@angular/router';
+import {TuiIcon, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiCardLarge, TuiHeader, TuiLogoComponent, TuiNavigation} from '@taiga-ui/layout';
+import {filter, map, startWith} from 'rxjs';
+
+interface CardData {
+    readonly title: string;
+    readonly link: string;
+    readonly description: string;
+}
+
+const LIST: {Dashboards: CardData[]; Pages: CardData[]} = {
+    Dashboards: [
+        {
+            title: 'Iot Dashboard',
+            link: '/dashboards/iot',
+            description: 'Smart home dashboard',
+        },
+        {
+            title: 'Crypto Dashboard',
+            link: '/dashboards/crypto',
+            description: 'Crypto token dashboard',
+        },
+    ],
+    Pages: [
+        {
+            title: 'Login',
+            link: '/pages/login',
+            description: 'Ready to use login page',
+        },
+        {
+            title: 'Sign up',
+            link: '/pages/login',
+            description: 'Ready to use registration page',
+        },
+    ],
+};
+
+@Component({
+    standalone: true,
+    selector: 'lmb-dashboards-list',
+    imports: [
+        CommonModule,
+        RouterLink,
+        RouterOutlet,
+        TuiCardLarge,
+        TuiHeader,
+        TuiIcon,
+        TuiLogoComponent,
+        TuiNavigation,
+        TuiSurface,
+        TuiTitle,
+    ],
+    templateUrl: './list.component.html',
+    styleUrl: './list.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ListComponent {
+    protected readonly router = inject(Router);
+    protected readonly type = toSignal(
+        this.router.events.pipe(
+            filter((event) => event instanceof NavigationEnd),
+            startWith(null),
+            map(() => (this.router.url.includes('dashboards') ? 'Dashboards' : 'Pages')),
+        ),
+    );
+
+    protected readonly list = computed(() => LIST[this.type() ?? 'Pages']);
+}

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

@@ -15,7 +15,7 @@
             >
                 <button
                     iconStart="@tui.palette"
-                    routerLink="/theme"
+                    routerLink="/color-generator"
                     tuiOption
                     type="button"
                 >
@@ -39,15 +39,15 @@
                 </button>
                 <button
                     iconStart="@tui.log-in"
-                    routerLink="/theme"
+                    routerLink="/color-generator"
                     tuiOption
                     type="button"
                 >
                     Log in
                 </button>
                 <button
                     iconStart="@tui.key-round"
-                    routerLink="/theme"
+                    routerLink="/color-generator"
                     tuiOption
                     type="button"
                 >
@@ -60,7 +60,7 @@
         <img
             alt="logo"
             height="32px"
-            src="/logo-white-transparent.png"
+            src="./logo-white-transparent.png"
         />
         Taiga Lumbermill
     </span>
@@ -141,15 +141,15 @@
                 <ng-template>
                     <button
                         iconStart="@tui.log-in"
-                        routerLink="/login"
+                        routerLink="pages/login"
                         tuiAsideItem
                         type="button"
                     >
                         Log in
                     </button>
                     <button
                         iconStart="@tui.key-round"
-                        routerLink="/sign-up"
+                        routerLink="pages/sign-up"
                         tuiAsideItem
                         type="button"
                     >
@@ -161,7 +161,7 @@
         <hr />
         <button
             iconStart="@tui.palette"
-            routerLink="/theme"
+            routerLink="/color-generator"
             tuiAsideItem
             type="button"
         >

apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.html

@@ -1,3 +1,18 @@
+<nav
+    tuiNavigationNav
+    [style.position]="'sticky'"
+>
+    <a routerLink="/dashboards">
+        <tui-icon icon="@tui.chevron-left" />
+        Back
+    </a>
+    /
+    <span tuiNavigationLogo>
+        <span tuiFade>Crypto</span>
+    </span>
+    <hr />
+</nav>
+
 <div class="layout">
     <div class="left">
         <lmb-prices class="" />