App.vue

<template>
  <v-app>
    <v-app-bar v-if="!$route.meta.hideNavbar">
      <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>VUETIFY 3</v-app-bar-title>
      
      <!-- 👈 User info -->
      <v-chip 
        v-if="mainStore.userInformation.Username"
        class="ma-2"
        color="primary"
        size="small"
      >
        {{ mainStore.userInformation.Username }}
        <template v-slot:append>
          <v-icon>mdi-account</v-icon>
        </template>
      </v-chip>
      
      <v-spacer />
      <v-btn @click="emptyListofUsers">
        <v-icon>mdi-logout</v-icon>
      </v-btn>
    </v-app-bar>
    
    <v-navigation-drawer v-model="drawer" temporary>
      <v-list density="compact" class="pt-0">
        <v-list-item
          v-for="(item, i) in filteredRoutes"
          :key="i"
          :value="item"
          color="primary"
          :to="item.path"
        >
          <template v-slot:prepend>
            <v-icon :icon="item.icon"></v-icon>
          </template>
          <v-list-item-title v-text="item.name"></v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMainStore } from './stores/counter'
import { useActivityStore } from './stores/ProductCounter.js'

const router = useRouter()
const route = useRoute()
const mainStore = useMainStore()
const productStore = useActivityStore()
const drawer = ref(false)

const filteredRoutes = computed(() => {
  const allRoutes = router.options.routes
  const isAuth = Object.keys(mainStore.userInformation).length > 0
  
  return allRoutes.filter(route => {
    if (route.name === 'Login' && isAuth) return false
    return true
  })
})

const emptyListofUsers = () => {
  mainStore.logout()
  productStore.clearSessionProducts()
  alert('Logout Successful! Products reset.')
  router.push('/login')
}
</script>