<template>
  <nav
    class="navbar navbar-expand-md fixed-top"
    :class="{ expanded: !isSidebarCollapsed }"
  >
    <div class="d-flex align-items-center">
      <!-- <div class="d-md-none dropdown-hamburger">
        <router-link
          :to="{ name: 'defaultRoute' }"
          title="سامانه ها"
          class="btn ps-0"
        >
          <svg class="icon icon-Home-21 main-page_body-items-icon-close">
            <use xlink:href="#icon-Home-21"></use>
          </svg>
        </router-link>
      </div> -->
      <div class="d-md-none">
        <button
          name="button"
          type="button"
          class="toggle-mobile-nav dropdown-hamburger"
          @click.prevent="toggleSidebarMenu()"
        >
          <span class="sr-only">باز کردن منوی کنار</span>
          <!-- <svg class="s18" data-testid="sidebar-icon">
            <use href="@assets/common/img/icons.svg#sidebar"></use>
          </svg> -->
        </button>
      </div>
      <!-- <div  v-if="$route.name === 'taskTimes'" class="d-md-none dropdown-hamburger">
      <router-link :to="{ name: 'taskDashboard' }" title="داشبورد" class="btn ps-0">
        <svg class="icon icon-projects main-page_body-items-icon-close">
          <use xlink:href="#icon-projects"></use>
        </svg>
      </router-link>
    </div> -->
      <!-- <div v-if="$route.name === 'taskDashboard'" class="d-md-none dropdown-hamburger pt-2"> -->
      <!-- <router-link :to="{ name: 'taskTimes' }" title="وظایف" class="btn ps-0">
        <svg class="icon icon-task-list main-page_body-items-icon-close">
          <use xlink:href="#icon-task-list"></use>
        </svg>
      </router-link> -->
      <!-- </div> -->
    </div>
    <ul class="navbar-nav ms-md-3 me-auto">
      <!-- <li class="nav-item">
            <notification></notification>
          </li> -->

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

<script>
// import { mapGetters, mapMutations, mapActions } from "vuex";
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";

export default {
  beforeMount() {
    // clearBodyClass();
  },
  mounted() {
    // this.setBodyClass("list-system");
  },
  destroyed() {
    // clearBodyClass();
  },
  data() {
    return {
      // #region mehdi
      statusPag: 0,
      nomber: 0,
      statusPagHedear: 1,
      // #endregion
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "getRefreshForm",
      "isSidebarCollapsed",
    ]),
    navTitle() {
      return process.env.VUE_APP_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");
    },
    // ...mapActions(["setBodyClass"]),
  },
  components: {
    // Navbar: () =>
    //   import(
    //      "@dashboard/majles/components/Navbar"
    //   ),
    //   MySystem: () =>
    //     import(
    //        "@dashboard/default/pages/MySystem"
    //     ),
    //   Notification: () =>
    //     import( "@notifications/components/Notification.vue"),
  },
};
</script>
<style scoped lang="scss">
.navbar {
  //  position:fixed!important;
  // margin-right: var(--sidebar-collapsed-width);
  border-bottom: none;
  background-color: #fff;
}
.dropdown-toggle {
  color: #fff;
  margin-right: 1.5em;
}
.dropdown-toggle:hover {
  color: #00b6e3 !important;
}
.nav-logo {
  height: 50px;
}
.dropdown-menu {
  left: auto;
}
</style>