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
          :key="route.name"
          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 { useUserStore } from '@/store/userStore'
import { isDeployAdmin } from '@/utils/deployAdmin'
import { bannerEnabledSetting } from '@/utils/config'
import { get } from 'lodash'
import type { RouteRecordRaw } from 'vue-router'

const routerStore = useRouterStore()
const route = useRoute()
const userStore = useUserStore()
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)
    .filter((child) => child.name !== 'banners' || bannerEnabledSetting.value)
    .filter(
      (child) =>
        !child.meta?.deployAdminOnly || isDeployAdmin(userStore.userInfo?.mobile)
    )
    .sort((a, b) => (Number(a.meta?.order) || 99) - (Number(b.meta?.order) || 99))
})
</script>

<style></style>