<template>
  <div
    class="jahat__header jahat-header"
    :class="{ expanded: !isSidebarCollapsed }"
  >
    <div
      class="jahat-header__right jahat-header__logo"
      style="padding-right: 35px"
    >
      <router-link :to="{ name: 'issues' }" class="">
        <img
          class="d-xl-inline"
          src="assets/jahat/img/jahat-logo.svg"
          alt=""
        />
      </router-link>
    </div>
    <div class="jahat-header__center">
      <NavbarActiveLink
        class="jahat-header__menu"
        :items="schemasGetter"
        :routeTempalte="{
          firstActive: false,
          activate: 'route',
          key: 'routename',
          template: '/{{key}}',
        }"
        @change-link="changeLink"
      />
      <router-link :to="{ name: 'search' }" class="jahat-header__search-icon">
        <svg class="icon icon-Component-198--1">
          <use xlink:href="#icon-Component-198--1"></use>
        </svg>
      </router-link>
    </div>
    <div class="jahat-header__left">
      <user-avatar-dropdown class="header__user" />
    </div>
  </div>
</template>

<script>
import NavbarActiveLink from "../../../components/LazyNavbarActiveLink.vue";
import { mapState } from "pinia";

export default {
  name: "TopHeader",
  computed: {
    ...mapState([
      "userPermisionGetter",
      "schemasGetter",
      "isSidebarCollapsed",
    ]),
  },
  methods: {
    canViewMenuItem(permission) {
      return this.userPermisionGetter?.includes(permission);
    },
    changeLink(key) {},
  },

};
</script>
<style scoped></style>
