fix(sushi): polish responsive navigation and touch feedback

playground/src/app/app.html

@@ -40,6 +40,36 @@
               <svg lucideMenu class="size-4" aria-hidden="true"></svg>
             </button>
           </div>
+          <a
+            suiButton
+            suiNavbarAction
+            href="https://github.com/RAMEN-Suite/sushi-angular"
+            target="_blank"
+            rel="noreferrer"
+            size="sm"
+            shape="square"
+            severity="neutral"
+            variant="text"
+            class="hidden lg:inline-flex"
+            aria-label="View Sushi Kit on GitHub"
+          >
+            <svg lucideGitFork class="size-4" aria-hidden="true"></svg>
+          </a>
+          <a
+            suiButton
+            suiNavbarAction
+            href="https://www.npmjs.com/package/@sushi-kit/angular"
+            target="_blank"
+            rel="noreferrer"
+            size="sm"
+            shape="square"
+            severity="neutral"
+            variant="text"
+            class="hidden lg:inline-flex"
+            aria-label="View Sushi Kit on npm"
+          >
+            <svg lucidePackage class="size-4" aria-hidden="true"></svg>
+          </a>
           <button
             suiButton
             suiNavbarAction
@@ -96,41 +126,7 @@
     </div>
 
     <ng-template [suiSidebarGroup]="sidebar" let-group>
-      @switch (group.label) {
-        @case ('General') {
-          <svg lucideHouse class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Contribute') {
-          <svg lucideGitPullRequest class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Inputs') {
-          <svg lucideTextCursorInput class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Selection') {
-          <svg lucideListChecks class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Form Structure') {
-          <svg lucideRows3 class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Actions') {
-          <svg lucideMousePointerClick class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Navigation') {
-          <svg lucideNavigation class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Feedback') {
-          <svg lucideMessageCircle class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Data Display') {
-          <svg lucideTableProperties class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Layout') {
-          <svg lucidePanelsTopLeft class="size-3.5" aria-hidden="true"></svg>
-        }
-        @case ('Utilities') {
-          <svg lucideWrench class="size-3.5" aria-hidden="true"></svg>
-        }
-      }
+      <svg [lucideIcon]="group.icon" class="size-3.5" aria-hidden="true"></svg>
       <span>{{ group.heading ?? group.label }}</span>
     </ng-template>
   </sui-sidebar>

playground/src/app/app.navigation.ts

@@ -1,19 +1,36 @@
+import {
+  LucideGitPullRequest,
+  LucideHouse,
+  LucideLayers,
+  LucideListChecks,
+  LucideMessageCircle,
+  LucideMousePointerClick,
+  LucideNavigation,
+  LucidePanelsTopLeft,
+  LucideRows3,
+  LucideTableProperties,
+  LucideTextCursorInput,
+  LucideWrench,
+} from '@lucide/angular';
+import type { LucideIcon } from '@lucide/angular';
 import type { NavbarItem, SidebarGroup } from '@sushi-kit/angular';
 
 export interface NavigationItem {
   readonly label: string;
   readonly path: string;
 }
 
