search_ui/layouts/default.vue

<!-- layouts/default.vue -->
<template>
  <div>
    <header v-if="buildName() != 'majles'">
      <!-- //////////////////// begin navbar //////////////////// -->
      <nav
        class="navbar navbar-expand-md navbar-light bg-light"
        :class="{ expanded: !isSidebarCollapsed }"
      >
        <!-- sidebar menu toggler -->
        <button-component
          @click="sidebarCollapsedSetter(false)"
          classes="p-0 d-lg-none"
          buttonText=""
        >
          <svg class="icon icon-Component-68--1">
            <use xlink:href="#icon-Component-68--1"></use>
          </svg>
        </button-component>
        <a
          class="navbar-brand d-none d-lg-inline-block"
          style="color: #00b6e3"
          >{{ navTitle }}</a
        >
        <a class="navbar-brand d-lg-none" style="color: #00b6e3">{{
          navShortTitle
        }}</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse" id="navbarSupportedContent">
          <div class="collapse-mobile-header">
            <div>
              <img
                src="assets/common/img/logo/gray-logo.png"
                alt="هم فهمی"
                class="img-fluid"
                style="width: 2em; filter: invert(0)"
              />
              هم فهمی
            </div>

            <button
              class="btn p-0 me-auto"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <svg class="icon icon-Component-71--1">
                <use xlink:href="#icon-Component-71--1"></use>
              </svg>
            </button>
          </div>
          <ul class="navbar-nav ms-auto me-md-5">
            <!-- <li class="nav-item active">
              <a class="nav-link" href="#"
                >پیشخوان <span class="sr-only">(current)</span></a
              >
            </li> -->
            <!-- <li class="nav-item">
                      <a class="nav-link" href="#">سامانه‌ها</a>
                    </li> -->
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                {{ $t("Systems") }}
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <!-- <my-system class="list" layout="list"></my-system> -->
              </div>
            </li>
            <li  class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                {{ $t("Portal") }}
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a
                  class="dropdown-item"
                  href="http://pub.hamfahmi.ir/public"
                  target="_blank"
                  >{{ $t("PersonalFolder") }}</a
                >
                <a
                  class="dropdown-item"
                  href="http://pub.hamfahmi.ir/wiki"
                  target="_blank"
                  >{{ $t("WikiFarhangestan") }}</a
                >
                <a
                  class="dropdown-item"
                  href="http://pub.hamfahmi.ir:91/"
                  target="_blank"
                  >{{ $t("ResearchPortal") }}</a
                >
                <a
                  class="dropdown-item"
                  href="http://pub.hamfahmi.ir:94/"
                  target="_blank"
                  >{{ $t("ResearchSoftware") }}</a
                >
              </div>
            </li>
          </ul>

          <ul class="navbar-nav ms-md-3 me-auto">
            <li class="nav-item">
              <notification></notification>
            </li>
            <li class="nav-item">
              <select-language-dropdown
                toggleClass="dropdown-toggle"
              ></select-language-dropdown>
            </li>
            <li class="nav-item">
              <user-avatar-dropdown
                class="position-static"
              ></user-avatar-dropdown>
            </li>
          </ul>
        </div>
      </nav>
      <!-- //////////////////// end navbar //////////////////// -->
    </header>
    <!-- <the-sidebar :showUserAvatar="true" :menu="menu"></the-sidebar> -->
    <the-sidebar
      :showUserAvatar="true"
      :menu="$attrs.menu"
      @statusPag="statusPag"
    ></the-sidebar>

    <main class="main-page__content" :class="{ 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 { useCommonStore } from "~/stores/commonStore";

import {clearBodyClass} from "@manuals/utilities"
export default {
  mounted() {
    // this.setBodyClass("default-dashboard");
  },
  beforeUnmount() {
    this.sidebarMenuSetter();
  },
  data() {
    return {
      menu: undefined,
      // #region mehdi
      statusPag: 0,
      nomber: 0,
      statusPagHedear: 1,
      // #endregion
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "getRefreshForm",
      "isSidebarCollapsed",
      "sidebarMenuGetter",
    ]),
    navTitle() {
      return import.meta.env.VITE_TITLE;
    },
    navShortTitle() {
      return import.meta.env.VITE_SHORT_TITLE;
    },
    // sidbarMenu() {
    //   if (buildName() == "majles") return majlesMenu;
    //   return monirMenu;
    // },
  },

  methods: {
    ...mapActions(useCommonStore, [
      "setBodyClass",
      "TOGGLE_PANEL",
      "sidebarCollapsedSetter",
      "SET_SIDEBAR_LIST_STATUS",
      "sidebarMenuSetter",
    ]),

    showPortal() {
      return buildName() == "monir" && buildState() != 2;
    },
  },
};
</script>

<style lang="scss">
@import "../assets/default-dashboard/scss/default-dashboard";
</style>

<style scoped lang="scss">
.dropdown-menu {
  float: right;
  min-width: 13rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 0.1em;
  text-align: right;
  min-width: 20em;
}
</style>