boursecu_admin/src/pages/menuPages/setting/index.vue

<template>
  <div>
    <BasicMainCard>
      <div class="flex h-full min-h-0 flex-col md:flex-row">
        <!--        {{ menu }}-->
<!--        <BasicMenu width="13rem" :menu="menu" class="overflow-auto min-w-[13.5rem]" />-->
        <BasicMenu width="11rem" :menu="menu" mode="horizontal" class="md:hidden overflow-auto" />
        <BasicMenu
            width="13rem"
            :menu="menu"
            class="hidden md:inline overflow-auto min-w-[13.5rem]"
        />
        <!--        <component :is="selectedComponent" class="mr-5" />-->
        <RouterView class="mt-5 min-h-0 w-full flex-1 overflow-hidden md:mr-5 md:mt-0" />
      </div>
    </BasicMainCard>
  </div>
</template>

<script setup lang="ts">
import BasicMenu from '@/components/BasicMenu/index.vue'
import { useRouterStore } from '@core/stores/router'
import { get } from 'lodash'
import type { RouteRecordRaw } from 'vue-router'

const routerStore = useRouterStore()
const menu = computed(() => {
  const item = routerStore.routes.find((item) => item.name === 'settings')
  const children = get(item, 'children[0].children', []) as RouteRecordRaw[]
  return children.filter((child) => !child.meta?.hideMenu)
})
</script>

<style></style>