fix: sidebar background

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lib-vue",
   "private": true,
-  "version": "1.7.3",
+  "version": "1.7.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/forms/MediaForm.vue

@@ -37,8 +37,8 @@ reset();
     <img
       :src="getStorageMediaUrl(props.media.file_name, props.media.book_id)"
       alt=""
-      class="mx-auto mb-4 max-h-96 max-w-xs">
-    <label class="mb-4">
+      class="mx-auto mb-4 max-h-96 max-w-xs rounded-md">
+    <label class="w-full mb-4">
       <span>File name</span>
       <input
         v-model="mediaFileName"

src/layouts/LayoutSidebar.vue

@@ -22,7 +22,7 @@ onBeforeUnmount(() => {
     class="relative flex gap-2">
     <TheSidebar
       v-model="sidebarCollapsed"
-      class="fixed left-0 top-0 h-full w-48 overflow-x-hidden overflow-y-scroll"
+      class="fixed left-0 top-0 z-10 h-full w-48 overflow-x-hidden overflow-y-scroll dark:bg-gray-900"
       :class="{ 'w-48': !sidebarCollapsed, 'w-12': sidebarCollapsed }" />
     <router-view
       :sidebar-collapsed="sidebarCollapsed"

src/views/MediaGallery.vue

@@ -52,7 +52,7 @@ getTotal();
 </script>
 
 <template>
-  <main class="flex flex-wrap gap-3">
+  <main class="flex flex-wrap gap-3 px-2">
     <form
       action=""
       class="flex w-full items-center gap-4">
@@ -85,9 +85,11 @@ getTotal();
     <div
       v-for="dir in filteredMediaList"
       :key="dir.bookID">
-      <h2 class="mb-2">
-        Book {{ dir.bookID }} {{ dir.bookName }}
-      </h2>
+      <RouterLink
+        :to="{name: 'book-view', params: {id:dir.bookID}}"
+        class="mb-2 flex">
+        Book: {{ dir.bookID }} {{ dir.bookName }}
+      </RouterLink>
       <button
         v-for="(img, index) in dir.mediaList"
         :key="index"