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

<template>
  <span class="NavigationPins">
    <router-link
      v-for="item in pinnedList" :key="item.name" class="pinned-item"
      :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
      >
      <FAIcon
        v-if="item.icon"
        fixed-width
        :icon="item.icon"
            />
      <span
        v-if="item.iconLetter"
        class="iconLetter fa-scale-110 fa-old-padding"
        >{{ item.iconLetter }}</span>
      <div
        v-if="item.badgeGetter && getters[item.badgeGetter]"
        class="alert-dot"
        />
    </router-link>
  </span>
</template>

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

<style lang="scss">
@import '../../_variables.scss';
.NavigationPins {
  display: flex;
  overflow: hidden;

  .alert-dot {
    border-radius: 100%;
    height: 0.5em;
    width: 0.5em;
    position: absolute;
    right: calc(50% - 0.25em);
    top: calc(50% - 0.25em);
    margin-left: 6px;
    margin-top: -6px;
    background-color: $fallback--cRed;
    background-color: var(--badgeNotification, $fallback--cRed);
  }

  .pinned-item {
    position: relative;
    flex: 0 0 3em;
    min-width: 2em;
    text-align: center;

    & .svg-inline--fa,
    & .iconLetter {
      margin: 0;
    }

    &.router-link-active {
      & .svg-inline--fa,
      & .iconLetter {
        color: $fallback--text;
        color: var(--selectedMenuText, $fallback--text);
      }
    }
  }
}
</style>