logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

navigation_pins.vue (1336B)

    

  1. <template>
  2.   <span class="NavigationPins">
  3.     <router-link
  4.       v-for="item in pinnedList"
  5.       :key="item.name"
  6.       class="button-unstyled pinned-item"
  7.       active-class="toggled"
  8.       :to="getRouteTo(item)"
  9.       :title="item.labelRaw || $t(item.label)"
  10.     >
  11.       <FAIcon
  12.         v-if="item.icon"
  13.         fixed-width
  14.         :icon="item.icon"
  15.       />
  16.       <span
  17.         v-if="item.iconLetter"
  18.         class="iconLetter fa-scale-110 fa-old-padding"
  19.       >{{ item.iconLetter }}</span>
  20.       <div
  21.         v-if="item.badgeGetter && getters[item.badgeGetter]"
  22.         class="badge -dot"
  23.         :class="[`-${item.badgeStyle}`]"
  24.       />
  25.     </router-link>
  26.   </span>
  27. </template>
  29. <script src="./navigation_pins.js"></script>
  31. <style lang="scss">
  32. .NavigationPins {
  33.   display: flex;
  34.   flex-wrap: wrap;
  35.   overflow: hidden;
  36.   height: 100%;
  38.   &.alert-dot-notification {
  39.     background-color: var(--badgeNotification);
  40.   }
  42.   &.alert-dot-neutral {
  43.     background-color: var(--badgeNeutral);
  44.   }
  46.   .pinned-item {
  47.     position: relative;
  48.     flex: 1 0 3em;
  49.     min-width: 2em;
  50.     text-align: center;
  51.     overflow: visible;
  52.     box-sizing: border-box;
  53.     height: 100%;
  55.     & .svg-inline--fa,
  56.     & .iconLetter {
  57.       margin: 0;
  58.     }
  60.     &.toggled {
  61.       margin-bottom: -4px;
  62.       border-bottom: 4px solid;
  63.     }
  64.   }
  65. }
  66. </style>