header refacto

HugoRCD · Jan 18, 2025 · 26329d5 · 26329d5
1 parent c42ad4a
commit 26329d5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git a/apps/base/assets/css/base.css b/apps/base/assets/css/base.css
@@ -14,7 +14,9 @@
 
 :root {
   --ui-radius: var(--radius-sm);
+
   --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
+
   .default {
     --ui-container: var(--container-5xl);
   }

diff --git a/apps/base/components/ShelveMeta.vue b/apps/base/components/ShelveMeta.vue
@@ -15,7 +15,7 @@ useHead({
   link: link,
 })
 
-const seoMetadata = {
+const seoMetadata = ref({
   title: props.title || appTitle,
   description: props.description || appDescription,
   author: 'Hugo Richard',
@@ -27,14 +27,14 @@ const seoMetadata = {
   ogSiteName: props.title || appTitle,
   ogTitle: props.title || appTitle,
   ogDescription: props.description || appDescription,
-}
+})
 
 if (props.defaultOgImage) {
-  seoMetadata.twitterImage = ogImage
-  seoMetadata.ogImage = ogImage
+  seoMetadata.value.twitterImage = ogImage
+  seoMetadata.value.ogImage = ogImage
 }
 
-useSeoMeta(seoMetadata)
+useSeoMeta(seoMetadata.value)
 </script>
 
 <template>

diff --git a/apps/lp/app/components/layout/Navbar.vue b/apps/lp/app/components/layout/Navbar.vue
@@ -37,32 +37,29 @@ items.push(githubItem)
 <template>
   <div class="z-[99] relative">
     <Blur position="both" />
-    <div class="fixed top-0 flex w-full">
-      <div class="z-50 flex w-full items-center justify-between sm:justify-around p-4 sm:px-5 sm:py-2">
+    <UHeader class="fixed w-full p-4 px-5 py-2 bg-transparent backdrop-blur-none border-none" mode="drawer">
+      <template #left>
         <Logo />
-        <div class="flex items-center">
-          <UNavigationMenu
-            color="neutral"
-            :items
-            class="hidden sm:flex"
-          >
-            <template #components-trailing>
-              <UBadge variant="subtle" size="sm" />
-            </template>
-          </UNavigationMenu>
-        </div>
+      </template>
+
+      <UNavigationMenu color="neutral" :items>
+        <template #components-trailing>
+          <UBadge variant="subtle" size="sm" />
+        </template>
+      </UNavigationMenu>
+
+      <template #right>
         <div class="flex items-center gap-2">
-          <div class="flex sm:hidden">
-            <UDropdownMenu :items>
-              <UButton variant="ghost" icon="lucide:menu" />
-            </UDropdownMenu>
-          </div>
           <div>
             <UButton label="Open App" size="sm" @click="navigateTo(`https://app.shelve.cloud/login`, { external: true })" />
           </div>
         </div>
-      </div>
-    </div>
+      </template>
+
+      <template #content>
+        <UNavigationMenu :items orientation="vertical" class="-mx-2.5" />
+      </template>
+    </UHeader>
   </div>
 </template>