feat: drawer

Author: sifferhans

frontend/app/components/PageLayout.vue

@@ -3,9 +3,11 @@ withDefaults(
   defineProps<{
     title: string
     bottomPadding?: boolean
+    shadow?: boolean
   }>(),
   {
     bottomPadding: true,
+    shadow: true,
   },
 )
 
@@ -18,7 +20,9 @@ const hasScrolled = computed(() => y.value > 25)
     <div class="sticky top-0 z-10">
       <ProgressiveBlur
         direction="up"
-        class="from-shadow-blank/0 to-shadow-default bg-linear-to-t"
+        :class="[
+          shadow && 'from-shadow-blank/0 to-shadow-default bg-linear-to-t',
+        ]"
       >
         <header
           :class="[

frontend/app/components/achievements/AchievementBadge.vue

@@ -20,13 +20,7 @@ watch(open, (isOpen) => {
 
 <template>
   <div>
-    <UModal
-      v-model:open="open"
-      :ui="{ content: 'bg-background-default' }"
-      :transition="false"
-      modal
-      fullscreen
-    >
+    <DesignDrawer v-model:open="open">
       <button
         class="grid aspect-square place-items-center overflow-hidden rounded-full"
       >
@@ -44,6 +38,7 @@ watch(open, (isOpen) => {
       <template #content="{ close }">
         <PageLayout
           :title="achievement.achievedAt ? 'Unlocked!' : 'Achievement'"
+          :shadow="false"
         >
           <template #action>
             <DesignIconButton icon="lucide:x" @click="close" />
@@ -92,6 +87,6 @@ watch(open, (isOpen) => {
           </div>
         </PageLayout>
       </template>
-    </UModal>
+    </DesignDrawer>
   </div>
 </template>

frontend/app/components/design/DesignDrawer.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const open = defineModel<boolean>('open')
+const close = () => {
+  open.value = false
+}
+</script>
+
+<template>
+  <UDrawer
+    v-model:open="open"
+    :ui="{
+      content:
+        'bg-background-raised rounded-t-list ring-border-default h-[95%]',
+      overlay: 'bg-black/50',
+      handle: 'bg-border-default!',
+    }"
+    should-scale-background
+    :set-background-color-on-scale="false"
+  >
+    <template #default>
+      <slot />
+    </template>
+    <template #content>
+      <slot name="content" :close />
+    </template>
+  </UDrawer>
+</template>

frontend/nuxt.config.ts

@@ -17,6 +17,9 @@ export default defineNuxtConfig({
     typedPages: true,
   },
   app: {
+    rootAttrs: {
+      'data-vaul-drawer-wrapper': '',
+    },
     head: {
       title: 'Interact',
       meta: [