From 017870b61a105b933694059da6f1625956de772f Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 31 Jul 2025 22:19:23 +0200
Subject: [PATCH] refactor: Update App component to conditionally display
 navbar based on route

- Import `computed` and `useRoute` from Vue and Vue Router.
- Add a computed property to control the visibility of the navbar based on the current route.
- Update the App.vue template to conditionally render the navbar and footer only when not on the login page.
---
 src/App.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4bbe64f..3cd1907 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import Navbar from '@/components/layout/Navbar.vue'
 import Footer from '@/components/layout/Footer.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
@@ -8,8 +9,14 @@ import 'vue-sonner/style.css'
 import { auth } from '@/composables/useAuth'
 import { toast } from 'vue-sonner'
 
+const route = useRoute()
 const showLoginDialog = ref(false)
 
+// Hide navbar on login page
+const showNavbar = computed(() => {
+  return route.path !== '/login'
+})
+
 function handleLoginSuccess() {
   showLoginDialog.value = false
   toast.success('Welcome back!')
@@ -30,6 +37,7 @@ onMounted(async () => {
     <div class="relative flex min-h-screen flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
       <header
+        v-if="showNavbar"
         class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
           <Navbar />
@@ -43,7 +51,7 @@ onMounted(async () => {
         <router-view />
       </main>
 
-      <Footer />
+      <Footer v-if="showNavbar" />
     </div>
 
     <!-- Toast notifications -->