feat: update layout

app.config.ts

@@ -32,6 +32,9 @@ export default defineAppConfig({
       constrained: "container max-w-[auto]",
     },
     card: {
+      header: {
+        padding: "p-4 sm:p-4",
+      },
       body: {
         padding: "p-4 sm:p-4",
       },
@@ -56,9 +59,6 @@ export default defineAppConfig({
       error: "mt-2 text-red-500 dark:text-red-400 text-sm",
     },
     table: {
-      td: {
-        base: "whitespace-normal",
-      },
       default: {
         sortAscIcon: "i-fluent-arrow-sort-down-20-filled",
         sortDescIcon: "i-fluent-arrow-sort-up-20-filled",

app.vue

@@ -67,10 +67,8 @@ useSeoMeta({
     <NuxtPage />
 
     <UNotifications />
+    <SearchBar />
 
-    <LazyLibraryAdd />
-    <LazyLibraryAddQuick />
-    <LazyLibraryEdit />
-    <LazyLibraryRemove />
+    <LazyLibraryCollectionCreate />
   </NuxtLayout>
 </template>

index.d.ts

@@ -1,6 +1,7 @@
 declare module "#app" {
   interface PageMeta {
     stickyNav?: boolean;
+    childOverflow?: boolean;
   }
 }
 

layouts/default.vue

@@ -8,11 +8,10 @@ const sticky = computed(() => route.meta.stickyNav as boolean);
   <div>
     <NavigationBar :sticky="sticky" />
 
-    <UContainer>
+    <UContainer class="min-h-[80vh]">
       <slot />
     </UContainer>
 
     <TheFooter />
-    <SearchBar />
   </div>
 </template>

layouts/full.vue

@@ -7,10 +7,11 @@ const sticky = computed(() => route.meta.stickyNav as boolean);
 <template>
   <div>
     <NavigationBar :sticky="sticky" />
-    <main class="pb-6">
+
+    <main class="min-h-[80vh] pb-6">
       <slot />
     </main>
+
     <TheFooter />
-    <SearchBar />
   </div>
 </template>

layouts/library.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { type UserCollectionsResponse } from "@/types/collections";
+
+const { $pb } = useNuxtApp();
+const { currentUser } = useAuthentication();
+const { open } = useLibraryCollectionCreate();
+
+const route = useRoute();
+
+const { data: links, refresh } = await useAsyncData(
+  () => {
+    return $pb.send<UserCollectionsResponse>(
+      `/api/user-collections/${currentUser.value?.id}`,
+      {
+        method: "GET",
+        expand: "collection",
+      },
+    );
+  },
+  {
+    transform: (collections) => [
+      collections.items.map(
+        (
+          item,
+        ): {
+          icon?: string;
+          label: string;
+          to?: string;
+          click?: () => void;
+        } => ({
+          label: item.collection!.name,
+          to: item.collection!.id,
+        }),
+      ),
+    ],
+  },
+);
+
+const sticky = computed(() => route.meta.stickyNav as boolean);
+const overflow = computed(() => route.meta.childOverflow ?? true);
+</script>
+
+<template>
+  <div>
+    <NavigationBar :sticky="sticky" />
+
+    <main class="container mx-auto min-h-[80vh] overflow-x-hidden px-6 pb-6">
+      <div class="flex flex-col gap-6 sm:flex-row">
+        <aside v-if="links" class="hidden w-48 flex-shrink-0 sm:w-48 lg:block">
+          <AppSideNavigation :links="links" />
+          <UButton
+            class="mt-3 w-full"
+            active-class="bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-100"
+            icon="i-fluent-collections-20-filled"
+            color="gray"
+            variant="ghost"
+            @click="() => open(refresh)"
+          >
+            {{ $t("library.createCollection") }}
+          </UButton>
+        </aside>
+        <div class="flex-1" :class="{ 'overflow-x-auto': overflow }">
+          <slot />
+        </div>
+      </div>
+    </main>
+
+    <TheFooter />
+  </div>
+</template>

layouts/setting.vue

@@ -53,6 +53,7 @@ const links = computed(() => [
 <template>
   <div>
     <NavigationBar :sticky="sticky" />
+
     <main class="container mx-auto min-h-[80vh] overflow-x-hidden px-6 pb-6">
       <AppH1 class="mb-6">{{ $t("general.settings") }}</AppH1>
       <div class="flex flex-col gap-6 sm:flex-row">
@@ -62,7 +63,7 @@ const links = computed(() => [
         </div>
       </div>
     </main>
+
     <TheFooter />
-    <SearchBar />
   </div>
 </template>