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

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

<script setup lang="ts">
import { computed } from 'vue'
import BasicMenu from '@/components/BasicMenu/index.vue'
import { useRouterStore } from '@core/stores/router'
import { get } from 'lodash'
import { customerSpecialPricingEnabledSetting, initWalletSettingsFromApi } from '@/utils/config'

initWalletSettingsFromApi()

const routerStore = useRouterStore()
const menu = computed(() => {
  const item = routerStore.routes.find((item) => item.name === 'customers')
  const children = get(item, 'children[0].children', []) as Array<{
    name?: string
    meta?: { order?: number }
  }>
  return [...children]
    .filter(
      (child) =>
        child.name !== 'customerMain_specialPrice' || customerSpecialPricingEnabledSetting.value
    )
    .sort((a, b) => (a.meta?.order ?? 99) - (b.meta?.order ?? 99))
})
</script>

<style></style>