feat: implement navigation layout options and styles in AppAuthenticatedShell component; add translations for navigation layout in multiple languages

2026-06-20 21:00:41 +00:00 · 2026-05-07 23:20:30 +08:00
parent db68437a0b
commit a0605299f0
8 changed files with 391 additions and 45 deletions
@@ -1,4 +1,6 @@
-import { ArrowUpDown, Clock3, Cloud, Folder as FolderIcon, Globe2, KeyRound, Lock, LogOut, MonitorSmartphone, Send as SendIcon, Settings as SettingsIcon, ShieldUser, Users } from 'lucide-preact';
+import { ArrowUpDown, Check, ChevronDown, Clock3, Cloud, Folder as FolderIcon, Globe2, KeyRound, Lock, LogOut, MonitorSmartphone, Send as SendIcon, Settings as SettingsIcon, ShieldUser, SlidersHorizontal, Users } from 'lucide-preact';
+import type { ComponentChildren } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { Link } from 'wouter';
 import AppMainRoutes from '@/components/AppMainRoutes';
 import ThemeSwitch from '@/components/ThemeSwitch';
@@ -25,6 +27,21 @@ interface AppAuthenticatedShellProps {
  mainRoutesProps: AppMainRoutesProps;
 }

+type NavLayoutMode = 'flat' | 'grouped-expanded' | 'grouped-smart';
+
+const NAV_LAYOUT_STORAGE_KEY = 'nodewarden.navLayoutMode';
+
+function readNavLayoutMode(): NavLayoutMode {
+  if (typeof window === 'undefined') return 'flat';
+  try {
+    const saved = window.localStorage.getItem(NAV_LAYOUT_STORAGE_KEY);
+    if (saved === 'flat' || saved === 'grouped-expanded' || saved === 'grouped-smart') return saved;
+  } catch {
+    // Ignore local preference read failures.
+  }
+  return 'flat';
+}
+
 function isAdminProfile(profile: Profile | null): boolean {
  return String(profile?.role || '').toLowerCase() === 'admin';
 }
