<template>
  <div class="main" id="top">
    <header>
      <the-navbar></the-navbar>
    </header>
    <the-sidebar :menu="menu"></the-sidebar>

    <main class="main-page__content" :class="{ expanded: !isSidebarCollapsed }">
      <div class="pages section-page">
        <div class="pages-content mt-lg-0">
          <router-view :key="$route.fullPath"></router-view>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import menu from "@json/dashboard/default/json/menu.json";
import {clearBodyClass} from "@manuals/utilities"


export default {
  beforeMount() {
    clearBodyClass();
  },
  mounted() {
    // this.setBodyClass("setting-page");
    this.setBodyClass(import.meta.env.VITE_AI_DEFAULT_DASHBOARD_SYSTEM);
  },
  destroyed() {
    clearBodyClass();
  },

  data() {
    return {
      menu: menu,
    };
  },
  computed: {
    ...mapState(["getPanelStatus", "getRefreshForm", "isSidebarCollapsed"]),
  },
  methods: {
    ...mapActions(["setBodyClass"]),
  },
};
</script>