<template>
  <div class="d-flex flex-column">
    <nav
      class="navbar navbar-light navbar-360"
      :class="{ expanded: !isSidebarCollapsed }"
    >
      <div
        class="d-flex justify-content-between align-items-center flex-grow-1"
      >
        <div>
          <div class="d-md-none" v-if="$route.name !== 'systems'">
            <button
              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>

          <Breadcrumbs
            v-if="$route.name != '/'"
            class="d-none d-lg-flex"
          />
        </div>
        <div class="d-flex align-items-center">
          <!-- <select-language-dropdown></select-language-dropdown> -->
          <!-- <user-avatar-dropdown></user-avatar-dropdown> -->
        </div>
      </div>

      <div
        class="flex-grow-1 d-flex justify-content-center py-2 my-2 d-lg-none page-border-top"
      >
        <Breadcrumbs v-if="$route.name != 'systems'" class="d-lg-flex" />
      </div>
    </nav>
  </div>
</template>

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

export default {
  props: {
    navbarTitle: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      searchForm: {
        query: "",
      },
      showSearchInput: false,
    };
  },
  computed: {
    ...mapState(useCommonStore,["isSidebarCollapsed", "getPanelStatus"]),
  },
  methods: {
    ...mapActions(useCommonStore, ["TOGGLE_PANEL", "REFRESH_FORM"]),

    toggleSidebarMenu() {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
    },
  },
};
</script>

<style scoped lang="scss"></style>