Refactor: Extract sidebar navigation from individual views into a new AppSidebar component.

src/App.vue

@@ -1,13 +1,28 @@
 <script setup>
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import AppSidebar from './components/AppSidebar.vue'
+
+const route = useRoute()
 </script>
 
 <template>
-  <RouterView v-slot="{ Component }">
-    <transition name="fade" mode="out-in">
-      <component :is="Component" />
-    </transition>
-  </RouterView>
+  <!-- Login Layout (Full Screen) -->
+  <div v-if="route.name === 'login'" class="h-screen w-full">
+    <RouterView />
+  </div>
+
+  <!-- Main Layout (Sidebar + Content) -->
+  <div v-else class="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
+    <AppSidebar />
+
+    <div class="flex-1 h-full overflow-hidden relative">
+      <RouterView v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </RouterView>
+    </div>
+  </div>
 </template>
 
 <style>