Merge pull request #24 from takeokunn/auto-close-navbar-on-mobile

モバイルのとき、選択後に Navbar を自動的に閉じる
times-yasunori · Oct 3, 2024 · c03f6cd · c03f6cd
2 parents c647150 + adb4ce5
commit c03f6cd
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/packages/web/app/root.tsx b/packages/web/app/root.tsx
@@ -19,13 +19,14 @@ import {
   rem,
 } from "@mantine/core";
 import "@mantine/core/styles.css";
-import { useDisclosure, useHeadroom } from "@mantine/hooks";
+import { useDisclosure, useHeadroom, useMediaQuery } from "@mantine/hooks";
 import { useAwesomeYasunori } from "./hooks/use-awesome-yasunori";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const { data } = useAwesomeYasunori();
+  const isMobile = useMediaQuery("(max-width: 767px)");
   const pinned = useHeadroom({ fixedAt: 120 });
-  const [opened, { toggle }] = useDisclosure();
+  const [opened, { toggle, close }] = useDisclosure();
   const navigate = useNavigate();
   return (
     <html lang="ja">
@@ -65,7 +66,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
                 {data?.map((d) => (
                   <NavLink
                     key={d.id}
-                    onClick={() => navigate(`#${d.id}`, { replace: true })}
+                    onClick={() => {
+                      navigate(`#${d.id}`, { replace: true });
+                      // モバイルのときは移動後にサイドバーを閉じる
+                      if (isMobile) {
+                        close();
+                      }
+                    }}
                     label={
                       <Group gap="xs">
                         <Text>{`${d.title}`}</Text>