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

    <main
      class="pages-content-container p-2"
      :class="{ 'expanded': !isSidebarCollapsed }"
    >
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import menu from "~/json/admin/json/menu.json";

export default {

  data() {
    return {
      menu: menu,
    };
  },
  computed: {
    ...mapState(["isSidebarCollapsed"]),
  },

  methods: {
    ...mapActions(["TOGGLE_PANEL"]),
    toggleSidebarMenu() {
      this.$store.commit('TOGGLE_SIDEBAR_MENU')
    },
  },
  beforeCreate() {
    ApiService.init(import.meta.env.VITE_REPO_BASE_URL);
  },
  mounted() {
    this.TOGGLE_PANEL(false);
  },

};
</script>

<style scoped lang="scss">
.navbar-2 {
  // background: linear-gradient(45deg, #7ce2fb, #51d3f3);
  // color: #fff;

  background-color: #fbfafd;
  // border-bottom: 1px solid #e9e9e9;
}
</style>