<script setup>
// Use the centralized role menu composable
const { getMenuType } = useRoleMenu()

// Use a computed property that will be reactive
const isFulCustomer = computed(() => getMenuType())
</script>

<template>
  <div class="d-flex justify-between bgLayout">
    <NewSideBar />
    <main style="height: auto; min-height: 100vh; overflow: hidden;">
      <TopMegaBar />
<!--      <TopHeaderBar />-->
<!--      <NewNavBar v-if="isFulCustomer !== 'c'" />-->
      <NewNavBar />
      <NewTabBar />

      <section >
        <div class="container is-fluid mnh-768px">
        <slot />
        </div>
      </section>

      <FooterNav />
    </main>
  </div>
</template>

<style scoped>
@ref d-flex justify-between background-hexf8f8f8 mnh-100vh;

body:not(.dark) .bgLayout {
  background: #f8f8f8;
}
</style>