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 (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>
  61. <script src="./navigation_entry.js"></script>
  62. <style lang="scss">
  63. .NavigationEntry.menu-item {
  64. --__line-height: 2.5em;
  65. --__horizontal-gap: 0.5em;
  66. --__vertical-gap: 0.4em;
  67. padding: 0;
  68. display: flex;
  69. align-items: baseline;
  70. &[aria-expanded] {
  71. padding-right: var(--__horizontal-gap);
  72. }
  73. .main-link {
  74. line-height: var(--__line-height);
  75. box-sizing: border-box;
  76. flex: 1;
  77. padding: var(--__vertical-gap) var(--__horizontal-gap);
  78. }
  79. .menu-icon {
  80. line-height: var(--__line-height);
  81. padding: 0;
  82. width: var(--__line-height);
  83. margin-right: var(--__horizontal-gap);
  84. }
  85. .timelines-chevron {
  86. line-height: var(--__line-height);
  87. padding: 0;
  88. width: var(--__line-height);
  89. margin-right: 0;
  90. }
  91. .extra-button {
  92. line-height: var(--__line-height);
  93. padding: 0;
  94. width: var(--__line-height);
  95. text-align: center;
  96. &:last-child {
  97. margin-right: calc(-1 * var(--__horizontal-gap));
  98. }
  99. }
  100. .badge {
  101. margin: 0 var(--__horizontal-gap);
  102. }
  103. }
  104. </style>