<template>
  <header>
    <nav class="navbar-main d-flex align-items-center bg-light border-bottom">
      <div class="container-fluid">
        <div class="row">
          <div class="col-6 d-flex align-items-center">
            <div
              v-if="statusFavoriteMenu"
              class="show-menu"
              @click="closeMenu(false)"
              ref="ShowMenu"
            >
              <svg class="icon icon-Component-158--5">
                <use xlink:href="#icon-Component-158--5"></use>
              </svg>
            </div>

            <ul class="navbar-nav mr-3" style="width: 6em">
              <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="favorite-dropdown-menu dropdown-menu"
                  aria-labelledby="navbarDropdown"
                  style="z-index: 99999"
                >
                  <my-system class="list" layout="list"></my-system>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-6 d-flex justify-content-end">
            <ul class="navbar-nav ml-md-3 mr-auto d-flex flex-row">
              <li class="nav-item">
                <select-language-dropdown
                  toggleClass="dropdown-toggle"
                ></select-language-dropdown>
              </li>
              <li class="nav-item mr-3">
                <user-avatar-dropdown
                  class="position-static"
                ></user-avatar-dropdown>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>
<script>
import { mapState, mapActions } from "pinia";
import favoriteApi from "~/apis/favoriteApi";

export default {
  props: ["statusFavoriteMenu"],
  beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
  },
  
  
  data() {
    return {
      httpService: undefined,
    };
  },
  
  methods: {
    closeMenu(item) {
      this.$emit("closeMenu", item);
    },
  },
 
};
</script>
<style lang="scss" >
.favorite-dropdown-menu{
left: -19px !important;
}
.navbar-main {
  height: 4em;
  margin-right: 4.5em;
}
.show-menu {
  width: 2em;
  height: 2em !important;
  border-radius: 26%;
  // background-color: red;
  // margin-top: 1em;

  cursor: pointer;
}

@media only screen and (max-width: 767.98px) {
  .navbar-main {
    margin-right: 0;
  }
}
</style>
