logo

pleroma-fe

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

navigation_pins.vue (1155B)

    

  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 -notification"
  23.       />
  24.     </router-link>
  25.   </span>
  26. </template>
  28. <script src="./navigation_pins.js"></script>
  30. <style lang="scss">
  31. .NavigationPins {
  32.   display: flex;
  33.   flex-wrap: wrap;
  34.   overflow: hidden;
  35.   height: 100%;
  37.   .pinned-item {
  38.     position: relative;
  39.     flex: 1 0 3em;
  40.     min-width: 2em;
  41.     text-align: center;
  42.     overflow: visible;
  43.     box-sizing: border-box;
  44.     height: 100%;
  46.     & .svg-inline--fa,
  47.     & .iconLetter {
  48.       margin: 0;
  49.     }
  51.     &.toggled {
  52.       margin-bottom: -4px;
  53.       border-bottom: 4px solid;
  54.     }
  55.   }
  56. }
  57. </style>