<template>
  <div class="main position-relative">
    <!-- <the-sidebar2 :showUserAvatar="true" :menu="menu"></the-sidebar> -->
    <the-sidebar2
      v-if="!hideSidebar()"
      :menu="sidebarMenu"
      @statusPag="statusPag"
    ></the-sidebar2>

    <main
      class="main-page__content"
      :class="[
        { responsive_margin: hideSidebar },
        { expanded: !isSidebarCollapsed },
      ]"
    >
      <div class="pages list-page">
        <div class="pages-content align-items-stretch p-0">
          <div class="flex-grow-1">
            <slot></slot>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import {clearBodyClass} from "@manuals/utilities"

export default {
  beforeMount() {
    clearBodyClass();
    this.sidebarMenuSetter();
  },
  mounted() {
    this.setBodyClass("majles-user-panel");
    this.TOGGLE_PANEL(false);
  },
  destroyed() {
    clearBodyClass();
  },
  data() {
    return {
      menuDefault: menuDefault,
      // menuMinimal: menuMinimal,

      // #region mehdi
      statusPag: 0,
      nomber: 0,
      statusPagHedear: 1,
      // #endregion
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "getRefreshForm",
      "isSidebarCollapsed",
      "sidebarMenuGetter",
    ]),
    navTitle() {
      return process.env.VUE_APP_TITLE;
    },
    sidebarMenu() {
      //از داخل سایدبار کنترل شد و دیگه نیاز نیست
      // if (this.isMajlesBuild()) return this.menuMinimal;
      return this.menuDefault;
    },
  },

  methods: {
    ...mapActions(useCommonStore, [
      "setBodyClass",
      "TOGGLE_PANEL",
      "sidebarCollapsedSetter",
      "SET_SIDEBAR_LIST_STATUS",
      "sidebarMenuSetter",
      "TOGGLE_SIDEBAR_MENU",
    ]),
    toggleSidebarMenu() {
      this.TOGGLE_SIDEBAR_MENU();
    },
    searchStart(e) {
      let text = e.target.elements.searchinput.value;
      if (text == "") {
      } else {
        this.$router.push({
          name: "search",
          query: { q: text },
        });
      }
    },
    hideSidebar() {
      return false; //this.buildName() == "majles" && this.buildState() == 1;
    },
  },
  // components: {
  //   Navbar: () => import("@dashboard/majles/components/Navbar"),
  // },
};
</script>

<style lang="scss">
@import "../assets/majles/scss/majles";
.custom-class {
  .dropdown-toggle {
    color: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>

<style lang="scss" scoped>
// .main-page__content{
//   margin-right: 0px !important;
// }
.dropdown-menu {
  float: right;
  min-width: 13rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 0.1em;
  text-align: right;
  min-width: 15em;
}
@media (max-width: 1199px) {
  .main-page__content {
    margin-right: 4.3em !important;
  }
  .responsive_margin {
    margin-right: 0 !important;
  }
}
@media (max-width: 575.98px) {
  .responsive_margin {
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .main-page__content {
    margin-right: 0 !important;
  }
}
</style>