Add Waybar-style footer with sticky navbar/footer layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 21:45:46 +00:00
parent a8ef10498e
commit ac5f47fcaa
2 changed files with 160 additions and 9 deletions
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -5,12 +5,28 @@ import Footer from "@/components/Footer.vue";
 </script>

 <template>
-    <Navbar class="no-print sticky" />
-    <RouterView v-slot="{ Component }">
-        <Transition name="slide" mode="out-in">
-            <component :is="Component" :key="$route.path" />
-        </Transition>
-    </RouterView>
-
-    <!-- <Footer style="height: 10vh" /> -->
+    <div class="app-layout">
+        <Navbar class="no-print sticky top-0 z-50" />
+        <main class="app-content">
+            <RouterView v-slot="{ Component }">
+                <Transition name="slide" mode="out-in">
+                    <component :is="Component" :key="$route.path" />
+                </Transition>
+            </RouterView>
+        </main>
+        <Footer class="sticky bottom-0 z-50" />
+    </div>
 </template>
+
+<style scoped>
+.app-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.app-content {
+    flex: 1;
+    overflow-y: auto;
+}
+</style>