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_entry.vue (3242B)

    

  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.         <img
  26.           v-if="item.iconEmojiUrl"
  27.           class="menu-icon iconEmoji iconEmoji-image"
  28.           :src="item.iconEmojiUrl"
  29.           :alt="item.iconEmoji"
  30.           :title="item.iconEmoji"
  31.         >
  32.         <span
  33.           v-else-if="item.iconEmoji"
  34.           class="menu-icon iconEmoji"
  35.         >
  36.           <span>
  37.             {{ item.iconEmoji }}
  38.           </span>
  39.         </span>
  40.         <span
  41.           v-else-if="item.iconLetter"
  42.           class="icon iconLetter fa-scale-110 menu-icon"
  43.         >{{ item.iconLetter }}</span>
  44.         <span class="label">
  45.           {{ item.labelRaw || $t(item.label) }}
  46.         </span>
  47.       </component>
  48.       <slot />
  49.       <div
  50.         v-if="item.badgeGetter && getters[item.badgeGetter]"
  51.         class="badge"
  52.         :class="[`-${item.badgeStyle}`]"
  53.       >
  54.         {{ getters[item.badgeGetter] }}
  55.       </div>
  56.       <button
  57.         v-if="showPin && currentUser"
  58.         type="button"
  59.         class="button-unstyled extra-button"
  60.         :title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
  61.         :aria-pressed="!!isPinned"
  62.         @click.stop.prevent="togglePin(item.name)"
  63.       >
  64.         <FAIcon
  65.           v-if="showPin && currentUser"
  66.           fixed-width
  67.           class="fa-scale-110"
  68.           :class="{ 'veryfaint': !isPinned(item.name) }"
  69.           :transform="!isPinned(item.name) ? 'rotate-45' : ''"
  70.           icon="thumbtack"
  71.         />
  72.       </button>
  73.     </li>
  74.   </OptionalRouterLink>
  75. </template>
  77. <script src="./navigation_entry.js"></script>
  79. <style lang="scss">
  80. .NavigationEntry.menu-item {
  81.   --__line-height: 2.5em;
  82.   --__horizontal-gap: 0.5em;
  83.   --__vertical-gap: 0.4em;
  85.   padding: var(--__vertical-gap) var(--__horizontal-gap);
  86.   display: grid;
  87.   grid-template-columns: 1fr;
  88.   grid-auto-columns: var(--__line-height);
  89.   grid-auto-flow: column;
  90.   grid-gap: var(--__horizontal-gap);
  91.   align-items: baseline;
  93.   &[aria-expanded] {
  94.     padding-right: var(--__horizontal-gap);
  95.   }
  97.   .main-link {
  98.     line-height: var(--__line-height);
  99.     box-sizing: border-box;
  100.   }
  102.   .menu-icon {
  103.     line-height: var(--__line-height);
  104.     padding: 0;
  105.     width: var(--__line-height);
  106.     margin-right: var(--__horizontal-gap);
  107.   }
  109.   .timelines-chevron,
  110.   .extra-button {
  111.     line-height: var(--__line-height);
  112.     width: 100%;
  113.     padding: 0;
  114.     text-align: center;
  115.   }
  117.   .badge {
  118.     justify-self: center;
  119.   }
  121.   .iconEmoji {
  122.     display: inline-block;
  123.     text-align: center;
  124.     object-fit: contain;
  125.     vertical-align: middle;
  126.     height: var(--__line-height);
  127.     width: var(--__line-height);
  129.     > span {
  130.       font-size: 1.5rem;
  131.     }
  132.   }
  134.   img.iconEmoji {
  135.     padding: 0.25rem;
  136.     box-sizing: border-box;
  137.   }
  138. }
  139. </style>