From c23c0a7ebcafb56614f5a5473cbc233e62a42672 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 7 Nov 2025 20:48:07 +0000
Subject: [PATCH] completionId: cgen-5f32e57bd7a34fd683282342c337fd35

cgen-5f32e57bd7a34fd683282342c337fd35
---
 client/components/Layout.tsx | 108 +++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/client/components/Layout.tsx b/client/components/Layout.tsx
index b45da326..80540d7c 100644
--- a/client/components/Layout.tsx
+++ b/client/components/Layout.tsx
@@ -205,6 +205,114 @@ export default function CodeLayout({ children, hideFooter }: LayoutProps) {
 
           {/* Auth Section */}
           <div className="flex items-center gap-2 md:gap-4 animate-slide-left shrink-0">
+            <div className="md:hidden">
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="border-border/60 bg-background/80 backdrop-blur hover:bg-background"
+                  >
+                    <Menu className="h-5 w-5" />
+                    <span className="sr-only">Open navigation</span>
+                  </Button>
+                </SheetTrigger>
+                <SheetContent
+                  side="left"
+                  className="bg-background/95 backdrop-blur-xl border-border/40"
+                >
+                  <SheetHeader className="text-left">
+                    <SheetTitle>Navigate AeThex</SheetTitle>
+                    <SheetDescription>
+                      Access any section without leaving your flow.
+                    </SheetDescription>
+                  </SheetHeader>
+
+                  <nav className="mt-6 flex flex-col gap-1">
+                    {(user ? userNavigation : publicNavigation).map((item) => (
+                      <SheetClose key={item.href} asChild>
+                        <Link
+                          to={item.href}
+                          onClick={scrollToTop}
+                          className="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-background/50 hover:text-aethex-200"
+                        >
+                          {item.name}
+                        </Link>
+                      </SheetClose>
+                    ))}
+                  </nav>
+                  <div className="mt-8 space-y-3 border-t border-border/40 pt-4">
+                    {loading ? (
+                      <div className="space-y-2">
+                        <div className="h-4 w-32 animate-pulse rounded bg-border/40" />
+                        <div className="h-4 w-24 animate-pulse rounded bg-border/40" />
+                      </div>
+                    ) : user ? (
+                      <>
+                        <SheetClose asChild>
+                          <Link
+                            to="/dashboard"
+                            onClick={scrollToTop}
+                            className="block rounded-lg bg-gradient-to-r from-aethex-500 to-neon-blue px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-aethex-500/20"
+                          >
+                            Go to Dashboard
+                          </Link>
+                        </SheetClose>
+                        <SheetClose asChild>
+                          <Link
+                            to="/profile"
+                            onClick={scrollToTop}
+                            className="block rounded-lg border border-border/50 px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-aethex-400/40 hover:text-aethex-200"
+                          >
+                            View Profile
+                          </Link>
+                        </SheetClose>
+                        <SheetClose asChild>
+                          <Link
+                            to="/dashboard?tab=profile#settings"
+                            onClick={scrollToTop}
+                            className="block rounded-lg border border-border/50 px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-aethex-400/40 hover:text-aethex-200"
+                          >
+                            Account Settings
+                          </Link>
+                        </SheetClose>
+                        <SheetClose asChild>
+                          <button
+                            type="button"
+                            className="flex w-full items-center justify-start rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-red-400 transition-colors hover:border-red-500/40 hover:bg-red-500/10 hover:text-red-300"
+                            onClick={() => signOut()}
+                          >
+                            <LogOut className="mr-2 h-4 w-4" />
+                            Sign out
+                          </button>
+                        </SheetClose>
+                      </>
+                    ) : (
+                      <>
+                        <SheetClose asChild>
+                          <Link
+                            to="/onboarding"
+                            onClick={scrollToTop}
+                            className="block rounded-lg bg-gradient-to-r from-aethex-500 to-neon-blue px-3 py-2 text-sm font-semibold text-white shadow-lg shadow-aethex-500/20"
+                          >
+                            Join AeThex
+                          </Link>
+                        </SheetClose>
+                        <SheetClose asChild>
+                          <Link
+                            to="/login"
+                            onClick={scrollToTop}
+                            className="block rounded-lg border border-border/50 px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-aethex-400/40 hover:text-aethex-200"
+                          >
+                            Sign In
+                          </Link>
+                        </SheetClose>
+                      </>
+                    )}
+                  </div>
+                </SheetContent>
+              </Sheet>
+            </div>
             {!loading && (
               <>
                 {user ? (