From 3100912212547226076f82bc8b247dca48c88aab Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 15 Oct 2024 16:13:32 +0200
Subject: [PATCH] chore: make the search form and app header responsive for
 mobile

---
 components/app-header.vue                   | 86 ++++++++++++++-------
 components/search-data-table/data-table.vue |  2 +-
 components/search-form.vue                  | 21 +----
 components/ui/drawer/Drawer.vue             | 18 +++++
 components/ui/drawer/DrawerContent.vue      | 32 ++++++++
 components/ui/drawer/DrawerDescription.vue  | 23 ++++++
 components/ui/drawer/DrawerFooter.vue       | 15 ++++
 components/ui/drawer/DrawerHeader.vue       | 15 ++++
 components/ui/drawer/DrawerOverlay.vue      | 22 ++++++
 components/ui/drawer/DrawerTitle.vue        | 23 ++++++
 components/ui/drawer/index.ts               |  8 ++
 package.json                                |  1 +
 pages/search.vue                            | 41 ++++++++--
 pnpm-lock.yaml                              | 17 ++++
 14 files changed, 269 insertions(+), 55 deletions(-)
 create mode 100644 components/ui/drawer/Drawer.vue
 create mode 100644 components/ui/drawer/DrawerContent.vue
 create mode 100644 components/ui/drawer/DrawerDescription.vue
 create mode 100644 components/ui/drawer/DrawerFooter.vue
 create mode 100644 components/ui/drawer/DrawerHeader.vue
 create mode 100644 components/ui/drawer/DrawerOverlay.vue
 create mode 100644 components/ui/drawer/DrawerTitle.vue
 create mode 100644 components/ui/drawer/index.ts

diff --git a/components/app-header.vue b/components/app-header.vue
index c5206fd..95358a6 100644
--- a/components/app-header.vue
+++ b/components/app-header.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { MenuIcon } from "lucide-vue-next";
+
 import type { NavLinkProps } from "@/components/nav-link.vue";
 import { Separator } from "@/components/ui/separator";
 
-const t = useTranslations();
-
 const route = useRoute();
 
 const homeLink = { href: { path: "/" } };
