feat(web): responsive Vocabularies master/detail (drawer on narrow) (#58)

web/src/vocab/vocabularies-page.tsx

@@ -1,28 +1,47 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useMatch, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { VocabularyList } from "./vocabulary-list";
+import { DetailDrawer } from "../components/detail-drawer";
+import { useMediaQuery } from "../lib/use-media-query";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 
 export function VocabulariesPage() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const detailMatch = useMatch("/vocabularies/:id");
+  const open = Boolean(detailMatch);
+  const isWide = useMediaQuery("(min-width: 1024px)");
 
   useDocumentTitle(t("nav.vocabularies"));
   useBreadcrumb([{ label: t("nav.vocabularies") }]);
 
+  const close = () => navigate("/vocabularies");
+
   return (
     <div className="flex h-full flex-col">
       <PageTitle className="px-4 pt-4 pb-2">{t("nav.vocabularies")}</PageTitle>
-      <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
-        <div className="overflow-hidden border-r">
+      {isWide ? (
+        <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
+          <div className="overflow-hidden border-r">
+            <VocabularyList />
+          </div>
+          <div className="overflow-hidden">
+            <Outlet />
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1 overflow-hidden">
           <VocabularyList />
         </div>
-        <div className="overflow-hidden">
+      )}
+      {!isWide && open && (
+        <DetailDrawer open={open} onClose={close} ariaLabel={t("vocab.terms")}>
           <Outlet />
-        </div>
-      </div>
+        </DetailDrawer>
+      )}
     </div>
   );
 }