Major overhaul to the theme and now functioning.

2026-01-05 16:07:30 -05:00
parent 5823ca3c39
commit a475dfeab6
5218 changed files with 1643729 additions and 13229 deletions
@@ -1,41 +1,78 @@
-<script setup>
-import { ref } from 'vue';
-import SambaExplorer from './components/SambaExplorer.vue';
-import ComicsManager from './components/ComicsManager.vue';
-import VideoDuplicatesManager from './components/VideoDuplicatesManager.vue';
-
-const currentView = ref('samba');
-</script>
-
 <template>
-  <div>
-    <nav>
-      <button @click="currentView = 'samba'" :class="{ active: currentView === 'samba' }">Samba Explorer</button>
-      <button @click="currentView = 'comics'" :class="{ active: currentView === 'comics' }">Comics Manager</button>
-      <button @click="currentView = 'duplicates'" :class="{ active: currentView === 'duplicates' }">Video Duplicates</button>
-    </nav>
+  <v-app>
+    <v-navigation-drawer v-model="drawer" app>
+      <v-list>
+        <v-list-item title="Server Manager" subtitle="Media & Files"></v-list-item>
+      </v-list>

-    <SambaExplorer v-if="currentView === 'samba'" />
-    <ComicsManager v-if="currentView === 'comics'" />
-    <VideoDuplicatesManager v-if="currentView === 'duplicates'" />
-  </div>
+      <v-divider></v-divider>
+
+      <v-list density="compact" nav>
+        <v-list-item
+          prepend-icon="mdi-folder-network"
+          title="Samba Explorer"
+          to="/samba"
+          value="samba"
+        ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-book-open-page-variant"
+          title="Comics Manager"
+          to="/comics"
+          value="comics"
+        ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-file-video-outline"
+          title="Video Duplicates"
+          to="/duplicates"
+          value="duplicates"
+        ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-download"
+          title="Downloader"
+          to="/downloader"
+          value="downloader"
+        ></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar color="primary" density="compact">
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      </template>
+
+      <v-app-bar-title>Server Manager Web App</v-app-bar-title>
+
+      <template v-slot:append>
+        <v-btn icon="mdi-dots-vertical"></v-btn>
+      </template>
+    </v-app-bar>
+
+    <v-main>
+      <v-container fluid>
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </v-container>
+    </v-main>
+  </v-app>
 </template>

-<style scoped>
-nav {
-  margin-bottom: 20px;
+<script setup>
+import { ref } from 'vue';
+
+const drawer = ref(true);
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
 }
-nav button {
-  padding: 10px 15px;
-  margin-right: 10px;
-  cursor: pointer;
-  border: 1px solid #ccc;
-  background-color: #f0f0f0;
-  color: black;
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
-nav button.active {
-  background-color: #007bff;
-  color: white;
-  border-color: #007bff;
-}
-</style>
+</style>