adjust for mobile

src/layouts/app.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="min-h-screen flex flex-col">
-    <header
-      class="bg-default/90 backdrop-blur border-b border-accented h-(--ui-header-height) sticky top-0 z-50 flex"
+  <div class="">
+    <!-- class="" -->
+    <UPageHeader
+      as="header"
+      :ui="{
+        root: [
+          'bg-default border-b border-accented sticky top-0 z-50 py-0 px-8',
+        ],
+        wrapper: [
+          'pt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4',
+        ],
+      }"
     >
-      <div class="px-2 bg-primary rounded-br-xs">
-        <UiLogoHaexhub class="p-2 size-12 shrink-0" />
-      </div>
-      <div
-        class="w-full max-w-(--ui-container) px-4 sm:px-6 lg:px-8 mx-auto flex items-center justify-between gap-3 h-full"
-      >
-        <div class="lg:flex-1 flex items-center gap-1.5 min-w-0">
+      <template #title>
+        <div class="flex items-center">
+          <UiLogoHaexhub class="size-12 shrink-0" />
+
           <NuxtLinkLocale
             class="link text-base-content link-neutral text-xl font-semibold no-underline flex items-center"
             :to="{ name: 'vaultOverview' }"
@@ -19,48 +25,24 @@
             </UiTextGradient>
           </NuxtLinkLocale>
         </div>
+      </template>
 
-        <div class="hidden lg:flex"></div>
+      <template #links>
+        <HaexMenuApplications :block="isSmallScreen" />
+        <UiDropdownVault :block="isSmallScreen" />
+      </template>
+    </UPageHeader>
 
-        <div class="flex items-center justify-end lg:flex-1 gap-1.5">
-          <HaexMenuApplications />
-          <UiDropdownVault />
-        </div>
-      </div>
-    </header>
-
-    <div class="flex flex-1">
-      <!-- <aside
-        id="sidebar"
-        class="border-r border-accented transition-all shrink-0 sticky top-(--ui-header-height) h-[calc(100vh-var(--ui-header-height))]"
-        :class="[!isVisible ? 'w-0' : 'w-16']"
-        role="dialog"
-        tabindex="-1"
-      >
-        <ul class="p-0 h-full flex flex-col gap-2">
-          <UiSidebarLink
-            v-for="item in menu"
-            v-bind="item"
-            :key="item.id"
-          />
-          <UiSidebarLink
-            v-for="item in extensionLinks"
-            :key="item.id"
-            v-bind="item"
-            icon-type="svg"
-          />
-        </ul>
-      </aside> -->
-
-      <main class="flex-1 bg-elevated">
-        <NuxtPage />
-      </main>
-    </div>
+    <main class="overflow-scroll flex bg-elevated">
+      <NuxtPage />
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
 const { currentVaultName } = storeToRefs(useVaultStore())
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>
 
 <i18n lang="yaml">

src/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-default isolate h-dvh py-4 sm:py-0">
+  <div class="bg-default isolate h-dvh">
     <slot />
   </div>
 </template>