<template>
  <div class="lofty-admin-container lofty-reset-style">
    <SideMenu :menuSections="Menus" @menuItemClick="menuItemClick" />
    <main class="main-content">
      <component :key="componentName" :is="componentName" />
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
import SideMenu from "@/admin/common/SideMenu.vue";
import { Menus } from "./menus/config";
import groupMenusMap from "./menus/index.js";

let componentName = ref("");
function menuItemClick(item) {
  componentName.value = groupMenusMap[item.component];
}
</script>

<style lang="scss" scoped>
.lofty-admin-container {
  display: flex;
  gap: 20px;
  max-height: 100%;
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  .main-content {
    flex: 1;
    padding-right: 20px;
  }
}
</style>