<template>
    <!-- ======= Navbar ======= -->
    <NavbarComponent v-if="!showAdminBoard"></NavbarComponent>
    <!-- <Sidebar v-if="showAdminBoard"></Sidebar> -->
    <!-- <div v-if="showAdminBoard" class="w-full bg-light-grey pl-0 lg:pl-48 min-h-screen" :class="systemStore.sidebar ? 'overlay' : ''" id="main-content"> -->
    <div v-if="showAdminBoard" >
      <AdminNavbarComponent v-if="showAdminBoard"></AdminNavbarComponent>
      <!-- <Sidebar v-if="showAdminBoard"></Sidebar> -->
    </div>
      <main>
        <router-view />
      </main>
    <!-- ======= blank Section ======= -->
    <div id="blank" class="blank"></div>

    <!-- ======= Footer ======= -->
    <FooterComponent v-if="!showAdminBoard"></FooterComponent>
</template>

<script setup>
import { useSystemStore } from '@/store/system.js';
const systemStore = useSystemStore();
</script>
<script>
import NavbarComponent from "@/views/landing/custom/LandingNavbar.vue";
import Sidebar from "@/components/manager/Sidebar.vue";
import AdminNavbarComponent from "@/views/admin/AdminNavbar.vue";
import FooterComponent from "@/views/landing/custom/LandingFooter.vue";
export default {
  setup() {
    // const clinicToggle = ref(false);
    // const showClinicToggle = () => {
    //   clinicToggle.value = !clinicToggle.value;
    // };
    // return { showClinicToggle, clinicToggle };
    
  },
  computed: {
    currentUser() {
      return this.$store.state.auth.user;
    },
    showAdminBoard() {
      if (this.currentUser && this.currentUser['roles']) {
        return this.currentUser['roles'].includes('ROLE_ADMIN');
      }
      return false;
    },
  },
  components: {
    NavbarComponent,
    Sidebar,
    AdminNavbarComponent,
	  FooterComponent
  },
};
</script>
