Add close trigger to mobile menu links

rocky-linux · Apr 8, 2024 · 2892e4f · 2892e4f
1 parent 947cef9
commit 2892e4f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/app/[locale]/components/header/MobileNavigation.tsx b/app/[locale]/components/header/MobileNavigation.tsx
@@ -1,6 +1,11 @@
 "use client";
 
-import { Sheet, SheetTrigger, SheetContent } from "@/components/ui/sheet";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetClose,
+} from "@/components/ui/sheet";
 import { Accordion } from "@/components/ui/accordion";
 
 import { Button } from "@/components/ui/button";
@@ -137,7 +142,9 @@ const MobileNavigation = ({
           </Accordion>
           <div className="mt-auto">
             <a href="/download">
-              <Button className="p-5 w-full mt-4">{downloadSRText}</Button>
+              <SheetClose asChild>
+                <Button className="p-5 w-full mt-4">{downloadSRText}</Button>
+              </SheetClose>
             </a>
           </div>
         </SheetContent>

diff --git a/app/[locale]/components/header/nav/mobile/NavItem.tsx b/app/[locale]/components/header/nav/mobile/NavItem.tsx
@@ -1,3 +1,4 @@
+import { SheetClose } from "@/components/ui/sheet";
 import Link from "next/link";
 
 export interface NavItemProps {
@@ -7,12 +8,14 @@ export interface NavItemProps {
 
 const NavItem = ({ title, href }: NavItemProps) => {
   return (
-    <Link
-      className="flex w-full items-center py-4 focus:text-primary border-b text-sm hover:underline"
-      href={href}
-    >
-      {title}
-    </Link>
+    <SheetClose asChild>
+      <Link
+        className="flex w-full items-center py-4 focus:text-primary border-b text-sm hover:underline"
+        href={href}
+      >
+        {title}
+      </Link>
+    </SheetClose>
   );
 };
 

diff --git a/app/[locale]/components/header/nav/mobile/NavListItem.tsx b/app/[locale]/components/header/nav/mobile/NavListItem.tsx
@@ -1,3 +1,4 @@
+import { SheetClose } from "@/components/ui/sheet";
 import Link from "next/link";
 
 export interface NavListItemProps {
@@ -7,12 +8,14 @@ export interface NavListItemProps {
 
 const NavListItem = ({ title, href }: NavListItemProps) => {
   return (
-    <Link
-      className="flex w-full items-center py-2 focus:text-primary hover:underline"
-      href={href}
-    >
-      {title}
-    </Link>
+    <SheetClose asChild>
+      <Link
+        className="flex w-full items-center py-2 focus:text-primary hover:underline"
+        href={href}
+      >
+        {title}
+      </Link>
+    </SheetClose>
   );
 };