Keyboard-accessible nav dropdowns + whitespace-safe initials()

src/components/dashboard/shipment-ui.tsx

@@ -1,4 +1,5 @@
 import type { Shipment } from '@/lib/api';
+export { initials } from '@/lib/utils';
 
 export const TERMINAL_STATUSES: Shipment['status'][] = [
   'DELIVERED',
@@ -30,11 +31,3 @@ export function formatAmount(amount: number, assetCode: Shipment['assetCode']) {
   return `${new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(amount)} ${assetCode}`;
 }
 
-export function initials(name: string) {
-  return name
-    .split(' ')
-    .map((part) => part[0])
-    .slice(0, 2)
-    .join('')
-    .toUpperCase();
-}

src/components/layout/navbar.tsx

@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/button';
 import { Container } from '@/components/ui/container';
 import { RouteTicker } from './route-ticker';
 import { mainNav } from '@/lib/data';
-import { cn } from '@/lib/utils';
+import { cn, initials } from '@/lib/utils';
 import { getMe, type CurrentUser } from '@/lib/api';
 import { clearToken, getToken } from '@/lib/auth';
 
@@ -27,15 +27,6 @@ function useCurrentUser() {
   return [user, setUser] as const;
 }
 
-function initials(name: string) {
-  return name
-    .split(' ')
-    .map((part) => part[0])
-    .slice(0, 2)
-    .join('')
-    .toUpperCase();
-}
-
 function AccountMenu({ user, onSignOut }: { user: CurrentUser; onSignOut: () => void }) {
   const [open, setOpen] = useState(false);
   return (
@@ -124,9 +115,21 @@ export function Navbar() {
                 key={item.label}
                 className="relative flex items-stretch"
                 onMouseEnter={() => setOpenMenu(item.label)}
+                onBlur={(e) => {
+                  if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+                    setOpenMenu(null);
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape') setOpenMenu(null);
+                }}
               >
                 <button
                   type="button"
+                  aria-expanded={openMenu === item.label}
+                  aria-haspopup="true"
+                  onClick={() => setOpenMenu((v) => (v === item.label ? null : item.label))}
+                  onFocus={() => setOpenMenu(item.label)}
                   className={cn(
                     'flex items-center border-l border-border px-4 text-sm font-medium uppercase tracking-wide text-foreground/80 transition-colors hover:bg-secondary hover:text-foreground',
                     openMenu === item.label && 'bg-secondary text-foreground',

src/lib/utils.ts

@@ -18,3 +18,14 @@ export function formatCompact(value: number) {
     value,
   );
 }
+
+export function initials(name: string) {
+  return name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((part) => part[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+}