Add footer and improvements to navigation

app/pages/[...slug].vue

@@ -40,6 +40,10 @@ const breadcrumbs = computed(() => {
   
   return crumbs;
 });
+const backUrl = computed(() => {
+  if (slugPath.length <= 1) return '/';
+  return '/' + slugPath.slice(0, -1).join('/');
+});
 </script>
 
 <template>
@@ -51,10 +55,26 @@ const breadcrumbs = computed(() => {
     <!-- Grid -->
     <div class="flex-1 overflow-auto">
       <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-6">
+        <!-- Back Button -->
+        <NuxtLink
+          v-if="slugPath.length > 0"
+          :to="backUrl"
+          class="flex flex-col items-center justify-center p-5 rounded-2xl bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/10 transition-all cursor-pointer group select-none shadow-lg hover:shadow-xl"
+        >
+          <UIcon 
+            name="i-lucide-arrow-left" 
+            class="w-20 h-20 mb-3 drop-shadow-lg transition-transform group-hover:-translate-x-1 text-white/80" 
+          />
+          <span class="text-sm font-medium text-center text-white break-words line-clamp-2 w-full text-shadow">
+            Back
+          </span>
+        </NuxtLink>
+
+        <!-- Folder Items -->
         <DesktopItem v-for="item in items" :key="item.id" :item="item" />
       </div>
       
-      <div v-if="items.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">
+      <div v-if="items.length === 0 && slugPath.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">
         This folder is empty.
       </div>
     </div>