@wilshop/dashboard 3.5.2

package/src/lib/components/layout/nav-main.tsx

@@ -0,0 +1,331 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+} from '@/vdb/components/ui/sidebar.js';
+import {
+    NavMenuItem,
+    NavMenuSection,
+    NavMenuSectionPlacement,
+} from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { useLingui } from '@lingui/react';
+import { Link, useRouter, useRouterState } from '@tanstack/react-router';
+import { ChevronRight } from 'lucide-react';
+import * as React from 'react';
+import { NavItemWrapper } from './nav-item-wrapper.js';
+
+// Utility to sort items & sections by the optional `order` prop (ascending) and then alphabetically by title
+function sortByOrder<T extends { order?: number; title: string }>(a: T, b: T) {
+    const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+    const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+    if (orderA === orderB) {
+        return a.title.localeCompare(b.title);
+    }
+    return orderA - orderB;
+}
+
+/**
+ * Escapes special regex characters in a string to be used as a literal pattern
+ */
+function escapeRegexChars(str: string): string {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavMenuItem> }>) {
+    const router = useRouter();
+    const routerState = useRouterState();
+    const { hasPermissions } = usePermissions();
+    const { i18n } = useLingui();
+    const currentPath = routerState.location.pathname;
+    const basePath = router.basepath || '';
+
+    // Helper to check if a path is active
+    const isPathActive = React.useCallback(
+        (itemUrl: string) => {
+            // Remove basepath prefix from current path for comparison
+            const normalizedCurrentPath = basePath
+                ? currentPath.replace(new RegExp(`^${escapeRegexChars(basePath)}`), '')
+                : currentPath;
+
+            // Ensure normalized path starts with /
+            const cleanPath = normalizedCurrentPath.startsWith('/')
+                ? normalizedCurrentPath
+                : `/${normalizedCurrentPath}`;
+
+            // Special handling for root path
+            if (itemUrl === '/') {
+                return cleanPath === '/' || cleanPath === '';
+            }
+
+            // For other paths, check exact match or prefix match
+            return cleanPath === itemUrl || cleanPath.startsWith(`${itemUrl}/`);
+        },
+        [currentPath, basePath],
+    );
+
+    // Helper to find sections containing active routes
+    const findActiveSections = React.useCallback(
+        (sections: Array<NavMenuSection | NavMenuItem>) => {
+            const activeTopSections = new Set<string>();
+            let activeBottomSection: string | null = null;
+
+            for (const section of sections) {
+                if ('items' in section && section.items) {
+                    const hasActiveItem = section.items.some(item => isPathActive(item.url));
+                    if (hasActiveItem) {
+                        if (section.placement === 'top') {
+                            activeTopSections.add(section.id);
+                        } else if (section.placement === 'bottom' && !activeBottomSection) {
+                            activeBottomSection = section.id;
+                        }
+                    }
+                }
+            }
+
+            return { activeTopSections, activeBottomSection };
+        },
+        [isPathActive],
+    );
+
+    // Initialize state with active sections on mount
+    const [openBottomSectionId, setOpenBottomSectionId] = React.useState<string | null>(() => {
+        const { activeBottomSection } = findActiveSections(items);
+        return activeBottomSection;
+    });
+
+    const [openTopSectionIds, setOpenTopSectionIds] = React.useState<Set<string>>(() => {
+        const { activeTopSections } = findActiveSections(items);
+        return activeTopSections;
+    });
+
+    // Helper to check if an item is allowed based on permissions
+    const isItemAllowed = React.useCallback(
+        (item: NavMenuItem) => {
+            if (!item.requiresPermission) {
+                return true;
+            }
+            const permissions = Array.isArray(item.requiresPermission)
+                ? item.requiresPermission
+                : [item.requiresPermission];
+            return hasPermissions(permissions);
+        },
+        [hasPermissions],
+    );
+
+    // Helper to build a sorted list of sections for a given placement, memoized for stability
+    const getSortedSections = React.useCallback(
+        (placement: NavMenuSectionPlacement) => {
+            return items
+                .filter(item => item.placement === placement)
+                .slice()
+                .sort(sortByOrder)
+                .map(section => {
+                    if ('items' in section) {
+                        // Filter items based on permissions
+                        const allowedItems = (section.items ?? []).filter(isItemAllowed).sort(sortByOrder);
+                        return { ...section, items: allowedItems };
+                    }
+                    return section;
+                })
+                .filter(section => {
+                    // Drop sections that have no items after permission filtering
+                    if ('items' in section) {
+                        return section.items && section.items.length > 0;
+                    }
+                    // For single items, check if they're allowed
+                    return isItemAllowed(section as NavMenuItem);
+                });
+        },
+        [items, isItemAllowed],
+    );
+
+    const topSections = React.useMemo(() => getSortedSections('top'), [getSortedSections]);
+    const bottomSections = React.useMemo(() => getSortedSections('bottom'), [getSortedSections]);
+
+    // Handle top section open/close (only one section open at a time)
+    const handleTopSectionToggle = (sectionId: string, isOpen: boolean) => {
+        if (isOpen) {
+            // When opening a section, close all others
+            setOpenTopSectionIds(new Set([sectionId]));
+        } else {
+            // When closing a section, remove it from the set
+            setOpenTopSectionIds(new Set());
+        }
+    };
+
+    // Handle bottom section open/close
+    const handleBottomSectionToggle = (sectionId: string, isOpen: boolean) => {
+        if (isOpen) {
+            setOpenBottomSectionId(sectionId);
+        } else if (openBottomSectionId === sectionId) {
+            setOpenBottomSectionId(null);
+        }
+    };
+
+    // Update open sections when route changes (for client-side navigation)
+    React.useEffect(() => {
+        const { activeTopSections, activeBottomSection } = findActiveSections(items);
+
+        // Replace open sections with only the active one
+        setOpenTopSectionIds(activeTopSections);
+
+        if (activeBottomSection) {
+            setOpenBottomSectionId(activeBottomSection);
+        }
+    }, [currentPath, items, findActiveSections]);
+
+    // Render a top navigation section
+    const renderTopSection = (item: NavMenuSection | NavMenuItem) => {
+        if ('url' in item) {
+            return (
+                <NavItemWrapper key={item.id} locationId={item.id} order={item.order} offset={true}>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            tooltip={i18n.t(item.title)}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
+                            <Link to={item.url}>
+                                {item.icon && <item.icon />}
+                                <span>{i18n.t(item.title)}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </NavItemWrapper>
+            );
+        }
+
+        return (
+            <NavItemWrapper key={item.id} locationId={item.id} order={item.order} offset={true}>
+                <Collapsible
+                    asChild
+                    open={openTopSectionIds.has(item.id)}
+                    onOpenChange={isOpen => handleTopSectionToggle(item.id, isOpen)}
+                    className="group/collapsible"
+                >
+                    <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                            <SidebarMenuButton tooltip={item.title}>
+                                {item.icon && <item.icon />}
+                                <span>{i18n.t(item.title)}</span>
+                                <ChevronRight className="ms-auto transition-transform duration-200 rtl:rotate-180 group-data-[state=open]/collapsible:rotate-90" />
+                            </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                            <SidebarMenuSub>
+                                {item.items?.map(subItem => (
+                                    <NavItemWrapper
+                                        key={subItem.id}
+                                        locationId={subItem.id}
+                                        order={subItem.order}
+                                        parentLocationId={item.id}
+                                    >
+                                        <SidebarMenuSubItem>
+                                            <SidebarMenuSubButton
+                                                asChild
+                                                isActive={isPathActive(subItem.url)}
+                                            >
+                                                <Link to={subItem.url}>
+                                                    <span>{i18n.t(subItem.title)}</span>
+                                                </Link>
+                                            </SidebarMenuSubButton>
+                                        </SidebarMenuSubItem>
+                                    </NavItemWrapper>
+                                ))}
+                            </SidebarMenuSub>
+                        </CollapsibleContent>
+                    </SidebarMenuItem>
+                </Collapsible>
+            </NavItemWrapper>
+        );
+    };
+
+    // Render a bottom navigation section with controlled open state
+    const renderBottomSection = (item: NavMenuSection | NavMenuItem) => {
+        if ('url' in item) {
+            return (
+                <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            tooltip={i18n.t(item.title)}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
+                            <Link to={item.url}>
+                                {item.icon && <item.icon />}
+                                <span>{i18n.t(item.title)}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </NavItemWrapper>
+            );
+        }
+        return (
+            <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                <Collapsible
+                    asChild
+                    open={openBottomSectionId === item.id}
+                    onOpenChange={isOpen => handleBottomSectionToggle(item.id, isOpen)}
+                    className="group/collapsible"
+                >
+                    <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                            <SidebarMenuButton tooltip={i18n.t(item.title)}>
+                                {item.icon && <item.icon />}
+                                <span>{i18n.t(item.title)}</span>
+                                <ChevronRight className="ms-auto transition-transform duration-200 rtl:rotate-180 group-data-[state=open]/collapsible:rotate-90" />
+                            </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                            <SidebarMenuSub>
+                                {item.items?.map(subItem => (
+                                    <NavItemWrapper
+                                        key={i18n.t(subItem.title)}
+                                        locationId={subItem.id}
+                                        order={subItem.order}
+                                        parentLocationId={item.id}
+                                    >
+                                        <SidebarMenuSubItem>
+                                            <SidebarMenuSubButton
+                                                asChild
+                                                isActive={isPathActive(subItem.url)}
+                                            >
+                                                <Link to={subItem.url}>
+                                                    <span>{i18n.t(subItem.title)}</span>
+                                                </Link>
+                                            </SidebarMenuSubButton>
+                                        </SidebarMenuSubItem>
+                                    </NavItemWrapper>
+                                ))}
+                            </SidebarMenuSub>
+                        </CollapsibleContent>
+                    </SidebarMenuItem>
+                </Collapsible>
+            </NavItemWrapper>
+        );
+    };
+
+    return (
+        <>
+            {/* Top sections */}
+            <SidebarGroup>
+                <SidebarMenu>{topSections.map(renderTopSection)}</SidebarMenu>
+            </SidebarGroup>
+
+            {/* Bottom sections - will be pushed to the bottom by CSS */}
+            {bottomSections.length ? (
+                <SidebarGroup className="mt-auto">
+                    <SidebarGroupLabel>Administration</SidebarGroupLabel>
+                    <SidebarMenu>{bottomSections.map(renderBottomSection)}</SidebarMenu>
+                </SidebarGroup>
+            ) : null}
+        </>
+    );
+}

