Layout behavior using v-app-bar and v-navigation-drawer

[tiagobrilhante]

I created a layout for my application that uses a v-app-bar fixed at the top of the screen, and a v-navigation-drawer that relies on a store to determine whether it's in rail mode or not. However, when reloading the page, the components flicker, and the menu overlaps the navbar before settling into its proper position. The content in the slot also suffers from the same issue. I'm using Nuxt with the Vuetify plugin for Nuxt.

here is my layout file:

// authenticated-user.vue
<script setup>
const navigationStore = useNavigationStore()

// Watch route changes to update active route
const route = useRoute()
watch(() => route.path, (newPath) => {
  navigationStore.setActiveRoute(newPath)
}, {immediate: true})
</script>

<template>
  <v-app class="bg-grey">
    <NavBar />
    <MenusLeftMenu />

    <v-main>
      <v-container>
        <v-sheet
          border="dashed md"
          color="surface-light"
          rounded="lg"
        >
          <slot/>
        </v-sheet>
      </v-container>
    </v-main>
  </v-app>
</template>

here my NavBar

// NavBar.vue
<script setup lang="ts">
const navigationStore = useNavigationStore()
const { loggedIn, user, session, fetch, clear, openInPopup } = useUserSession();

function logout() {
  clear();
  navigateTo('/');
}

</script>
<template>

  <v-app-bar app elevation=2 theme="dark" density="comfortable">
    <v-app-bar-nav-icon @click="navigationStore.toggleMenu()"></v-app-bar-nav-icon>
    <v-app-bar-title>iBill</v-app-bar-title>
    <template v-slot:append v-if="loggedIn">
      <v-menu>
        <template v-slot:activator="{ props }">
          <v-btn icon v-bind="props">
            <v-avatar color="primary" size="small">
              <span class="text-h6 text-white">{{ user?.login?.charAt(0) || 'U' }}</span>
            </v-avatar>
          </v-btn>
        </template>
        <v-list>
          <v-list-item>
            <v-list-item-title>{{ user?.login || 'User' }}</v-list-item-title>
          </v-list-item>
          <v-divider></v-divider>
          <v-list-item @click="logout">
            <template v-slot:prepend>
              <v-icon>mdi-logout</v-icon>
            </template>
            <v-list-item-title>Logout</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </template>
  </v-app-bar>

</template>

and here is my LeftMenu

<script setup lang="ts">
const navigationStore = useNavigationStore()
const route = useRoute()


const isActiveRoute = (itemRoute: string) => {
  return route.path === itemRoute
}

interface MenuItem {
  title: string
  icon: string
  to: string
  badge?: string | number
  children?: MenuItem[]
}

const menuItems: MenuItem[] = [
  { title: 'Dashboard', icon: 'mdi-view-dashboard', to: '/home' },
  { title: 'Configurações', icon: 'mdi-cog', to: '/admin/settings' },
]



</script>
<template>


  <v-navigation-drawer app
    :model-value="true"
    :rail="navigationStore.isMenuCollapsed"
  >
    <!-- Header -->
    <v-list-item v-if="!navigationStore.isMenuCollapsed" title="Menu" class="text-h6"/>

    <v-divider></v-divider>

    <!-- Menu Items -->
    <v-list density="compact" nav>
      <v-list-item
        v-for="item in menuItems"
        :key="item.title"
        :to="item.to"
        link
        :prepend-icon="item.icon"
        :title="item.title"
        :active="isActiveRoute(item.to)"
        color="primary"
      >

        <!-- Tooltip para modo colapsado -->
        <v-tooltip
          v-if="navigationStore.isMenuCollapsed"
          activator="parent"
          location="end"
        >
          {{ item.title }}
        </v-tooltip>

        <!-- Badge se existir -->
        <template v-if="item.badge && !navigationStore.isMenuCollapsed" v-slot:append>
          <v-badge color="error" :content="item.badge" />
        </template>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>

</template>

BTW, there is my store...

import { defineStore } from 'pinia'

interface NavigationState {
  activeRoute: string
  isMenuCollapsed: boolean
}

export const useNavigationStore = defineStore('navigation', {
  state: (): NavigationState => ({
    activeRoute: '/home',
    isMenuCollapsed: false,
  }),

  getters: {

    isCurrentRoute: (state) => {
      return (route: string) => state.activeRoute === route
    },

  },

  actions: {
    setActiveRoute(route: string) {
      this.activeRoute = route
    },

    toggleMenu() {
      this.isMenuCollapsed = !this.isMenuCollapsed
    },

  },

  persist: {
    pick: ['activeRoute', 'isMenuCollapsed']
  }
})

that's the issue: