fix nav close and links

codercatdev · codercatdev · commit 92bec858d029 · 2025-09-12T14:36:03.000-04:00
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
@@ -17,7 +17,7 @@ import { cn } from "@/lib/utils";
 import { ThemeProvider } from "@/components/theme-provider";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetClose, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import NavHeader from "@/components/nav-header";
 import Footer from "@/components/footer";
 import { Toaster } from "@/components/ui/sonner";
@@ -134,9 +134,7 @@ export default async function RootLayout({
 											</SheetTrigger>
 											<SheetContent side="right">
 												<nav className="py-6 grid gap-2">
-													<SheetTrigger asChild>
-														<NavHeader navLinks={settings?.navLinks} sideOnly />
-													</SheetTrigger>
+													<NavHeader navLinks={settings?.navLinks} sideOnly />
 												</nav>
 											</SheetContent>
 										</Sheet>
diff --git a/components/nav-header.tsx b/components/nav-header.tsx
@@ -4,6 +4,7 @@ import type { Settings } from "@/sanity/types";
 
 import { useActivePath } from "@/lib/hooks";
 import NavLink from "@/components/nav-link";
+import { SheetClose } from "./ui/sheet";
 
 interface Props {
 	navLinks: Exclude<Settings["navLinks"], undefined> | undefined;
@@ -18,21 +19,36 @@ export default function NavHeader({
 	...restProps
 }: Props) {
 	const checkActivePath = useActivePath();
-
 	return (
 		<>
 			{navLinks
 				?.filter((l) => (sideOnly ? true : l?.sideOnly !== true))
-				?.map((l) => (
-					<NavLink
-						{...restProps}
-						key={l._key}
-						className={`${className || ""} ${checkActivePath(l.path) ? "underline decoration-primary" : ""}`}
-						href={l?.path || "/"}
-					>
-						{l.title}
-					</NavLink>
-				))}
+				?.map((l) =>
+					sideOnly ? (
+						<SheetClose asChild key={l._key}>
+							<NavLink
+								{...restProps}
+								className={`${className || ""} ${
+									checkActivePath(l.path) ? "underline decoration-primary" : ""
+								}`}
+								href={l?.path || "/"}
+							>
+								{l.title}
+							</NavLink>
+						</SheetClose>
+					) : (
+						<NavLink
+							{...restProps}
+							key={l._key}
+							className={`${className || ""} ${
+								checkActivePath(l.path) ? "underline decoration-primary" : ""
+							}`}
+							href={l?.path || "/"}
+						>
+							{l.title}
+						</NavLink>
+					),
+				)}
 		</>
 	);
 }