package/src/lib/components/layout/nav-projects.tsx

@@ -0,0 +1,81 @@
+import { Folder, Forward, MoreHorizontal, Trash2, type LucideIcon } from 'lucide-react';
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from '@/vdb/components/ui/sidebar.js';
+
+export function NavProjects({
+    projects,
+}: {
+    projects: {
+        name: string;
+        url: string;
+        icon: LucideIcon;
+    }[];
+}) {
+    const { isMobile } = useSidebar();
+
+    return (
+        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+            <SidebarGroupLabel>Projects</SidebarGroupLabel>
+            <SidebarMenu>
+                {projects.map(item => (
+                    <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton asChild>
+                            <a href={item.url}>
+                                <item.icon />
+                                <span>{item.name}</span>
+                            </a>
+                        </SidebarMenuButton>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <SidebarMenuAction showOnHover>
+                                    <MoreHorizontal />
+                                    <span className="sr-only">More</span>
+                                </SidebarMenuAction>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                                className="w-48 rounded-lg"
+                                side={isMobile ? 'bottom' : 'right'}
+                                align={isMobile ? 'end' : 'start'}
+                            >
+                                <DropdownMenuItem>
+                                    <Folder className="text-muted-foreground" />
+                                    <span>View Project</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem>
+                                    <Forward className="text-muted-foreground" />
+                                    <span>Share Project</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem>
+                                    <Trash2 className="text-muted-foreground" />
+                                    <span>Delete Project</span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </SidebarMenuItem>
+                ))}
+                <SidebarMenuItem>
+                    <SidebarMenuButton className="text-sidebar-foreground/70">
+                        <MoreHorizontal className="text-sidebar-foreground/70" />
+                        <span>More</span>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            </SidebarMenu>
+        </SidebarGroup>
+    );
+}

