Fix root access flow by forcing document navigation for Basic Auth

app/[locale]/coming-soon/page.tsx

@@ -1,5 +1,4 @@
 import { CalendarClock, Rocket, ShieldCheck, Sparkles } from "lucide-react";
-import Link from "next/link";
 
 import { MotionFade } from "@/components/motion-fade";
 import { resolveLocale } from "@/lib/site-data";
@@ -64,13 +63,13 @@ export default function ComingSoonPage({ params: { locale } }: ComingSoonPagePro
             </p>
 
             <div className="mt-8">
-              <Link
+              <a
                 href={`/${localeKey}/root`}
                 className="inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
               >
                 <ShieldCheck className="h-4 w-4" />
                 {copy.adminLink}
-              </Link>
+              </a>
             </div>
           </section>
         </MotionFade>

components/footer.tsx

@@ -20,14 +20,23 @@ export function Footer() {
       <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-8 sm:px-6 lg:px-8">
         <nav className="flex flex-wrap gap-4 text-sm">
           {navItems.map((item) => (
-            <Link
-              key={item.key}
-              href={`/${locale}${item.path}`}
-              prefetch={item.key === "root" ? false : undefined}
-              className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-            >
-              {tNav(item.key)}
-            </Link>
+            item.key === "root" ? (
+              <a
+                key={item.key}
+                href={`/${locale}${item.path}`}
+                className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+              >
+                {tNav(item.key)}
+              </a>
+            ) : (
+              <Link
+                key={item.key}
+                href={`/${locale}${item.path}`}
+                className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+              >
+                {tNav(item.key)}
+              </Link>
+            )
           ))}
         </nav>
         <p className="text-xs text-zinc-500 dark:text-zinc-400">

components/navbar.tsx

@@ -49,14 +49,23 @@ export function Navbar() {
           </Link>
           <nav className="hidden items-center gap-5 md:flex">
             {navItems.map((item) => (
-              <Link
-                key={item.key}
-                href={`/${locale}${item.path}`}
-                prefetch={item.key === "root" ? false : undefined}
-                className="text-sm text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-              >
-                {t(item.key)}
-              </Link>
+              item.key === "root" ? (
+                <a
+                  key={item.key}
+                  href={`/${locale}${item.path}`}
+                  className="text-sm text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+                >
+                  {t(item.key)}
+                </a>
+              ) : (
+                <Link
+                  key={item.key}
+                  href={`/${locale}${item.path}`}
+                  className="text-sm text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+                >
+                  {t(item.key)}
+                </Link>
+              )
             ))}
           </nav>
         </div>
@@ -85,15 +94,25 @@ export function Navbar() {
         <div className="border-t border-zinc-200 px-4 py-4 md:hidden dark:border-zinc-800">
           <nav className="flex flex-col gap-3">
             {navItems.map((item) => (
-              <Link
-                key={item.key}
-                href={`/${locale}${item.path}`}
-                prefetch={item.key === "root" ? false : undefined}
-                className="text-sm text-zinc-700 dark:text-zinc-300"
-                onClick={() => setIsOpen(false)}
-              >
-                {t(item.key)}
-              </Link>
+              item.key === "root" ? (
+                <a
+                  key={item.key}
+                  href={`/${locale}${item.path}`}
+                  className="text-sm text-zinc-700 dark:text-zinc-300"
+                  onClick={() => setIsOpen(false)}
+                >
+                  {t(item.key)}
+                </a>
+              ) : (
+                <Link
+                  key={item.key}
+                  href={`/${locale}${item.path}`}
+                  className="text-sm text-zinc-700 dark:text-zinc-300"
+                  onClick={() => setIsOpen(false)}
+                >
+                  {t(item.key)}
+                </Link>
+              )
             ))}
           </nav>
           <div className="mt-4 flex items-center gap-2">