🎨 Simplify app common components

likecoin · Aug 17, 2024 · 880f03f · 880f03f
1 parent 4638b63
commit 880f03f
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 42 deletions.
diff --git a/app.vue b/app.vue
@@ -13,7 +13,16 @@
       <AuthPage class="pb-6" />
     </UModal>
 
-    <AppMenu class="hidden lg:flex w-full max-w-[320px] border-r border-gray-200 dark:border-gray-800" />
+    <AppMenu
+      :class="[
+        'max-lg:hidden',
+        'overflow-y-auto',
+        'w-full',
+        'max-w-[320px]',
+        'border-r',
+        'border-gray-200 dark:border-gray-800',
+      ]"
+    />
     <USlideover v-model="isMobileMenuOpen" side="left">
       <UButton
         color="gray"
@@ -25,7 +34,7 @@
         padded
         @click="isMobileMenuOpen = false"
       />
-      <AppMenu />
+      <AppMenu class="overflow-y-auto" />
     </USlideover>
 
     <NuxtPage :class="['overflow-y-auto', { 'opacity-0': !userStore.address }]" />
@@ -54,10 +63,10 @@ watch(() => route.fullPath, () => {
 
 useHead({
   htmlAttrs: {
-    class: 'h-svh',
+    class: 'h-dvh',
   },
   bodyAttrs: {
-    class: 'h-svh text-gray-700 dark:text-gray-200 dark:bg-gray-900',
+    class: 'h-dvh text-gray-700 dark:text-gray-200 dark:bg-gray-900',
     style: 'padding-bottom: env(safe-area-inset-bottom);',
   },
   meta: [

diff --git a/components/AppHeaderBase.vue b/components/AppHeaderBase.vue
@@ -0,0 +1,21 @@
+<template>
+  <header
+    :class="[
+      'sticky',
+      'z-10',
+      'top-0',
+
+      'flex',
+      'items-center',
+      'gap-4',
+
+      'min-h-[64px]',
+
+      'bg-white dark:bg-gray-900',
+      'border-b',
+      'border-gray-200 dark:border-gray-800',
+    ]"
+  >
+    <slot />
+  </header>
+</template>
diff --git a/components/AppMenu.vue b/components/AppMenu.vue
@@ -1,28 +1,18 @@
 <template>
-  <UCard
-    :ui="{
-      base: 'flex flex-col h-full',
-      rounded: 'rounded-none',
-      header: { base: 'flex items-center gap-4' },
-      body: { base: 'grow' },
-      footer: { base: 'space-y-2 pb-6 sm:pb-auto' },
-    }"
-  >
-    <template #header>
-      <AppLogo class="w-6" />
+  <div class="flex flex-col">
+    <AppHeaderBase class="w-full px-5">
+      <AppLogo class="h-6" />
       <span class="font-mono font-bold">book3.app</span>
-    </template>
+    </AppHeaderBase>
 
-    <div class="flex flex-col gap-2 grow">
-      <UVerticalNavigation :links="menuLinks" />
-    </div>
+    <div class="flex flex-col gap-4 grow w-full p-5">
+      <UVerticalNavigation class="grow" :links="menuLinks" />
 
-    <template #footer>
       <UButton variant="outline" size="xl" block @click="logout">
         Logout
       </UButton>
-    </template>
-  </UCard>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/components/AppPageBody.vue b/components/AppPageBody.vue
@@ -0,0 +1,23 @@
+<template>
+  <UContainer as="main" :ui="ui">
+    <slot />
+  </UContainer>
+</template>
+
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps<{
+  ui?: {
+    base?: string;
+    padding?: string;
+    constrained?: string;
+  };
+}>();
+
+const ui = computed(() => ({
+  base: twMerge('w-full space-y-6', props?.ui?.base),
+  padding: twMerge('pt-6 pb-20', props?.ui?.padding),
+  constrained: props?.ui?.constrained || '',
+}));
+</script>
diff --git a/components/PageHeader.vue → components/AppPageHeader.vue b/components/PageHeader.vue → components/AppPageHeader.vue
@@ -1,11 +1,5 @@
 <template>
-  <UContainer
-    as="header"
-    :ui="{
-      base: 'sticky top-0 flex justify-between items-center gap-4 w-full min-h-[64px] bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800',
-      constrained: ''
-    }"
-  >
+  <AppHeaderBase class="justify-between w-full px-5">
     <div class="flex items-center gap-2">
       <UButton
         v-if="isShowMenuToggle"
@@ -20,7 +14,7 @@
     </div>
 
     <slot name="trailing" />
-  </UContainer>
+  </AppHeaderBase>
 </template>
 
 <script setup lang="ts">

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-stretch flex-grow">
-    <PageHeader title="Books">
+    <AppPageHeader title="Books">
       <template #trailing>
         <UButton class="relative">
           <input
@@ -12,12 +12,9 @@
           Open EPUB
         </UButton> 
       </template>
-    </PageHeader>
+    </AppPageHeader>
 
-    <UContainer
-      as="main"
-      :ui="{ base: 'w-full', padding: 'py-6', constrained: '' }"
-    >
+    <AppPageBody>
       <ul class="grid sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4 justify-stretch items-stretch">
         <li v-for="book in books" :key="book.name">
           <UCard :ui="{ body: { base: 'space-y-4' } }">
@@ -36,10 +33,10 @@
           </UCard>
         </li>
       </ul>
-    </UContainer>
+    </AppPageBody>
 
     <UModal v-model="isReaderOpen" :fullscreen="true">
-      <PageHeader
+      <AppPageHeader
         class="sticky top-0"
         :title="bookName || 'Reader'"
         :is-show-menu-toggle="false"
@@ -52,7 +49,7 @@
             @click="isReaderOpen = false"
           />
         </template>
-      </PageHeader>
+      </AppPageHeader>
 
       <div class="relative flex-grow">
         <div

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col items-stretch flex-grow">
-    <PageHeader title="Settings" /> 
+    <AppPageHeader title="Settings" /> 
 
-    <UContainer class="w-full py-6" as="main">
+    <AppPageBody :ui="{ constrained: 'max-w-screen-md' }">
       <UFormGroup label="Wallet Address">
         <UInput
           class="font-mono"
@@ -24,7 +24,7 @@
         </UInput>
 
       </UFormGroup>
-    </UContainer>
+    </AppPageBody>
   </div>
 </template>