@@ -17,40 +17,70 @@ const links = computed(() => {
 </script>
 
 <template>
-	<header class="border-b bg-frisch-marine px-12">
-		<div class="w-full pb-4 pt-12">
-			<nav :aria-label="t('AppHeader.navigation-main')">
-				<div class="grid items-end gap-4 lg:grid-cols-2">
-					<div class="text-4xl font-semibold text-frisch-orange">
+	<header class="border-b bg-frisch-marine px-6 lg:px-12">
+		<div class="w-full pb-4 pt-8 lg:pt-12">
+			<nav>
+				<div class="grid grid-cols-[1fr_auto] items-center gap-4 lg:items-end">
+					<div class="text-2xl font-semibold text-frisch-orange lg:text-4xl">
 						<NavLink :href="homeLink.href">
 							Digitales Archiv
 							<br aria-hidden="true" />
 							Barbara Frischmuth
 						</NavLink>
 					</div>
-					<ul
-						:class="
-							route.path !== '/'
-								? 'opacity-100 translate-y-0'
-								: 'opacity-0 translate-y-5 pointer-events-none'
-						"
-						class="ml-auto flex gap-x-4 font-bold transition"
-						role="list"
-					>
-						<li
-							v-for="(link, key, index) of links"
-							:key="key"
-							class="flex shrink-0 gap-x-4 text-xl"
+					<div class="hidden lg:flex">
+						<ul
+							:class="
+								route.path !== '/'
+									? 'opacity-100 translate-y-0'
+									: 'opacity-0 translate-y-5 pointer-events-none'
+							"
+							class="ml-auto flex gap-x-4 font-bold transition"
+							role="list"
 						>
-							<Separator v-if="index > 0" class="h-full w-0.5 bg-frisch-orange" />
-							<NavLink
-								:href="link.href"
-								class="text-frisch-orange transition hover:text-frisch-indigo aria-[current]:text-frisch-indigo"
+							<li
+								v-for="(link, key, index) of links"
+								:key="key"
+								class="flex shrink-0 gap-x-4 text-xl"
 							>
-								{{ link.label }}
-							</NavLink>
-						</li>
-					</ul>
+								<Separator v-if="index > 0" class="h-full w-0.5 bg-frisch-orange" />
+								<NavLink
+									:href="link.href"
+									class="text-frisch-orange transition hover:text-frisch-indigo aria-[current]:text-frisch-indigo"
+								>
+									{{ link.label }}
+								</NavLink>
+							</li>
+						</ul>
+					</div>
+					<div class="flex shrink-0 lg:hidden">
+						<Sheet>
+							<SheetTrigger
+								aria-label="Toggle navigation menu"
+								class="flex font-bold transition"
+								:class="
+									route.path !== '/'
+										? 'opacity-100 translate-y-0'
+										: 'opacity-0 translate-x-5 pointer-events-none'
+								"
+							>
+								<MenuIcon :size="32" class="bg-frisch-orange p-1 text-white" />
+							</SheetTrigger>
+							<SheetContent class="overflow-y-auto">
+								<SheetTitle class="sr-only">Navigationsmenü</SheetTitle>
+								<ul class="grid py-8" role="list">
+									<li v-for="(link, key) of links" :key="key">
+										<NavLink
+											class="flex py-2 font-medium text-frisch-orange transition-opacity hover:opacity-100 focus-visible:opacity-100 aria-[current]:text-frisch-indigo"
+											:href="link.href"
+										>
+											{{ link.label }}
+										</NavLink>
+									</li>
+								</ul>
+							</SheetContent>
+						</Sheet>
+					</div>
 				</div>
 			</nav>
 		</div>
diff --git a/components/search-data-table/data-table.vue b/components/search-data-table/data-table.vue
index 3b22895..44d8a4e 100644
--- a/components/search-data-table/data-table.vue
+++ b/components/search-data-table/data-table.vue
@@ -145,7 +145,7 @@ function getCellClass<T>(columnDef?: CustomColumnDef<T>): string {
 
 <template>
 	<div>
-		<div class="w-full border">
+		<div class="w-full overflow-x-hidden border">
 			<Table>
 				<TableHeader class="table-fixed">
 					<TableCaption class="sr-only">
diff --git a/components/search-form.vue b/components/search-form.vue
index f146618..b2710c0 100644
--- a/components/search-form.vue
+++ b/components/search-form.vue
@@ -19,31 +19,16 @@ function onChange(event: Event) {
 		topic: formData.getAll("topic") as Array<string>,
 	});
 }
-
-// TODO: kill me
-const containerHeight = ref(0);
-
-onMounted(async () => {
-	await nextTick();
-
-	const searchForm = document.getElementById("search-container");
-	if (searchForm != null) {
-		containerHeight.value = searchForm.offsetHeight;
-	}
-});
 </script>
 
 <template>
-	<div class="grid max-h-full grid-cols-[1fr_auto]">
-		<div id="search-container" class="relative w-full bg-frisch-orange-searchform">
+	<div class="relative flex h-full">
+		<div class="absolute inset-0 w-full overflow-auto bg-frisch-orange-searchform">
 			<form role="search" @submit.stop.prevent="onChange" @submit.prevent="onChange">
-				<div :style="{ height: containerHeight + 'px' }" class="overflow-y-auto">
+				<div class="overflow-y-auto">
 					<slot />
 				</div>
 			</form>
 		</div>
-		<div
-			class="size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange"
-		/>
 	</div>
 </template>
diff --git a/components/ui/drawer/Drawer.vue b/components/ui/drawer/Drawer.vue
new file mode 100644
index 0000000..5fb5b0d
--- /dev/null
+++ b/components/ui/drawer/Drawer.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useForwardPropsEmits } from "radix-vue";
+import type { DrawerRoot, DrawerRootEmits, DrawerRootProps } from "vaul-vue";
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+	shouldScaleBackground: true,
+});
+
+const emits = defineEmits<DrawerRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<DrawerRoot v-bind="forwarded">
+		<slot />
+	</DrawerRoot>
+</template>
diff --git a/components/ui/drawer/DrawerContent.vue b/components/ui/drawer/DrawerContent.vue
new file mode 100644
index 0000000..cc6ec85
--- /dev/null
+++ b/components/ui/drawer/DrawerContent.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { type DialogContentEmits, type DialogContentProps, useForwardPropsEmits } from "radix-vue";
+import { DrawerContent, DrawerPortal } from "vaul-vue";
+import type { HtmlHTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+import DrawerOverlay from "./DrawerOverlay.vue";
+
+const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes["class"] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<DrawerPortal>
+		<DrawerOverlay />
+		<DrawerContent
+			v-bind="forwarded"
+			:class="
+				cn(
+					'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-full pt-1.5 flex-col border bg-background',
+					props.class,
+				)
+			"
+		>
+			<div class="mx-auto mb-1.5 h-1 w-[100px] bg-frisch-marine" />
+			<slot />
+		</DrawerContent>
+	</DrawerPortal>
+</template>
diff --git a/components/ui/drawer/DrawerDescription.vue b/components/ui/drawer/DrawerDescription.vue
new file mode 100644
index 0000000..5b549ce
--- /dev/null
+++ b/components/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { DrawerDescription, DrawerDescriptionProps } from "vaul-vue";
+import { computed, type HtmlHTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+	<DrawerDescription
+		v-bind="delegatedProps"
+		:class="cn('text-sm text-muted-foreground', props.class)"
+	>
+		<slot />
+	</DrawerDescription>
+</template>
diff --git a/components/ui/drawer/DrawerFooter.vue b/components/ui/drawer/DrawerFooter.vue
new file mode 100644
index 0000000..fd79f3d
--- /dev/null
+++ b/components/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	class?: HtmlHTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+	<div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+		<slot />
+	</div>
+</template>
diff --git a/components/ui/drawer/DrawerHeader.vue b/components/ui/drawer/DrawerHeader.vue
new file mode 100644
index 0000000..9cc3a36
--- /dev/null
+++ b/components/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	class?: HtmlHTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+	<div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+		<slot />
+	</div>
+</template>
diff --git a/components/ui/drawer/DrawerOverlay.vue b/components/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 0000000..1507b0b
--- /dev/null
+++ b/components/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from "radix-vue";
+import { DrawerOverlay } from "vaul-vue";
+import { computed, type HtmlHTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+	<DrawerOverlay
+		v-bind="delegatedProps"
+		:class="cn('fixed inset-0 z-50 bg-frisch-indigo/40', props.class)"
+	/>
+</template>
diff --git a/components/ui/drawer/DrawerTitle.vue b/components/ui/drawer/DrawerTitle.vue
new file mode 100644
index 0000000..980f99b
--- /dev/null
+++ b/components/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { DrawerTitle, DrawerTitleProps } from "vaul-vue";
+import { computed, type HtmlHTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+	<DrawerTitle
+		v-bind="delegatedProps"
+		:class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
+	>
+		<slot />
+	</DrawerTitle>
+</template>
diff --git a/components/ui/drawer/index.ts b/components/ui/drawer/index.ts
new file mode 100644
index 0000000..0677d32
--- /dev/null
+++ b/components/ui/drawer/index.ts
@@ -0,0 +1,8 @@
+export { default as Drawer } from "./Drawer.vue";
+export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerFooter } from "./DrawerFooter.vue";
+export { default as DrawerHeader } from "./DrawerHeader.vue";
+export { default as DrawerOverlay } from "./DrawerOverlay.vue";
+export { default as DrawerTitle } from "./DrawerTitle.vue";
+export { DrawerClose, DrawerPortal, DrawerTrigger } from "vaul-vue";
diff --git a/package.json b/package.json
index 09eef1f..ed0fcf8 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
 		"tailwind-merge": "^2.4.0",
 		"tailwindcss-animate": "^1.0.7",
 		"valibot": "^0.37.0",
+		"vaul-vue": "^0.2.0",
 		"vue": "^3.4.36",
 		"vue-i18n": "^9.13.1",
 		"vue-i18n-routing": "^1.2.0",
diff --git a/pages/search.vue b/pages/search.vue
index 5d1b5dd..132567d 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import { SearchIcon } from "lucide-vue-next";
 import * as v from "valibot";
 import type { LocationQueryValue } from "vue-router";
 
 import type { SearchFormData } from "@/components/search-form.vue";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import {
 	Pagination,
 	PaginationEllipsis,
@@ -101,15 +103,38 @@ const facets = computed(() => {
 </script>
 
 <template>
-	<MainContent class="bg-frisch-marine pr-20">
+	<MainContent class="overflow-x-hidden bg-frisch-marine lg:overflow-x-auto lg:pr-20">
 		<h1 class="sr-only">{{ t("SearchPage.title") }}</h1>
-		<div v-if="!isLoading" class="grid h-full grid-cols-[minmax(650px,_1fr)_3fr]">
-			<SearchForm query="" @submit="onChange">
-				<SearchTextInput />
-				<SearchFilter :facets="facets" />
-			</SearchForm>
-			<div v-if="data != null" class="w-full bg-white p-8">
-				<div class="pt-9 font-semibold text-frisch-indigo">Suchergebnisse ({{ data.count }})</div>
+		<div v-if="!isLoading" class="grid h-full lg:grid-cols-[minmax(650px,_1fr)_auto_3fr]">
+			<div class="hidden content-start lg:block lg:content-stretch">
+				<SearchForm query="" @submit="onChange">
+					<SearchTextInput />
+					<SearchFilter :facets="facets" />
+				</SearchForm>
+			</div>
+			<div
+				class="hidden size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange lg:block"
+			/>
+			<div class="flex lg:hidden">
+				<Drawer>
+					<DrawerTrigger class="w-full">
+						<span class="flex w-full items-center bg-frisch-orange-searchform">
+							<SearchIcon :size="32" class="m-1.5 p-1 text-frisch-orange" />
+							<span class="font-semibold text-frisch-orange">Suche</span>
+						</span>
+					</DrawerTrigger>
+					<DrawerContent>
+						<SearchForm query="" @submit="onChange">
+							<SearchTextInput />
+							<SearchFilter :facets="facets" />
+						</SearchForm>
+					</DrawerContent>
+				</Drawer>
+			</div>
+			<div v-if="data != null" class="w-full bg-white px-3 pt-4 lg:p-8">
+				<div class="font-semibold text-frisch-indigo lg:pt-9">
+					Suchergebnisse ({{ data.count }})
+				</div>
 				<DataTable
 					class="flex align-top"
 					:data="data.results"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 882b180..52062a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,6 +89,9 @@ importers:
       valibot:
         specifier: ^0.37.0
         version: 0.37.0(typescript@5.6.2)
+      vaul-vue:
+        specifier: ^0.2.0
+        version: 0.2.0(radix-vue@1.9.3(vue@3.4.36(typescript@5.6.2)))(vue@3.4.36(typescript@5.6.2))
       vue:
         specifier: ^3.4.36
         version: 3.4.36(typescript@5.6.2)
@@ -5822,6 +5825,12 @@ packages:
       typescript:
         optional: true
 
+  vaul-vue@0.2.0:
+    resolution: {integrity: sha512-YV0zqxc8NiVzr1z/Awwbaty0UDDchxj5BfhFbLiYu+Uz0rCfSaDK2zwmuXZvejBJKLGbWw9I5GLHJRse14lQew==}
+    peerDependencies:
+      radix-vue: ^1.4.0
+      vue: ^3.3.0
+
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -13010,6 +13019,14 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.2
 
+  vaul-vue@0.2.0(radix-vue@1.9.3(vue@3.4.36(typescript@5.6.2)))(vue@3.4.36(typescript@5.6.2)):
+    dependencies:
+      '@vueuse/core': 10.11.0(vue@3.4.36(typescript@5.6.2))
+      radix-vue: 1.9.3(vue@3.4.36(typescript@5.6.2))
+      vue: 3.4.36(typescript@5.6.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.2