base_ui/components/dashboard/majles/MajlesNavbar.vue

<template>
  <nav class="navbar navbar-expand-md border-0 mr-0">
    <!-- <a class="navbar-brand" style="color: #00b6e3">{{ navTitle }}</a> -->
    <button
      v-if="!isMajlesBuild()"
      name="button"
      type="button"
      class="toggle-mobile-nav dropdown-hamburger text-white"
      @click.prevent="toggleSidebarMenu()"
    >
      <span class="sr-only">باز کردن منوی کنار</span>
      <svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
    </button>

    <div
      class="collapse navbar-collapse align-items-start d-flex"
      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 mr-auto"
          type="button"
          data-toggle="collapse"
          data-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>
      <div class="col text-right">
        <ul v-show="!isMajlesBuild()" class="navbar-nav">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              {{ $t("Systems") }}
            </a>
            <div
              class="dropdown-menu systems-dropdown-menu"
              aria-labelledby="navbarDropdown"
            >
              <!-- <my-system
                :class="buildName() + '-navbar'"
                class="list"
                layout="list"
              ></my-system> -->
            </div>
          </li>
          <!-- <li class="nav-item dropdown">
                    <img
                        src="assets/majles/img/majles_logo-2.png"
                        alt="مجلس شورای اسلامی"
                        class="nav-logo"
                    />
                </li> -->
        </ul>
      </div>
      <div class="col text-center">
        <span class="nav-item">
          <img
            src="assets/majles/img/logo_200x200.png"
            alt="مجلس شورای اسلامی"
            class="center-logo"
          />
        </span>
      </div>
      <div class="col">
        <ul class="navbar-nav ml-md-3 align-items-center justify-content-end">
          <li v-if="!isMajlesBuild()" class="nav-item">
            <!-- <notification></notification> -->
          </li>

          <li v-if="!isMajlesBuild()" class="nav-item">
            <!-- <select-language-dropdown
              :class="buildName() + '-navbar'"
              toggleClass="dropdown-toggle"
            ></select-language-dropdown> -->
          </li>
          <li v-if="!isMajlesBuild()" class="nav-item">
            <!-- <user-avatar-dropdown
              :class="buildName() + '-navbar'"
            ></user-avatar-dropdown> -->
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { useAuthStore } from "~/stores/authStore";

export default {
  data() {
    return {
      // #region mehdi
      statusPag: 0,
      nomber: 0,
      statusPagHedear: 1,
      // #endregion
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "getRefreshForm",
      "isSidebarCollapsed",
    ]),
    navTitle() {
      console.log("isMajlesBuild()");
      console.log(isMajlesBuild());

      return import.meta.env.VITE_TITLE;
    },
  },

  methods: {
    searchStart(e) {
      let text = e.target.elements.searchinput.value;
      if (text == "") {
      } else {
        this.$router.push({
          name: "searchResult",
          query: { q: text },
        });
      }
    },
    toggleSidebarMenu() {
      // this.$store.commit("TOGGLE_SIDEBAR_MENU");
    },
  },
};
</script>
<style scoped lang="scss">
// .navbar {
// position: fixed !important;
// margin-right: var(--sidebar-collapsed-width);
// border-bottom: none;
// }
.dropdown-toggle {
  color: #fff;
  margin-right: 1.5em;
}
.dropdown-toggle:hover {
  color: #00b6e3 !important;
}
.nav-logo {
  height: 50px;
}
.dropdown-menu {
  left: auto;

  &.systems-dropdown-menu {
    min-width: 12rem;
  }
}

.center-logo {
  object-fit: contain;
  max-width: 100px;
  max-width: 7.4em;
  height: auto;
  transform: translateX(0.5em);
}
</style>