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 (3473B)

    

  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.       <div
  57.         v-else-if="item.badgeGetter && item.store && this[`${item.store}Store`][item.badgeGetter]"
  58.         class="badge badge-notification"
  59.       >
  60.         {{ this[`${item.store}Store`][item.badgeGetter] }}
  61.       </div>
  62.       <button
  63.         v-if="showPin && currentUser"
  64.         type="button"
  65.         class="button-unstyled extra-button"
  66.         :title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
  67.         :aria-pressed="!!isPinned"
  68.         @click.stop.prevent="togglePin(item.name)"
  69.       >
  70.         <FAIcon
  71.           v-if="showPin && currentUser"
  72.           fixed-width
  73.           class="fa-scale-110"
  74.           :class="{ 'veryfaint': !isPinned(item.name) }"
  75.           :transform="!isPinned(item.name) ? 'rotate-45' : ''"
  76.           icon="thumbtack"
  77.         />
  78.       </button>
  79.     </li>
  80.   </OptionalRouterLink>
  81. </template>
  83. <script src="./navigation_entry.js"></script>
  85. <style lang="scss">
  86. .NavigationEntry.menu-item {
  87.   --__line-height: 2.5em;
  88.   --__horizontal-gap: 0.5em;
  89.   --__vertical-gap: 0.4em;
  91.   padding: var(--__vertical-gap) var(--__horizontal-gap);
  92.   display: grid;
  93.   grid-template-columns: 1fr;
  94.   grid-auto-columns: var(--__line-height);
  95.   grid-auto-flow: column;
  96.   grid-gap: var(--__horizontal-gap);
  97.   align-items: baseline;
  99.   &[aria-expanded] {
  100.     padding-right: var(--__horizontal-gap);
  101.   }
  103.   .main-link {
  104.     line-height: var(--__line-height);
  105.     box-sizing: border-box;
  106.   }
  108.   .menu-icon {
  109.     line-height: var(--__line-height);
  110.     padding: 0;
  111.     width: var(--__line-height);
  112.     margin-right: var(--__horizontal-gap);
  113.   }
  115.   .timelines-chevron,
  116.   .extra-button {
  117.     line-height: var(--__line-height);
  118.     width: 100%;
  119.     padding: 0;
  120.     text-align: center;
  121.   }
  123.   .badge {
  124.     justify-self: center;
  125.   }
  127.   .iconEmoji {
  128.     display: inline-block;
  129.     text-align: center;
  130.     object-fit: contain;
  131.     vertical-align: middle;
  132.     height: var(--__line-height);
  133.     width: var(--__line-height);
  135.     > span {
  136.       font-size: 1.5rem;
  137.     }
  138.   }
  140.   img.iconEmoji {
  141.     padding: 0.25rem;
  142.     box-sizing: border-box;
  143.   }
  144. }
  145. </style>