package/src/lib/components/layout/nav-user.tsx

@@ -0,0 +1,180 @@
+import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { Link, useNavigate, useRouter } from '@tanstack/react-router';
+import { ChevronsUpDown, LogOut, Monitor, Moon, Sparkles, Sun } from 'lucide-react';
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/vdb/components/ui/sidebar.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Theme } from '@/vdb/providers/theme-provider.js';
+import { Trans } from '@lingui/react/macro';
+import { useMemo } from 'react';
+import { Dialog, DialogTrigger } from '../ui/dialog.js';
+import { LanguageDialog } from './language-dialog.js';
+
+export function NavUser() {
+    const { isMobile, state } = useSidebar();
+    const router = useRouter();
+    const navigate = useNavigate();
+    const { humanReadableLanguage } = useDisplayLocale();
+    const { user, ...auth } = useAuth();
+    const { settings, setTheme, setDevMode } = useUserSettings();
+
+    const handleLogout = () => {
+        auth.logout().then(() => {
+            router.invalidate().finally(() => {
+                navigate({ to: '/login' });
+            });
+        });
+    };
+
+    const avatarFallback = useMemo(() => {
+        return user?.firstName?.charAt(0) ?? '' + user?.lastName?.charAt(0) ?? '';
+    }, [user]);
+
+    if (!user) {
+        return <></>;
+    }
+
+    const isDevMode = (import.meta as any).env?.MODE === 'development';
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <Dialog>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <SidebarMenuButton
+                                size="lg"
+                                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                            >
+                                <div className="relative flex rounded-lg border justify-center items-center w-8 h-8">
+                                    {avatarFallback}
+                                </div>
+                                {state === 'expanded' ? (
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                        <span className="truncate font-semibold">
+                                            {user.firstName} {user.lastName}
+                                        </span>
+                                        <span className="truncate text-xs">{user.emailAddress}</span>
+                                    </div>
+                                ) : null}
+                                {state === 'expanded' ? <ChevronsUpDown className="ml-auto size-4" /> : null}
+                            </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                            side={isMobile ? 'bottom' : 'right'}
+                            align="end"
+                            sideOffset={4}
+                        >
+                            <DropdownMenuLabel className="p-0 font-normal">
+                                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                        <span className="truncate font-semibold">
+                                            {user.firstName} {user.lastName}
+                                        </span>
+                                        <span className="truncate text-xs">{user.emailAddress}</span>
+                                    </div>
+                                </div>
+                            </DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem asChild>
+                                    <a href="https://vendure.io/pricing" target="_blank">
+                                        <Sparkles />
+                                        <Trans>Explore Enterprise Edition</Trans>
+                                    </a>
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem asChild>
+                                    <Link to="/profile">
+                                        <Trans>Profile</Trans>
+                                    </Link>
+                                </DropdownMenuItem>
+                                <DialogTrigger asChild>
+                                    <DropdownMenuItem className="flex gap-2">
+                                        <div>
+                                            <Trans>Language</Trans>
+                                        </div>
+                                        <div className="text-muted-foreground">{humanReadableLanguage}</div>
+                                    </DropdownMenuItem>
+                                </DialogTrigger>
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>
+                                        <Trans>Theme</Trans>
+                                    </DropdownMenuSubTrigger>
+                                    <DropdownMenuPortal>
+                                        <DropdownMenuSubContent>
+                                            <DropdownMenuRadioGroup
+                                                value={settings.theme}
+                                                onValueChange={value => setTheme(value as Theme)}
+                                            >
+                                                <DropdownMenuRadioItem value="light">
+                                                    <Sun />
+                                                    <Trans context="theme">Light</Trans>
+                                                </DropdownMenuRadioItem>
+                                                <DropdownMenuRadioItem value="dark">
+                                                    <Moon />
+                                                    <Trans context="theme">Dark</Trans>
+                                                </DropdownMenuRadioItem>
+                                                <DropdownMenuRadioItem value="system">
+                                                    <Monitor />
+                                                    <Trans context="theme">System</Trans>
+                                                </DropdownMenuRadioItem>
+                                            </DropdownMenuRadioGroup>
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuPortal>
+                                </DropdownMenuSub>
+                            </DropdownMenuGroup>
+                            {isDevMode && (
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>
+                                        <Trans>Dev Mode</Trans>
+                                    </DropdownMenuSubTrigger>
+                                    <DropdownMenuPortal>
+                                        <DropdownMenuSubContent>
+                                            <DropdownMenuRadioGroup
+                                                value={settings.devMode.toString()}
+                                                onValueChange={value => setDevMode(value === 'true')}
+                                            >
+                                                <DropdownMenuRadioItem value="true">
+                                                    <Trans>Enabled</Trans>
+                                                </DropdownMenuRadioItem>
+                                                <DropdownMenuRadioItem value="false">
+                                                    <Trans>Disabled</Trans>
+                                                </DropdownMenuRadioItem>
+                                            </DropdownMenuRadioGroup>
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuPortal>
+                                </DropdownMenuSub>
+                            )}
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem onClick={handleLogout}>
+                                <LogOut />
+                                <Trans>Log out</Trans>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    <LanguageDialog />
+                </Dialog>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}