switch to nuxt ui

src/layouts/app.vue

@@ -1,83 +1,58 @@
 <template>
-  <div class="h-full flex-1 flex flex-col overflow-auto">
-    <nav
-      class="navbar rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2 py-0 sm:py-2"
+  <div class="min-h-screen flex flex-col">
+    <header
+      class="bg-default/70 backdrop-blur border-b border-accented h-(--ui-header-height) sticky top-0 z-50 flex"
     >
-      <UiTooltip :tooltip="isVisible ? t('sidebar.close') : t('sidebar.show')">
-        <button
-          ref="sidebarToogleRef"
-          type="button"
-          class="btn btn-text btn-square me-2 z-30"
-          aria-haspopup="dialog"
-          aria-expanded="false"
-          aria-controls="sidebar"
-          @click="toogleSidebar"
-        >
-          <Icon
-            :name="
-              isVisible
-                ? 'tabler:layout-sidebar-filled'
-                : 'tabler:layout-sidebar'
-            "
-            size="28"
-          />
-        </button>
-      </UiTooltip>
-
-      <div class="flex flex-1 items-center">
-        <NuxtLinkLocale
-          class="link text-base-content link-neutral text-xl font-semibold no-underline"
-          :to="{ name: 'vaultOverview' }"
-        >
-          <UiTextGradient class="text-nowrap">
-            {{ currentVaultName }}
-          </UiTextGradient>
-        </NuxtLinkLocale>
+      <div class="px-2 bg-primary rounded-br-xs">
+        <UiLogoHaexhub class="p-2 size-12 shrink-0" />
       </div>
-
-      <div></div>
-
-      <div class="flex items-center gap-x-4">
-        <div class="flex items-center">
-          <UiInput
-            v-model="search"
-            :label="t('search.label')"
-            with-clear-button
-            prepend-icon="mdi:magnify"
+      <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">
+          <NuxtLinkLocale
+            class="link text-base-content link-neutral text-xl font-semibold no-underline flex items-center"
+            :to="{ name: 'vaultOverview' }"
           >
-          </UiInput>
+            <UiTextGradient class="text-nowrap">
+              {{ currentVaultName }}
+            </UiTextGradient>
+          </NuxtLinkLocale>
         </div>
-        <HaexMenuNotifications />
-        <HaexMenuMain />
-      </div>
-    </nav>
 
-    <div class="flex h-full w-full overflow-auto">
-      <aside
+        <div class="hidden lg:flex"></div>
+
+        <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="sm:shadow-none transition-all h-full overflow-hidden border-r border-base-300"
+        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"
       >
-        <div class="drawer-body h-full">
-          <ul class="menu p-0 h-full rounded-none">
-            <HaexSidebarLink
-              v-for="item in menu"
-              v-bind="item"
-              :key="item.id"
-            />
-            <HaexSidebarLink
-              v-for="item in extensionLinks"
-              :key="item.id"
-              v-bind="item"
-              icon-type="svg"
-            />
-          </ul>
-        </div>
-      </aside>
+        <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="w-full h-full overflow-auto">
+      <main class="flex-1 bg-elevated">
         <NuxtPage />
       </main>
     </div>
@@ -85,18 +60,7 @@
 </template>
 
 <script setup lang="ts">
-const { t } = useI18n()
-
 const { currentVaultName } = storeToRefs(useVaultStore())
-
-const { extensionLinks } = storeToRefs(useExtensionsStore())
-
-const { menu, isVisible } = storeToRefs(useSidebarStore())
-const toogleSidebar = () => {
-  isVisible.value = !isVisible.value
-}
-
-const { search } = storeToRefs(useSearchStore())
 </script>
 
 <i18n lang="yaml">

src/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-screen h-dvh bg-base-200 min-w-52 overflow-auto">
+  <div class="bg-default isolate h-dvh">
     <slot />
   </div>
 </template>