commit: 8ecb67230c87754d43c4255c56c05566c8c53feb
parent 8b25febe36a97d113c846928dab22ab36158ee07
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Aug 2022 00:48:38 +0300
make custom router-link for nav-entry to un-nest the interactive elements
Diffstat:
4 files changed, 99 insertions(+), 67 deletions(-)
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
@@ -121,7 +121,6 @@
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
- padding: 0;
}
> li {
@@ -150,12 +149,6 @@
font-size: 1.1em;
}
- .menu-item {
- .timelines-chevron {
- margin-right: 0;
- }
- }
-
.timelines-background {
padding: 0 0 0 0.6em;
background-color: $fallback--lightBg;
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
@@ -1,5 +1,6 @@
import { mapState } from 'vuex'
import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
@@ -7,6 +8,9 @@ library.add(faThumbtack)
const NavigationEntry = {
props: ['item', 'showPin'],
+ components: {
+ OptionalRouterLink
+ },
methods: {
isPinned (value) {
return this.pinnedItems.has(value)
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
@@ -1,26 +1,37 @@
<template>
- <li class="NavigationEntry">
- <component
- :is="routeTo ? 'router-link' : 'button'"
- class="menu-item button-unstyled"
- :to="routeTo"
+ <OptionalRouterLink
+ ass="ass"
+ :to="routeTo"
+ v-slot="{ isActive, href, navigate } = {}"
+ >
+ <li
+ class="NavigationEntry menu-item"
+ :class="{ '-active': isActive }"
+ v-bind="$attrs"
>
- <span>
- <FAIcon
- v-if="item.icon"
- fixed-width
- class="fa-scale-110 menu-icon"
- :icon="item.icon"
- />
- </span>
- <span
- v-if="item.iconLetter"
- class="icon iconLetter fa-scale-110 menu-icon"
- >{{ item.iconLetter }}
- </span>
- <span class="label">
- {{ item.labelRaw || $t(item.label) }}
- </span>
+ <component
+ class="main-link button-unstyled"
+ :is="routeTo ? 'a' : 'button'"
+ :href="href"
+ @click="navigate"
+ >
+ <span>
+ <FAIcon
+ v-if="item.icon"
+ fixed-width
+ class="fa-scale-110 menu-icon"
+ :icon="item.icon"
+ />
+ </span>
+ <span
+ v-if="item.iconLetter"
+ class="icon iconLetter fa-scale-110 menu-icon"
+ >{{ item.iconLetter }}
+ </span>
+ <span class="label">
+ {{ item.labelRaw || $t(item.label) }}
+ </span>
+ </component>
<slot />
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
@@ -45,8 +56,8 @@
icon="thumbtack"
/>
</button>
- </component>
- </li>
+ </li>
+ </OptionalRouterLink>
</template>
<script src="./navigation_entry.js"></script>
@@ -55,7 +66,21 @@
@import '../../_variables.scss';
.NavigationEntry {
- .label {
+ display: flex;
+ box-sizing: border-box;
+ align-items: baseline;
+ height: 3.5em;
+ line-height: 3.5em;
+ padding: 0 1em;
+ width: 100%;
+ color: $fallback--link;
+ color: var(--link, $fallback--link);
+
+ .timelines-chevron {
+ margin-right: 0;
+ }
+
+ .main-link {
flex: 1;
}
@@ -72,48 +97,36 @@
}
}
- .menu-item {
- display: flex;
- box-sizing: border-box;
- align-items: baseline;
- height: 3.5em;
- line-height: 3.5em;
- padding: 0 1em;
- width: 100%;
+ &:hover {
+ background-color: $fallback--lightBg;
+ background-color: var(--selectedMenu, $fallback--lightBg);
color: $fallback--link;
- color: var(--link, $fallback--link);
-
- &:hover {
- background-color: $fallback--lightBg;
- background-color: var(--selectedMenu, $fallback--lightBg);
- color: $fallback--link;
- color: var(--selectedMenuText, $fallback--link);
- --faint: var(--selectedMenuFaintText, $fallback--faint);
- --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
- --lightText: var(--selectedMenuLightText, $fallback--lightText);
+ color: var(--selectedMenuText, $fallback--link);
+ --faint: var(--selectedMenuFaintText, $fallback--faint);
+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+ --lightText: var(--selectedMenuLightText, $fallback--lightText);
- .menu-icon {
- --icon: var(--text, $fallback--icon);
- }
+ .menu-icon {
+ --icon: var(--text, $fallback--icon);
}
+ }
- &.router-link-active {
- font-weight: bolder;
- background-color: $fallback--lightBg;
- background-color: var(--selectedMenu, $fallback--lightBg);
- color: $fallback--text;
- color: var(--selectedMenuText, $fallback--text);
- --faint: var(--selectedMenuFaintText, $fallback--faint);
- --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
- --lightText: var(--selectedMenuLightText, $fallback--lightText);
+ &.-active {
+ font-weight: bolder;
+ background-color: $fallback--lightBg;
+ background-color: var(--selectedMenu, $fallback--lightBg);
+ color: $fallback--text;
+ color: var(--selectedMenuText, $fallback--text);
+ --faint: var(--selectedMenuFaintText, $fallback--faint);
+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+ --lightText: var(--selectedMenuLightText, $fallback--lightText);
- .menu-icon {
- --icon: var(--text, $fallback--icon);
- }
+ .menu-icon {
+ --icon: var(--text, $fallback--icon);
+ }
- &:hover {
- text-decoration: underline;
- }
+ &:hover {
+ text-decoration: underline;
}
}
}
diff --git a/src/components/optional_router_link/optional_router_link.vue b/src/components/optional_router_link/optional_router_link.vue
@@ -0,0 +1,22 @@
+<template>
+ <router-link
+ v-if="to"
+ :to="to"
+ custom
+ v-slot="props"
+ >
+ <slot
+ v-bind="props"
+ />
+ </router-link>
+ <slot
+ v-else
+ v-bind="{}"
+ />
+</template>
+
+<script>
+export default {
+ props: ['to']
+}
+</script>
