feat: implement top navigation (#2805)

* feat: implement top navigation

* chore: fix order

web/projects/marketplace/src/components/menu/menu.component.html

@@ -1,13 +1,13 @@
 <header>
   <div class="title">
     <store-icon
-      [class.tui-skeleton]="!registry"
-      [class.tui-skeleton_rounded]="!registry"
+      [tuiSkeleton]="!registry"
+      [style.border-radius.%]="!registry ? 100 : null"
       size="60px"
       [url]="registry?.url || ''"
       [marketplace]="iconConfig"
     />
-    <h1 [class.tui-skeleton]="!registry">
+    <h1 [tuiSkeleton]="!registry">
       {{ registry?.info?.name || 'Unnamed Registry' }}
     </h1>
     <!-- change registry modal -->
@@ -31,19 +31,18 @@ <h1 [class.tui-skeleton]="!registry">
       >
         <store-icon
           size="42px"
-          [style.height]="'42px'"
-          [style.border-radius]="'100%'"
+          [style.height.px]="42"
+          [style.border-radius.%]="100"
           [url]="registry?.url || ''"
           [marketplace]="iconConfig"
-          [class.tui-skeleton]="!registry"
-          [class.tui-skeleton_rounded]="!registry"
+          [tuiSkeleton]="!registry"
         />
         <nav
           *tuiSidebar="open; direction: 'right'; autoWidth: true"
           class="nav-mobile-sidebar divide-bar"
         >
           <div class="nav-mobile-sidebar-top">
-            <h1 [class.tui-skeleton]="!registry">
+            <h1 [tuiSkeleton]="!registry">
               {{ registry?.info?.name }}
             </h1>
             <button

web/projects/marketplace/src/components/menu/menu.component.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { SharedPipesModule } from '@start9labs/shared'
+import { TuiSkeleton } from '@taiga-ui/kit'
 
 import { MenuComponent } from './menu.component'
 import { TuiLoader, TuiIcon, TuiButton, TuiAppearance } from '@taiga-ui/core'
@@ -25,6 +26,7 @@ import { StoreIconComponentModule } from '../store-icon/store-icon.component.mod
     TuiLet,
     TuiAppearance,
     TuiIcon,
+    TuiSkeleton,
   ],
   declarations: [MenuComponent],
   exports: [MenuComponent],

web/projects/marketplace/src/components/store-icon/store-icon.component.ts

@@ -19,6 +19,7 @@ import { MarketplaceConfig, sameUrl } from '@start9labs/shared'
       />
     </ng-template>
   `,
+  styles: ':host { overflow: hidden; }',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StoreIconComponent {

web/projects/marketplace/src/pages/list/categories/categories.component.ts

@@ -39,11 +39,11 @@ export class CategoriesComponent {
   readonly categoryChange = new EventEmitter<string>()
 
   readonly fallback: Record<string, T.Category> = {
-    a: { name: 'a', description: { short: 'a', long: 'a' } },
-    b: { name: 'a', description: { short: 'a', long: 'a' } },
-    c: { name: 'a', description: { short: 'a', long: 'a' } },
-    d: { name: 'a', description: { short: 'a', long: 'a' } },
-    e: { name: 'a', description: { short: 'a', long: 'a' } },
+    a: { name: '', description: { short: 'a', long: 'a' } },
+    b: { name: '', description: { short: 'a', long: 'a' } },
+    c: { name: '', description: { short: 'a', long: 'a' } },
+    d: { name: '', description: { short: 'a', long: 'a' } },
+    e: { name: '', description: { short: 'a', long: 'a' } },
   }
 
   switchCategory(category: string): void {

web/projects/ui/src/app/app.component.scss

@@ -9,7 +9,6 @@ tui-root {
   @include transition(filter);
   height: 100%;
   font-family: 'Open Sans', sans-serif;
-  --tui-skeleton-radius: 1rem;
 
   &.offline {
     filter: saturate(0.75) contrast(0.85);