@@ -32,6 +49,179 @@ function isAdminProfile(profile: Profile | null): boolean {
 export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps) {
  const routeAnimationKey = props.isImportRoute ? props.importRoute : props.location;
  const isAdmin = isAdminProfile(props.profile);
+  const vaultActive = props.location === '/vault' || props.location === '/vault/totp';
+  const settingsActive = props.location === props.settingsAccountRoute || props.location === '/settings/domain-rules';
+  const dataActive = props.location === '/backup' || props.isImportRoute;
+  const managementActive = props.location === '/admin' || props.location === '/security/devices';
+  const [navLayoutMode, setNavLayoutMode] = useState<NavLayoutMode>(readNavLayoutMode);
+  const [navLayoutPickerOpen, setNavLayoutPickerOpen] = useState(false);
+  const navLayoutPickerRef = useRef<HTMLDivElement | null>(null);
+  const [expandedGroups, setExpandedGroups] = useState({
+    vault: true,
+    settings: false,
+    data: false,
+    management: false,
+  });
+
+  useEffect(() => {
+    const onPointerDown = (event: Event) => {
+      if (!navLayoutPickerOpen) return;
+      const target = event.target as Node | null;
+      if (navLayoutPickerRef.current && target && !navLayoutPickerRef.current.contains(target)) {
+        setNavLayoutPickerOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setNavLayoutPickerOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [navLayoutPickerOpen]);
+
+  function setNavMode(mode: NavLayoutMode): void {
+    setNavLayoutMode(mode);
+    setNavLayoutPickerOpen(false);
+    try {
+      window.localStorage.setItem(NAV_LAYOUT_STORAGE_KEY, mode);
+    } catch {
+      // Ignore local preference write failures.
+    }
+  }
+
+  function toggleGroup(group: keyof typeof expandedGroups): void {
+    setExpandedGroups((current) => ({ ...current, [group]: !current[group] }));
+  }
+
+  function groupOpen(group: keyof typeof expandedGroups, active: boolean): boolean {
+    if (navLayoutMode === 'grouped-expanded') return true;
+    return expandedGroups[group] || active;
+  }
+
+  function renderSideLink(href: string, active: boolean, icon: ComponentChildren, label: string) {
+    return (
+      <Link href={href} className={`side-link ${active ? 'active' : ''}`}>
+        {icon}
+        <span>{label}</span>
+      </Link>
+    );
+  }
+
+  function renderSubLink(href: string, active: boolean, label: string) {
+    return (
+      <Link href={href} className={`side-sub-link ${active ? 'active' : ''}`}>
+        <span>{label}</span>
+      </Link>
+    );
+  }
+
+  function renderNavGroup(
+    group: keyof typeof expandedGroups,
+    title: string,
+    icon: ComponentChildren,
+    active: boolean,
+    children: ComponentChildren
+  ) {
+    const open = groupOpen(group, active);
+    return (
+      <div className={`side-nav-group ${open ? 'open' : ''}`}>
+        <button
+          type="button"
+          className={`side-group-trigger ${active ? 'active' : ''}`}
+          aria-expanded={open}
+          onClick={() => toggleGroup(group)}
+        >
+          {icon}
+          <span>{title}</span>
+          <ChevronDown size={15} className="side-group-chevron" />
+        </button>
+        <div className={`side-subnav ${open ? 'open' : ''}`}>
+          <div className="side-subnav-inner">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const navLayoutOptions: Array<{ mode: NavLayoutMode; label: string }> = [
+    {
+      mode: 'flat',
+      label: t('txt_nav_layout_flat'),
+    },
+    {
+      mode: 'grouped-expanded',
+      label: t('txt_nav_layout_grouped_expanded'),
+    },
+    {
+      mode: 'grouped-smart',
+      label: t('txt_nav_layout_grouped_smart'),
+    },
+  ];
+
+  const navLayoutLabel = navLayoutOptions.find((option) => option.mode === navLayoutMode)?.label || t('txt_nav_layout_flat');
+  const flatNav = (
+    <>
+      {renderSideLink('/vault', props.location === '/vault', <KeyRound size={16} />, t('nav_vault_items'))}
+      {renderSideLink('/vault/totp', props.location === '/vault/totp', <Clock3 size={16} />, t('txt_verification_code'))}
+      {renderSideLink('/sends', props.location === '/sends', <SendIcon size={16} />, t('nav_sends'))}
+      {renderSideLink(props.settingsAccountRoute, props.location === props.settingsAccountRoute, <SettingsIcon size={16} />, t('nav_account_settings'))}
+      {renderSideLink('/settings/domain-rules', props.location === '/settings/domain-rules', <Globe2 size={16} />, t('nav_domain_rules'))}
+      {isAdmin && renderSideLink('/backup', props.location === '/backup', <Cloud size={16} />, t('nav_backup_strategy'))}
+      {renderSideLink(props.importRoute, props.isImportRoute, <ArrowUpDown size={16} />, t('nav_import_export'))}
+      {isAdmin && renderSideLink('/admin', props.location === '/admin', <Users size={16} />, t('nav_admin_panel'))}
+      {renderSideLink('/security/devices', props.location === '/security/devices', <MonitorSmartphone size={16} />, t('nav_device_management'))}
+    </>
+  );
+
+  const groupedNav = (
+    <>
+      {renderNavGroup(
+        'vault',
+        t('nav_my_vault'),
+        <KeyRound size={16} />,
+        vaultActive,
+        <>
+          {renderSubLink('/vault', props.location === '/vault', t('nav_vault_items'))}
+          {renderSubLink('/vault/totp', props.location === '/vault/totp', t('txt_verification_code'))}
+        </>
+      )}
+      {renderSideLink('/sends', props.location === '/sends', <SendIcon size={16} />, t('nav_sends'))}
+      {renderNavGroup(
+        'settings',
+        t('txt_settings'),
+        <SettingsIcon size={16} />,
+        settingsActive,
+        <>
+          {renderSubLink(props.settingsAccountRoute, props.location === props.settingsAccountRoute, t('nav_account_settings'))}
+          {renderSubLink('/settings/domain-rules', props.location === '/settings/domain-rules', t('nav_domain_rules'))}
+        </>
+      )}
+      {renderNavGroup(
+        'data',
+        t('nav_group_data_backup'),
+        <Cloud size={16} />,
+        dataActive,
+        <>
+          {isAdmin && renderSubLink('/backup', props.location === '/backup', t('nav_backup_strategy'))}
+          {renderSubLink(props.importRoute, props.isImportRoute, t('nav_import_export'))}
+        </>
+      )}
+      {renderNavGroup(
+        'management',
+        t('nav_group_management'),
+        <ShieldUser size={16} />,
+        managementActive,
+        <>
+          {isAdmin && renderSubLink('/admin', props.location === '/admin', t('nav_admin_panel'))}
+          {renderSubLink('/security/devices', props.location === '/security/devices', t('nav_device_management'))}
+        </>
+      )}
+    </>
+  );

  return (
    <div className="app-page">
@@ -76,46 +266,40 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)

        <div className="app-main">
          <aside className="app-side">
-            <Link href="/vault" className={`side-link ${props.location === '/vault' ? 'active' : ''}`}>
-              <KeyRound size={16} />
-              <span>{t('nav_vault_items')}</span>
-            </Link>
-            <Link href="/vault/totp" className={`side-link ${props.location === '/vault/totp' ? 'active' : ''}`}>
-              <Clock3 size={16} />
-              <span>{t('txt_verification_code')}</span>
-            </Link>
-            <Link href="/sends" className={`side-link ${props.location === '/sends' ? 'active' : ''}`}>
-              <SendIcon size={16} />
-              <span>{t('nav_sends')}</span>
-            </Link>
-            <Link href={props.settingsAccountRoute} className={`side-link ${props.location === props.settingsAccountRoute ? 'active' : ''}`}>
-              <SettingsIcon size={16} />
-              <span>{t('nav_account_settings')}</span>
-            </Link>
-            <Link href="/settings/domain-rules" className={`side-link ${props.location === '/settings/domain-rules' ? 'active' : ''}`}>
-              <Globe2 size={16} />
-              <span>{t('nav_domain_rules')}</span>
-            </Link>
-            {isAdmin && (
-              <Link href="/backup" className={`side-link ${props.location === '/backup' ? 'active' : ''}`}>
-                <Cloud size={16} />
-                <span>{t('nav_backup_strategy')}</span>
-              </Link>
-            )}
-            <Link href={props.importRoute} className={`side-link ${props.isImportRoute ? 'active' : ''}`}>
-              <ArrowUpDown size={16} />
-              <span>{t('nav_import_export')}</span>
-            </Link>
-            {isAdmin && (
-              <Link href="/admin" className={`side-link ${props.location === '/admin' ? 'active' : ''}`}>
-                <Users size={16} />
-                <span>{t('nav_admin_panel')}</span>
-              </Link>
-            )}
-            <Link href="/security/devices" className={`side-link ${props.location === '/security/devices' ? 'active' : ''}`}>
-              <MonitorSmartphone size={16} />
-              <span>{t('nav_device_management')}</span>
-            </Link>
+            <div className="side-nav-main">
+              {navLayoutMode === 'flat' ? flatNav : groupedNav}
+            </div>
+            <div className="nav-layout-control" ref={navLayoutPickerRef}>
+              {navLayoutPickerOpen && (
+                <div className="nav-layout-menu" role="menu">
+                  {navLayoutOptions.map((option) => (
+                    <button
+                      key={option.mode}
+                      type="button"
+                      className={`nav-layout-option ${navLayoutMode === option.mode ? 'active' : ''}`}
+                      onClick={() => setNavMode(option.mode)}
+                      role="menuitemradio"
+                      aria-checked={navLayoutMode === option.mode}
+                    >
+                      <span className="nav-layout-option-text">
+                        <strong>{option.label}</strong>
+                      </span>
+                      {navLayoutMode === option.mode && <Check size={15} className="nav-layout-check" />}
+                    </button>
+                  ))}
+                </div>
+              )}
+              <button
+                type="button"
+                className={`nav-layout-trigger ${navLayoutPickerOpen ? 'active' : ''}`}
+                aria-haspopup="menu"
+                aria-expanded={navLayoutPickerOpen}
+                onClick={() => setNavLayoutPickerOpen((open) => !open)}
+                title={t('txt_nav_layout')}
+              >
+                <SlidersHorizontal size={15} />
+              </button>
+            </div>
          </aside>
          <main className="content">
            <div key={routeAnimationKey} className={`route-stage ${props.location === '/settings/domain-rules' ? 'route-stage-fixed' : ''}`}>