pleroma-fe/src/components/navigation/navigation_entry.vue

<template>
  <OptionalRouterLink
    v-slot="{ isActive, href, navigate } = {}"
    :to="routeTo"
  >
    <li
      class="NavigationEntry menu-item"
      :class="{ '-active': isActive }"
      v-bind="$attrs"
    >
      <component
        :is="routeTo ? 'a' : 'button'"
        class="main-link button-unstyled"
        :href="href"
        @click="navigate"
      >
        <span>
          <FAIcon
            v-if="item.icon"
            fixed-width
            class="fa-scale-110 menu-icon"
            :icon="item.icon"
          />
        </span>
        <span
          v-if="item.iconLetter"
          class="icon iconLetter fa-scale-110 menu-icon"
        >{{ item.iconLetter }}
        </span>
        <span class="label">
          {{ item.labelRaw || $t(item.label) }}
        </span>
      </component>
      <slot />
      <div
        v-if="item.badgeGetter && getters[item.badgeGetter]"
        class="badge -notification"
      >
        {{ getters[item.badgeGetter] }}
      </div>
      <button
        v-if="showPin && currentUser"
        type="button"
        class="button-unstyled extra-button"
        :title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
        :aria-pressed="!!isPinned"
        @click.stop.prevent="togglePin(item.name)"
      >
        <FAIcon
          v-if="showPin && currentUser"
          fixed-width
          class="fa-scale-110"
          :class="{ 'veryfaint': !isPinned(item.name) }"
          :transform="!isPinned(item.name) ? 'rotate-45' : ''"
          icon="thumbtack"
        />
      </button>
    </li>
  </OptionalRouterLink>
</template>

<script src="./navigation_entry.js"></script>

<style lang="scss">
@import "../../variables";

.NavigationEntry {
  display: flex;
  box-sizing: border-box;
  align-items: baseline;
  height: 3.5em;
  line-height: 3.5em;
  padding: 0;
  width: 100%;
  color: $fallback--link;
  color: var(--link, $fallback--link);

  &[aria-expanded] {
    padding-right: 1em;
  }

  .timelines-chevron {
    margin-right: 0;
  }

  .main-link {
    flex: 1;
    padding: 0 1em;
  }

  .menu-icon {
    margin-right: 0.8em;
  }

  .extra-button {
    width: 3em;
    text-align: center;

    &:last-child {
      margin-right: -0.8em;
    }
  }

  .badge {
     margin: 0 0.8em;
  }
}
</style>