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

@@ -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 -->