@svadmin/ui 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/components/AdminApp.svelte

@@ -2,7 +2,7 @@
   // Auto-inject design tokens so consumers don't need to manually import
   import '../app.css';
   import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig } from '@svadmin/core';
+  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem } from '@svadmin/core';
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
@@ -41,6 +41,8 @@
     loginPage?: Snippet;
     /** Override default components via DI */
     components?: Partial<ComponentRegistry>;
+    /** Custom multi-level menu configuration */
+    menu?: MenuItem[];
   }
 
   let {
@@ -55,6 +57,7 @@
     dashboard,
     loginPage,
     components: userComponents,
+    menu,
   }: Props = $props();
 
   // Default component registry
@@ -143,7 +146,7 @@
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
     <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
-    <Layout {title}>
+    <Layout {title} {menu}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
       {#if route === '/'}

package/src/components/Layout.svelte

@@ -10,7 +10,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import { t } from '@svadmin/core/i18n';
   import { getAuthProvider } from '@svadmin/core';
-  import type { Identity } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { currentPath } from '@svadmin/core/router';
   import { Skeleton } from './ui/skeleton/index.js';
@@ -22,7 +22,7 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin' }: { children: Snippet; title?: string } = $props();
+  let { children, title = 'Admin', menu }: { children: Snippet; title?: string; menu?: MenuItem[] } = $props();
 
   let hasAuth = true;
   let auth: ReturnType<typeof getAuthProvider> | null = null;
@@ -91,13 +91,13 @@
   <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
-      <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+      <Sidebar {collapsed} {identity} {title} {menu} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
     <!-- Mobile sidebar via Sheet -->
     <Sheet.Root bind:open={mobileMenuOpen} side="left">
       <div class="md:hidden">
-        <Sidebar collapsed={false} {identity} {title} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+        <Sidebar collapsed={false} {identity} {title} {menu} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 

package/src/components/Sidebar.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { getResources, canAccessAsync } from '@svadmin/core';
-  import type { Identity } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
   import { currentPath, navigate } from '@svadmin/core/router';
   import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
   import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Tooltip from './ui/tooltip/index.js';
+  import SidebarItem from './SidebarItem.svelte';
 
   import { ScrollArea } from './ui/scroll-area/index.js';
   import * as Collapsible from './ui/collapsible/index.js';
@@ -16,13 +17,14 @@
     ChevronLeft, ChevronDown, LogOut, Sun, Moon, Palette
   } from 'lucide-svelte';
 
-  let { collapsed, identity, title, onToggle, onLogout } = $props<{
+  let { collapsed, identity, title, onToggle, onLogout, menu }: {
     collapsed: boolean;
     identity: Identity | null;
     title: string;
     onToggle: () => void;
     onLogout: () => void;
-  }>();
+    menu?: MenuItem[];
+  } = $props();
 
   const resources = getResources();
 
@@ -176,7 +178,14 @@
   </div>
 
   <ScrollArea class="flex-1">
