logo

pleroma-fe

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

navigation_entry.vue (2633B)

    

  1. <template>
  2.   <OptionalRouterLink
  3.     v-slot="{ isActive, href, navigate } = {}"
  4.     :to="routeTo"
  5.   >
  6.     <li
  7.       class="NavigationEntry menu-item"
  8.       :class="{ '-active': isActive }"
  9.       v-bind="$attrs"
  10.     >
  11.       <component
  12.         :is="routeTo ? 'a' : 'button'"
  13.         class="main-link"
  14.         :href="href"
  15.         @click="navigate"
  16.       >
  17.         <span>
  18.           <FAIcon
  19.             v-if="item.icon"
  20.             fixed-width
  21.             class="fa-scale-110 menu-icon"
  22.             :icon="item.icon"
  23.           />
  24.         </span>
  25.         <span
  26.           v-if="item.iconLetter"
  27.           class="icon iconLetter fa-scale-110 menu-icon"
  28.         >{{ item.iconLetter }}
  29.         </span>
  30.         <span class="label">
  31.           {{ item.labelRaw || $t(item.label) }}
  32.         </span>
  33.       </component>
  34.       <slot />
  35.       <div
  36.         v-if="item.badgeGetter && getters[item.badgeGetter]"
  37.         class="badge -notification"
  38.       >
  39.         {{ getters[item.badgeGetter] }}
  40.       </div>
  41.       <button
  42.         v-if="showPin && currentUser"
  43.         type="button"
  44.         class="button-unstyled extra-button"
  45.         :title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
  46.         :aria-pressed="!!isPinned"
  47.         @click.stop.prevent="togglePin(item.name)"
  48.       >
  49.         <FAIcon
  50.           v-if="showPin && currentUser"
  51.           fixed-width
  52.           class="fa-scale-110"
  53.           :class="{ 'veryfaint': !isPinned(item.name) }"
  54.           :transform="!isPinned(item.name) ? 'rotate-45' : ''"
  55.           icon="thumbtack"
  56.         />
  57.       </button>
  58.     </li>
  59.   </OptionalRouterLink>
  60. </template>
  62. <script src="./navigation_entry.js"></script>
  64. <style lang="scss">
  65. .NavigationEntry.menu-item {
  66.   --__line-height: 2.5em;
  67.   --__horizontal-gap: 0.5em;
  68.   --__vertical-gap: 0.4em;
  70.   padding: 0;
  71.   display: flex;
  72.   align-items: baseline;
  74.   &[aria-expanded] {
  75.     padding-right: var(--__horizontal-gap);
  76.   }
  78.   .main-link {
  79.     line-height: var(--__line-height);
  80.     box-sizing: border-box;
  81.     flex: 1;
  82.     padding: var(--__vertical-gap) var(--__horizontal-gap);
  83.   }
  85.   .menu-icon {
  86.     line-height: var(--__line-height);
  87.     padding: 0;
  88.     width: var(--__line-height);
  89.     margin-right: var(--__horizontal-gap);
  90.   }
  92.   .timelines-chevron {
  93.     line-height: var(--__line-height);
  94.     padding: 0;
  95.     width: var(--__line-height);
  96.     margin-right: 0;
  97.   }
  99.   .extra-button {
  100.     line-height: var(--__line-height);
  101.     padding: 0;
  102.     width: var(--__line-height);
  103.     text-align: center;
  105.     &:last-child {
  106.       margin-right: calc(-1 * var(--__horizontal-gap));
  107.     }
  108.   }
  110.   .badge {
  111.     margin: 0 var(--__horizontal-gap);
  112.   }
  113. }
  114. </style>