zwischenstand

src/layouts/app.vue

@@ -1,32 +1,27 @@
 <template>
-  <div class="w-full h-full flex flex-col">
+  <div class="w-full h-full flex flex-col min-w-min">
     <nav
-      class="navbar bg-base-100 max-sm:rounded-box max-sm:shadow sm:border-b border-base-content/25 sm:z-20 relative px-2"
+      class="navbar bg-base-100 rounded-b max-sm:shadow border-b border-base-content/25 sm:z-20 relative px-2"
     >
       <button
         type="button"
-        class="btn btn-text btn-square me-2"
+        class="btn btn-text btn-square me-2 z-50"
         aria-haspopup="dialog"
         aria-expanded="false"
         aria-controls="sidebar"
-        data-overlay="#sidebar"
+        @click="toogleSidebar"
+        ref="sidebarToogleRef"
       >
         <Icon name="mage:dash-menu" size="28" />
       </button>
-      <!-- <button
-        type="button"
-        class="btn btn-text max-sm:btn-square me-2"
-        aria-haspopup="dialog"
-        aria-expanded="false"
-        aria-controls="sidebar"
-        data-overlay="#sidebar"
-      >
-        <span class="icon-[tabler--menu-2] size-5"></span>
-      </button> -->
+
       <div class="flex flex-1 items-center">
-        <a class="link text-base-content link-neutral text-xl font-semibold no-underline" href="#">
-          <UiTextGradient>Haex Hub</UiTextGradient>
-        </a>
+        <NuxtLinkLocale
+          class="link text-base-content link-neutral text-xl font-semibold no-underline"
+          :to="{ name: 'vaultOverview' }"
+        >
+          <UiTextGradient class="text-nowrap">Haex Hub</UiTextGradient>
+        </NuxtLinkLocale>
       </div>
       <div class="navbar-end flex items-center gap-4 me-4">
         <div
@@ -158,53 +153,35 @@
       </div>
     </nav>
 
-    <aside
-      id="sidebar"
-      class="overlay sm:shadow-none overlay-open:translate-x-0 drawer drawer-start hidden sm:absolute max-w-14 sm:flex sm:translate-x-0 sm:pt-12 z-10"
-      role="dialog"
-      tabindex="-1"
-    >
-      <div class="drawer-body px-0 pt-4">
-        <ul class="menu p-0">
-          <!-- <li
-           
-            
+    <div class="flex h-full">
+      <aside
+        id="sidebar"
+        class="sm:shadow-none drawer max-w-14 transition-all"
+        :class="[!isVisible ? 'w-0' : 'w-14']"
+        role="dialog"
+        tabindex="-1"
+      >
+        <div class="drawer-body px-0">
+          <ul class="menu p-0">
+            <UiSidebarLink v-bind="item" v-for="item in menu" :key="item.id" />
+            <UiSidebarLinkExtension
+              v-bind="item"
+              v-for="item in availableExtensions"
+              :key="item.id"
+            />
+          </ul>
+        </div>
+      </aside>
 
-          > -->
-          <UiSidebarLink v-bind="item" v-for="item in menu" :key="item.id" />
-          <!-- <UiTooltip
-              :tooltip="item.tooltip || item.name"
-              direction="right-start"
-            >
-              <NuxtLinkLocale
-                :class="{ ['bg-base-300']: isActive(item.id).value }"
-                :to="{
-                  name: 'extension',
-                  params: { extensionId: item.id, vaultId: 'test' },
-                }"
-                class="flex items-center justify-start hover:text-primary cursor-pointer tooltip-toogle"
-              >
-                <Icon
-                  :name="item.icon"
-                  class="size-6"
-                />
-                <i
-                  :class="item.icon"
-                  class="shrink-0 size-8"
-                />
-              </NuxtLinkLocale>
-            </UiTooltip> -->
-          <!-- </li> -->
-        </ul>
-      </div>
-    </aside>
-
-    <div class="overflow-hidden transition-all relative w-full">
-      <div class="h-full overflow-scroll sm:pl-14">
-        <slot />
+      <div class="overflow-hidden transition-all relative w-full">
+        <div
+          class="h-full overflow-scroll transition-all pl-0"
+          :class="[isVisible ? 'sm:pl-14 ' : ' pl-0']"
+        >
+          <slot />
+        </div>
       </div>
     </div>
-
     <!--  <main class="sm:pl-14">
       <NuxtPage />
     </main> -->
@@ -212,14 +189,26 @@
 </template>
 
 <script setup lang="ts">
-const { t } = useI18n();
+import { NuxtLinkLocale } from "#components";
 
+const { t } = useI18n();
+const { menu, isVisible } = storeToRefs(useSidebarStore());
+const sidebarToogleRef = useTemplateRef("sidebarToogleRef");
+onClickOutside(sidebarToogleRef, () => {
+  if (currentScreenSize.value === "xs") {
+    isVisible.value = false;
+  }
+});
 const { notifications } = storeToRefs(useNotificationStore());
 
-const { menu } = storeToRefs(useSidebarStore());
 const { isActive } = useExtensionsStore();
 const { closeAsync } = useVaultStore();
+const { currentScreenSize } = storeToRefs(useUiStore());
 const onExtensionSelectAsync = async (id: string) => {};
+const { availableExtensions } = storeToRefs(useExtensionsStore());
+const toogleSidebar = () => {
+  isVisible.value = !isVisible.value;
+};
 
 const onVaultCloseAsync = async () => {
   await closeAsync();