I m currently working on a e-commerce website and i started to make the admin pages (dashboard , CRM , Products etc). I have a navigation set for the main page ( e.g. Home , About us , Shop , Profile etc) and i need to have a separate navigation showed only for the admin pages or for the all admin endpoints. How to do that ?

Relevant pieces of code : These is index.js in vue-router

import { createRouter, createWebHistory } from 'vue-router'
import IndexPage from '../components/IndexPage.vue'
import RegisterPage from '../components/UserLogInAnRegister/RegisterPage.vue'
import LoginPage from '../components/UserLogInAnRegister/LoginPage.vue'
import ConfirmationPage from '../components/UserHelpers/Confirmation.vue'
import ForgotPasswordPage from '../components/UserHelpers/ForgotPassword.vue'
import EmailForForgotPasswordPage from '../components/UserHelpers/EmailForForgotPassword.vue'
import LogoutPage from '../components/UserHelpers/LogoutPage.vue'
import ProfilePage from '../components/UserData/ProfilePage.vue'
import PersonalProfilePage from '../components/UserData/PersonalData.vue'
import ChangingDataConfirmation from '../components/UserHelpers/ChangingAccountData.vue'
import AdressesData from '../components/UserData/AddressesData.vue'
import OrdersData from '@/components/UserData/OrdersData.vue'
import ProductsData from '@/components/Products/ProductsMainPage.vue'
import AdminLogin from '@/components/AdminPages/AdminLogin.vue'
import AdminDashboard from '@/components/AdminPages/AdminDashboard.vue'
import store from '@/store'

const routes = [
  {
    path: '/',
    name: 'index',
    component: IndexPage
  },
  {
    path: '/home',
    name: 'index',
    component: IndexPage
  },
  {
    path: "/register",
    name: 'register',
    component: RegisterPage
  },
  {
    path: "/login",
    name: 'login',
    component: LoginPage
  },
  {
    path: "/confirmare/:token",
    name: "confirmation",
    component: ConfirmationPage
  },
  {
    path: "/forgotpassword/:token",
    name: "forgotpassword",
    component: ForgotPasswordPage
  },
  {
    path: "/forgotpassword",
    name: "emailForForgotPassword",
    component: EmailForForgotPasswordPage
  },
  {
    path: "/logout",
    name: "LogoutPage",
    component: LogoutPage
  },
  {
    path: "/profile",
    name: "ProfilePage",
    component: ProfilePage
  },
  {
    path: "/profile/data",
    name: "PersonalProfileData",
    component: PersonalProfilePage
  },
  {
    path: "/account/changeEmail/:token",
    name: "ChangingAccountData",
    component: ChangingDataConfirmation
  },
  {
    path: "/profile/addresses",
    name: "Adresses",
    component: AdressesData
  },
  {
    path: "/profile/orders",
    name: "Orders",
    component: OrdersData
  },
  {
    path: "/shop",
    name: "ProductsMainPage",
    component: ProductsData
  },
  {
    path: "/admin/login",
    name: "AdminLogin",
    component: AdminLogin,
    meta: {requiresAuth: true,requiresAdmin: true},
  },
  {
    path: "/admin/dashboard",
    name: "AdminDashboard",
    component: AdminDashboard,
    meta: {requiresAuth: true,requiresAdmin: true},
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  const isAuth = store.getters.isAuthenticated;
  const isAdmin = store.getters.isAdmin;

  if (to.matched.some(record => record.meta.requiresAuth && record.meta.requiresAdmin)) {
    if (isAuth && isAdmin) {
      next();
    } else {
      next({ name: 'login' });
    }
  } else if (to.matched.some(record => record.meta.requiresAuth)) {
    if (isAuth) {
      next();
    } else {
      next({ name: 'login' });
    }
  } else {
    next();
  }
});


export default router

This is the AdminNavBar.vue

<template>
    <v-navigation-drawer v-if="sidebar" @click="toggleSidebar()" app>
        <v-list-item title="Administrare Texx"></v-list-item>
        <v-list 
        center >
            <v-list-item v-for="item in navAdminItems" 
            :key="item.title" 
            :to="item.path"
            :title="item.title">
            <v-icon center>{{ item.icon }}</v-icon>
                {{ item.title }}
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
</template>


<script>
export default {
    name: 'AdminNavBar',
    data(){
        return {
            sidebar: false,
            navAdminItems: [
                {title: 'Dashboard' , path:'/admin/dashboard' , icon:'mdi-monitor-dashboard'},
                {title: 'Produse' , path:'/admin/products', icon:'mdi-cart'},
                {title: 'Clienti' , path:'/admin/customers', icon:'mdi-account'},

            ]
        }
    },
    methods: {
        toggleSidebar(){
            this.sidebar = !this.sidebar;
        }
    }
}
</script>

This is the App.vue

<template>
  <v-app v-if="!showAdminNavBar">
    <MyNavBar />
    <v-main>
      <router-view   />
    </v-main>
    <FooterComp />
  </v-app>
  <v-app v-else>
    <AdminNavBar/>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script>
import MyNavBar from './components/MyNavBar.vue'
import FooterComp from './components/FooterComp.vue'
import AdminNavBar from './components/AdminPages/layout/AdminNavBar.vue';
import { useRoute } from 'vue-router';
import { computed } from 'vue';

export default {
  name: 'App',
  components: {
    MyNavBar,
    FooterComp,
    AdminNavBar
  },
setup(){
  const route = useRoute();
  const showAdminNavBar = computed(() => route.meta.requiresAdmin)

  return {showAdminNavBar}
},

}
</script>

And this is an example of the AdminDashboard where i want to see the admin navigation : AdminDashboard.vue

<template>
    <div >
      <div >
        <h1>Admin Dashboard</h1>
      </div>
    </div>
  </template>

<script>
import AdminNavBar from './layout/AdminNavBar.vue';


export default {
    name:"AdminDashboard",
    components: AdminNavBar,
    data(){
        return{

        }
    }
}
</script>

I read that i need to create separate layouts , but i m already far into the code and i cannot refactor that much . Is there another way how to do that . Also if u need something , please ask and i will post other pieces of relevant code if you need