From 2a6a7980ec525098c839b0711546ef2040f6700b Mon Sep 17 00:00:00 2001
From: nxtkofi <psliwa.b@gmail.com>
Date: Tue, 21 Apr 2026 23:26:36 +0200
Subject: [PATCH] feat(shell): integrate auth-aware nav into locale layout

Add AuthNavActions component and integrate shell into locale layout

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/app/[locale]/layout.tsx            |  9 +++-
 src/components/core/AuthNavActions.tsx | 70 ++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 src/components/core/AuthNavActions.tsx

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 1430e59..1a8344c 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -2,6 +2,8 @@ import { setRequestLocale } from 'next-intl/server';
 import { hasLocale } from 'next-intl';
 import { notFound } from 'next/navigation';
 import { routing } from '@/i18n/routing';
+import { AppShell } from '@/components/core/AppShell';
+import { AppNav } from '@/components/core/AppNav';
 
 export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
@@ -22,5 +24,10 @@ export default async function LocaleLayout({
 
   setRequestLocale(locale);
 
-  return <>{children}</>;
+  return (
+    <AppShell>
+      <AppNav />
+      <main className="flex-1">{children}</main>
+    </AppShell>
+  );
 }
diff --git a/src/components/core/AuthNavActions.tsx b/src/components/core/AuthNavActions.tsx
new file mode 100644
index 0000000..7d04efe
--- /dev/null
+++ b/src/components/core/AuthNavActions.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { routes } from "@/lib/routes";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface AuthNavActionsProps {
+  className?: string;
+}
+
+export function AuthNavActions({ className }: AuthNavActionsProps) {
+  const t = useTranslations("Navigation");
+  const { data: session, isPending } = authClient.useSession();
+
+  if (isPending) {
+    return (
+      <div className={cn("flex items-center gap-2", className)}>
+        <div className="h-9 w-20 bg-muted animate-pulse rounded" />
+      </div>
+    );
+  }
+
+  const isAuthenticated = !!session?.user;
+
+  const handleSignOut = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          window.location.href = routes.public.home;
+        },
+      },
+    });
+  };
+
+  return (
+    <div data-testid="nav-auth-actions" className={cn("flex items-center gap-2", className)}>
+      {isAuthenticated ? (
+        <>
+          <div data-testid="nav-private-links" className="flex items-center gap-2">
+            <Button variant="ghost" asChild>
+              <Link href={routes.private.dashboard}>{t("Dashboard")}</Link>
+            </Button>
+            <Button variant="ghost" asChild>
+              <Link href={routes.private.settings}>{t("Settings")}</Link>
+            </Button>
+          </div>
+          <Button
+            data-testid="sign-out-button"
+            variant="outline"
+            onClick={handleSignOut}
+          >
+            {t("SignOut")}
+          </Button>
+        </>
+      ) : (
+        <div data-testid="nav-public-links" className="flex items-center gap-2">
+          <Button variant="ghost" asChild>
+            <Link href={routes.public.signIn}>{t("SignIn")}</Link>
+          </Button>
+          <Button asChild>
+            <Link href={routes.public.signUp}>{t("SignUp")}</Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}