-export interface NavigationGroup {
+interface NavigationGroup {
   readonly dividerBefore?: boolean;
+  readonly icon: LucideIcon;
   readonly label: string;
   readonly items: readonly NavigationItem[];
 }
 
-export const navigation: readonly NavigationGroup[] = [
+const navigation: readonly NavigationGroup[] = [
   {
     dividerBefore: true,
+    icon: LucideTextCursorInput,
     label: 'Inputs',
     items: [
       {
@@ -51,6 +68,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideListChecks,
     label: 'Selection',
     items: [
       {
@@ -96,6 +114,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideRows3,
     label: 'Form Structure',
     items: [
       {
@@ -121,6 +140,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideMousePointerClick,
     label: 'Actions',
     items: [
       {
@@ -134,6 +154,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideNavigation,
     label: 'Navigation',
     items: [
       {
@@ -163,6 +184,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideLayers,
     label: 'Overlays',
     items: [
       {
@@ -184,6 +206,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideMessageCircle,
     label: 'Feedback',
     items: [
       {
@@ -217,6 +240,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideTableProperties,
     label: 'Data Display',
     items: [
       {
@@ -254,6 +278,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucidePanelsTopLeft,
     label: 'Layout',
     items: [
       {
@@ -271,6 +296,7 @@ export const navigation: readonly NavigationGroup[] = [
     ],
   },
   {
+    icon: LucideWrench,
     label: 'Utilities',
     items: [
       {
@@ -297,18 +323,20 @@ export const apiNavigation: readonly NavigationItem[] = navigation
   .flatMap((group: NavigationGroup): readonly NavigationItem[] => group.items)
   .filter((item: NavigationItem): boolean => item.path !== '/icon');
 
-export type SidebarNavigationGroup = SidebarGroup<NavbarItem<string>>;
+export interface SidebarNavigationGroup extends SidebarGroup<NavbarItem<string>> {
+  readonly icon: LucideIcon;
+}
 
-export const overviewNavigation: readonly NavbarItem<string>[] = [{ label: 'Overview', value: '/', routerLink: '/' }];
+const overviewNavigation: readonly NavbarItem<string>[] = [{ label: 'Overview', value: '/', routerLink: '/' }];
 
-export const generalNavigation: readonly NavbarItem<string>[] = [
+const generalNavigation: readonly NavbarItem<string>[] = [
   ...overviewNavigation,
   { label: 'Getting started', value: '/getting-started', routerLink: '/getting-started' },
   { label: 'Styling & themes', value: '/styling-and-themes', routerLink: '/styling-and-themes' },
   { label: 'Theme tokens', value: '/theme-tokens', routerLink: '/theme-tokens' },
 ];
 
-export const contributorNavigation: readonly NavbarItem<string>[] = [
+const contributorNavigation: readonly NavbarItem<string>[] = [
   { label: 'Contribution guide', value: '/contribute', routerLink: '/contribute' },
   { label: 'Component workflow', value: '/contribute/components', routerLink: '/contribute/components' },
   { label: 'Component styling', value: '/contribute/styles', routerLink: '/contribute/styles' },
@@ -317,30 +345,19 @@ export const contributorNavigation: readonly NavbarItem<string>[] = [
   { label: 'Responsible AI', value: '/contribute/ai', routerLink: '/contribute/ai' },
 ];
 
-export const navbarNavigation: readonly SidebarNavigationGroup[] = navigation.map(
-  (group: NavigationGroup): SidebarNavigationGroup => ({
-    dividerBefore: group.dividerBefore,
-    label: group.label,
-    items: group.items.map((item: NavigationItem): NavbarItem<string> => ({
-      label: item.label,
-      value: item.path,
-      routerLink: item.path,
-    })),
-  }),
-);
+const navbarNavigation: readonly SidebarNavigationGroup[] = navigation.map((group: NavigationGroup): SidebarNavigationGroup => ({
+  dividerBefore: group.dividerBefore,
+  icon: group.icon,
+  label: group.label,
+  items: group.items.map((item: NavigationItem): NavbarItem<string> => ({
+    label: item.label,
+    value: item.path,
+    routerLink: item.path,
+  })),
+}));
 
 export const sidebarNavigation: readonly SidebarNavigationGroup[] = [
-  { label: 'General', items: generalNavigation },
-  { label: 'Contribute', items: contributorNavigation },
+  { icon: LucideHouse, label: 'General', items: generalNavigation },
+  { icon: LucideGitPullRequest, label: 'Contribute', items: contributorNavigation },
   ...navbarNavigation,
 ];
-
-export const mobileNavigation: readonly NavbarItem<string>[] = [
-  ...generalNavigation,
-  { label: 'Contribute', value: 'group:Contribute', items: contributorNavigation },
-  ...navbarNavigation.map((group: SidebarNavigationGroup): NavbarItem<string> => ({
-    label: group.label,
-    value: `group:${group.label}`,
-    items: group.items,
-  })),
-];

playground/src/app/app.ts

@@ -14,23 +14,7 @@ import {
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
-import {
-  LucideHouse,
-  LucideGitPullRequest,
-  LucideListChecks,
-  LucideMenu,
-  LucideMessageCircle,
-  LucideMoon,
-  LucideMousePointerClick,
-  LucideNavigation,
-  LucidePanelsTopLeft,
-  LucideRows3,
-  LucideSun,
-  LucideTableProperties,
-  LucideTextCursorInput,
-  LucideWrench,
-  LucideX,
-} from '@lucide/angular';
+import { LucideDynamicIcon, LucideGitFork, LucideMenu, LucideMoon, LucidePackage, LucideSun, LucideX } from '@lucide/angular';
 import {
   Button,
   Drawer,
@@ -60,20 +44,12 @@ type PlaygroundTheme = 'sushi' | 'sushi-dark';
     DrawerClose,
     DrawerContent,
     DrawerTrigger,
-    LucideHouse,
-    LucideGitPullRequest,
-    LucideListChecks,
+    LucideDynamicIcon,
+    LucideGitFork,
     LucideMenu,
-    LucideMessageCircle,
     LucideMoon,
-    LucideMousePointerClick,
-    LucideNavigation,
-    LucidePanelsTopLeft,
-    LucideRows3,
+    LucidePackage,
     LucideSun,
-    LucideTableProperties,
-    LucideTextCursorInput,
-    LucideWrench,
     LucideX,
     Navbar,
     NavbarAction,

playground/src/app/generated/api-reference.generated.ts

@@ -11496,13 +11496,13 @@ export const apiReference: Readonly<{
     templates: [
       {
         name: 'suiSidebarGroup',
-        context: 'SidebarGroupContext<I>',
+        context: 'SidebarGroupContext<I, G>',
         description: 'Customizes visible Sidebar group headings without changing navigation items.',
         members: [
           {
             name: 'groups',
             kind: 'input',
-            type: 'readonly SidebarGroup<I>[] | undefined',
+            type: 'readonly G[] | undefined',
             defaultValue: 'undefined',
             description: 'Group source used to infer custom fields inside the template.',
           },
@@ -11680,18 +11680,18 @@ export const apiReference: Readonly<{
         kind: 'interface',
         source: 'library',
         declaration:
-          'interface SidebarGroupContext<I extends NavbarItem = NavbarItem> {\n  readonly $implicit: SidebarGroup<I>;\n  readonly group: SidebarGroup<I>;\n  readonly collapsed: boolean;\n}',
+          'interface SidebarGroupContext<I extends NavbarItem = NavbarItem, G extends SidebarGroup<I> = SidebarGroup<I>> {\n  readonly $implicit: G;\n  readonly group: G;\n  readonly collapsed: boolean;\n}',
         description: 'Context exposed to a custom Sidebar group-heading template.',
         members: [
           {
             name: '$implicit',
-            type: 'SidebarGroup<I>',
+            type: 'G',
             optional: false,
             description: 'Sidebar group available as the implicit template value.',
           },
           {
             name: 'group',
-            type: 'SidebarGroup<I>',
+            type: 'G',
             optional: false,
             description: 'Sidebar group available by its explicit context name.',
           },
@@ -11709,6 +11709,11 @@ export const apiReference: Readonly<{
             constraint: 'NavbarItem',
             defaultValue: 'NavbarItem',
           },
+          {
+            name: 'G',
+            constraint: 'SidebarGroup<I>',
+            defaultValue: 'SidebarGroup<I>',
+          },
         ],
       },
       {

playground/src/styles.css

@@ -17,7 +17,16 @@
 }
 
 .pg-documentation-navbar .sui-navbar {
-  padding-inline: 0;
+  padding-inline: 1rem;
+}
+
+@media (width < 40rem) {
+  .pg-documentation-navbar .sui-navbar > sui-navbar-menu {
+    position: absolute;
+    left: 50%;
+    margin-inline-start: 0;
+    transform: translateX(-50%);
+  }
 }
 
 .pg-page {
@@ -125,7 +134,11 @@ pg-example-code {
   border-radius: 0;
 }
 
-@media (min-width: 40rem) {
+@media (width >= 40rem) {
+  .pg-documentation-navbar .sui-navbar {
+    padding-inline: 0;
+  }
+
   .pg-page {
     padding: 3.5rem 2rem 6rem;
   }