-  <nav aria-label="Main menu" class="py-4 px-3 space-y-4">
+  <nav aria-label="Main menu" class="py-4 px-3 space-y-1">
+    {#if menu && menu.length > 0}
+      <!-- Custom multi-level menu -->
+      {#each menu as item}
+        <SidebarItem {item} currentPath={path} {collapsed} depth={0} />
+      {/each}
+    {:else}
+    <!-- Auto-generated menu from resources (fallback) -->
     {#each navGroups as group}
       {#if group.name && !collapsed}
         <!-- Grouped section with Collapsible -->
@@ -248,6 +257,7 @@
         {/each}
       {/if}
     {/each}
+    {/if}
   </nav>
   </ScrollArea>
 

package/src/components/SidebarItem.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { MenuItem } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import * as Collapsible from './ui/collapsible/index.js';
+  import * as Tooltip from './ui/tooltip/index.js';
+  import SidebarItem from './SidebarItem.svelte';
+  import {
+    LayoutDashboard, FileText, Users, Settings, Home,
+    ChevronDown, Folder, ExternalLink, type Icon as LucideIcon,
+  } from 'lucide-svelte';
+
+  let { item, currentPath, collapsed = false, depth = 0 }: {
+    item: MenuItem;
+    currentPath: string;
+    collapsed?: boolean;
+    depth?: number;
+  } = $props();
+
+  const iconMap: Record<string, typeof LayoutDashboard> = {
+    dashboard: LayoutDashboard,
+    posts: FileText,
+    users: Users,
+    settings: Settings,
+    home: Home,
+    folder: Folder,
+  };
+
+  function getIcon(name?: string): typeof LayoutDashboard {
+    if (!name) return depth === 0 ? Settings : Folder;
+    return iconMap[name] ?? Settings;
+  }
+
+  function getLabel(mi: MenuItem): string {
+    return mi.label ?? mi.name;
+  }
+
+  function isActive(itemHref: string | undefined): boolean {
+    if (!itemHref) return false;
+    if (itemHref === '/') return currentPath === '/';
+    return currentPath.startsWith(itemHref);
+  }
+
+  /** Check if any child (recursively) is active — used to auto-open parent groups */
+  function hasActiveChild(menuItem: MenuItem): boolean {
+    if (isActive(menuItem.href)) return true;
+    return menuItem.children?.some((c: MenuItem) => hasActiveChild(c)) ?? false;
+  }
+
+  const hasChildren = $derived(item.children && item.children.length > 0);
+  const active = $derived(isActive(item.href));
+  const childActive = $derived(hasActiveChild(item));
+  const isExternal = $derived(item.target === '_blank');
+
+  // Track open state — auto-open if a child is active
+  let isOpen = $state(false);
+  $effect(() => { if (childActive) isOpen = true; });
+
+  const Icon = $derived(getIcon(item.icon));
+  const label = $derived(getLabel(item));
+</script>
+
+{#if item.meta?.hidden}
+  <!-- hidden item, render nothing -->
+{:else if hasChildren && !collapsed}
+  <!-- Parent node with children: render as collapsible group -->
+  <Collapsible.Root bind:open={isOpen}>
+    <Collapsible.Trigger
+      class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+      {childActive
+        ? 'text-sidebar-foreground bg-sidebar-accent/30'
+        : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+      style="padding-left: {12 + depth * 12}px"
+    >
+      <span class="flex items-center gap-3">
+        <Icon class="h-4 w-4 flex-shrink-0" />
+        <span>{label}</span>
+      </span>
+      <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+    </Collapsible.Trigger>
+    <Collapsible.Content>
+      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px">
+        {#each item.children as child}
+          <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
+        {/each}
+      </div>
+    </Collapsible.Content>
+  </Collapsible.Root>
+{:else if collapsed}
+  <!-- Collapsed sidebar: icon-only with tooltip -->
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      {#snippet child({ props }: { props: Record<string, unknown> })}
+        <a
+          {...props}
+          href={item.href ? `#${item.href}` : undefined}
+          target={isExternal ? '_blank' : undefined}
+          rel={isExternal ? 'noopener noreferrer' : undefined}
+          class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+          {active
+            ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+        >
+          <Icon class="h-4 w-4 flex-shrink-0" />
+        </a>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content side="right">
+      {label}
+    </Tooltip.Content>
+  </Tooltip.Root>
+{:else}
+  <!-- Leaf node: render as a link -->
+  <a
+    href={item.href ? `#${item.href}` : undefined}
+    target={isExternal ? '_blank' : undefined}
+    rel={isExternal ? 'noopener noreferrer' : undefined}
+    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+    {active
+      ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+    style="padding-left: {12 + depth * 12}px"
+  >
+    <Icon class="h-4 w-4 flex-shrink-0" />
+    <span class="flex-1">{label}</span>
+    {#if isExternal}
+      <ExternalLink class="h-3 w-3 opacity-50" />
+    {/if}
+  </a>
+{/if}