fix: navbar hierarchy - root/1-level/2-level indentation

Author: arzafran

components/layout/header/index.tsx

@@ -27,41 +27,34 @@ export function Header() {
   )
 
   return (
-    <nav className="fixed top-safe left-safe z-2 flex flex-col gap-3 font-mono dt:text-[11px] text-[10px] uppercase">
-      {/* Logo + current path */}
-      <div className="flex items-baseline gap-2">
-        <h1 className="dt:text-[13px] text-[12px]">Satūs</h1>
-        <span className="opacity-40">{pathname}</span>
-      </div>
+    <nav className="fixed top-safe left-safe z-2 flex flex-col font-mono dt:text-[11px] text-[10px] uppercase">
+      {/* Root level: Logo */}
+      <h1 className="dt:text-[13px] text-[12px]">Satūs</h1>
 
-      {/* Main navigation */}
-      <ul className="flex flex-col gap-0.5 pl-4">
+      {/* Level 1: Main navigation */}
+      <ul className="mt-1 flex flex-col pl-4">
         {LINKS.map((link) => (
           <li key={link.href} className="flex">
-            <span className="-ml-4 w-4 opacity-50">
+            <span className="-ml-3 w-3 opacity-50">
               {pathname === link.href ? '›' : ''}
             </span>
             <Link href={link.href} className="link">
               {link.label}
             </Link>
           </li>
         ))}
-
-        {/* Examples submenu */}
         <li className="flex">
-          <span className="-ml-4 w-4 opacity-50">
+          <span className="-ml-3 w-3 opacity-50">
             {isExamplePage ? '›' : ''}
           </span>
           <span>examples</span>
         </li>
-      </ul>
 
-      {/* Examples sub-navigation */}
-      <ul className="flex flex-col gap-0.5 pl-8">
+        {/* Level 2: Examples sub-navigation */}
         {EXAMPLES.map((link) => (
-          <li key={link.href} className="flex">
-            <span className="-ml-4 w-4 opacity-50">
-              {pathname === link.href ? '·' : ''}
+          <li key={link.href} className="flex pl-4">
+            <span className="-ml-3 w-3 opacity-50">
+              {pathname === link.href ? '›' : ''}
             </span>
             <Link
               href={link.href}