Collapse navbar on click

Close #8

app/navbar.tsx

@@ -1,6 +1,16 @@
+import { Collapse } from "./utils/bootstrap.client";
 import { Link, NavLink } from "@remix-run/react";
+import { useRef } from "react";
+
+const onItemClick = (nav: HTMLElement | null) => {
+  if (nav !== null) {
+    Collapse.getInstance(nav)?.hide();
+  }
+};
 
 export default function Navbar() {
+  const collapseRef = useRef<HTMLDivElement>(null);
+
   return (
     <nav
       className="navbar navbar-expand-sm bg-dark fixed-top"
@@ -20,18 +30,34 @@ export default function Navbar() {
           <span className="navbar-toggler-icon"></span>
         </button>
 
-        <div id="navbar" className="collapse navbar-collapse">
+        <div id="navbar" className="collapse navbar-collapse" ref={collapseRef}>
           <div className="navbar-nav">
-            <NavLink to="/search/pukiwiki" className="nav-item nav-link">
+            <NavLink
+              to="/search/pukiwiki"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               PukiWiki
             </NavLink>
-            <NavLink to="/search/scrapbox" className="nav-item nav-link">
+            <NavLink
+              to="/search/scrapbox"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               Scrapbox
             </NavLink>
-            <NavLink to="/search/mail" className="nav-item nav-link">
+            <NavLink
+              to="/search/mail"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               Mail
             </NavLink>
-            <NavLink to="/help" className="nav-item nav-link">
+            <NavLink
+              to="/help"
+              className="nav-item nav-link"
+              onClick={() => onItemClick(collapseRef.current)}
+            >
               Help
             </NavLink>
           </div>

app/utils/bootstrap.client.tsx

@@ -0,0 +1,7 @@
+// Bootstrap のコードは server で評価した瞬間に document がなくエラーになるので、
+// クライアントのみで動かすために client.tsx で import する
+// Note: サーバー側で export したモジュールを使おうとすると undefined になる
+// https://remix.run/docs/en/main/file-conventions/-client
+import { Collapse } from "bootstrap";
+
+export { Collapse };

package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@remix-run/dev": "^2.4.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/bootstrap": "^5.2.10",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",