refactor: simplify navlink logic

pull/183/head
Evan You 4 years ago
parent ffaca73992
commit a9f75749a6

@ -116,7 +116,7 @@ const action = computed(() => ({
} }
} }
.action ::v-deep(.item) { .action :deep(.item) {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
padding: 0 20px; padding: 0 20px;
@ -128,14 +128,14 @@ const action = computed(() => ({
transition: background-color .1s ease; transition: background-color .1s ease;
} }
.action ::v-deep(.item:hover) { .action :deep(.item:hover) {
text-decoration: none; text-decoration: none;
color: #ffffff; color: #ffffff;
background-color: var(--c-brand-light); background-color: var(--c-brand-light);
} }
@media (min-width: 420px) { @media (min-width: 420px) {
.action ::v-deep(.item) { .action :deep(.item) {
padding: 0 24px; padding: 0 24px;
line-height: 56px; line-height: 56px;
font-size: 1.2rem; font-size: 1.2rem;

@ -1,15 +1,8 @@
<template> <template>
<div class="nav-dropdown-link-item"> <div class="nav-dropdown-link-item">
<a <a class="item" v-bind="linkProps">
class="item"
:class="classes"
:href="href"
:target="target"
:rel="rel"
:aria-label="ariaLabel"
>
<span class="arrow" /> <span class="arrow" />
<span class="text">{{ text }}</span> <span class="text">{{ item.text }}</span>
<span class="icon"><OutboundLink v-if="isExternal" /></span> <span class="icon"><OutboundLink v-if="isExternal" /></span>
</a> </a>
</div> </div>
@ -22,19 +15,10 @@ import { useNavLink } from '../composables/navLink'
import OutboundLink from './icons/OutboundLink.vue' import OutboundLink from './icons/OutboundLink.vue'
const { item } = defineProps<{ const { item } = defineProps<{
item: DefaultTheme.NavItem item: DefaultTheme.NavItemWithLink
}>() }>()
const { const { props: linkProps, isExternal } = useNavLink(item)
classes,
isActive,
isExternal,
href,
target,
rel,
ariaLabel,
text
} = useNavLink(item)
</script> </script>
<style scoped> <style scoped>
@ -42,7 +26,7 @@ const {
display: block; display: block;
padding: 0 1.5rem 0 2.5rem; padding: 0 1.5rem 0 2.5rem;
line-height: 32px; line-height: 32px;
font-size: .9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
color: var(--c-text); color: var(--c-text);
white-space: nowrap; white-space: nowrap;
@ -52,7 +36,7 @@ const {
.item { .item {
padding: 0 24px 0 12px; padding: 0 24px 0 12px;
line-height: 32px; line-height: 32px;
font-size: .85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
color: var(--c-text); color: var(--c-text);
white-space: nowrap; white-space: nowrap;

@ -1,20 +1,14 @@
<template> <template>
<div class="nav-link"> <div class="nav-link">
<a <a class="item" v-bind="linkProps">
class="item" {{ item.text }} <OutboundLink v-if="isExternal" />
:class="classes"
:href="href"
:target="target"
:rel="rel"
:aria-label="ariaLabel"
>
{{ text }} <OutboundLink v-if="isExternal" />
</a> </a>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps } from 'vue' import { defineProps } from 'vue'
import type { DefaultTheme } from '../config'
import { useNavLink } from '../composables/navLink' import { useNavLink } from '../composables/navLink'
import OutboundLink from './icons/OutboundLink.vue' import OutboundLink from './icons/OutboundLink.vue'
@ -22,23 +16,10 @@ const { item } = defineProps<{
item: DefaultTheme.NavItemWithLink item: DefaultTheme.NavItemWithLink
}>() }>()
const { const { props: linkProps, isExternal } = useNavLink(item)
classes,
isActive,
isExternal,
href,
target,
rel,
ariaLabel,
text
} = useNavLink(item)
</script> </script>
<style scoped> <style scoped>
.nav-link {
}
.item { .item {
display: block; display: block;
padding: 0 1.5rem; padding: 0 1.5rem;
@ -65,7 +46,7 @@ const {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
padding: 0; padding: 0;
line-height: 24px; line-height: 24px;
font-size: .9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
} }

@ -53,6 +53,9 @@ export function useLocaleLinks() {
? locales[currentLangKey].selectText ? locales[currentLangKey].selectText
: 'Languages' : 'Languages'
return { text: selectText, items: candidates } return {
text: selectText,
items: candidates
} as DefaultTheme.NavItemWithChildren
}) })
} }

@ -8,52 +8,25 @@ export function useNavLink(item: DefaultTheme.NavItemWithLink) {
const route = useRoute() const route = useRoute()
const { withBase } = useUrl() const { withBase } = useUrl()
const classes = computed(() => ({ const isExternal = isExternalCheck(item.link)
active: isActive.value,
external: isExternal.value
}))
const isActive = computed(() => { const props = computed(() => {
return normalizePath(withBase(item.link)) === normalizePath(route.path) return {
}) class: {
active:
const isExternal = computed(() => { normalizePath(withBase(item.link)) === normalizePath(route.path),
return isExternalCheck(item.link) isExternal
}) },
href: isExternal ? item.link : withBase(item.link),
const href = computed(() => { target: item.target || isExternal ? `_blank` : null,
return isExternal.value ? item.link : withBase(item.link) rel: item.rel || isExternal ? `noopener noreferrer` : null,
}) 'aria-label': item.ariaLabel
const target = computed(() => {
if (item.target) {
return item.target
}
return isExternal.value ? '_blank' : ''
})
const rel = computed(() => {
if (item.rel) {
return item.rel
} }
return isExternal.value ? 'noopener noreferrer' : ''
}) })
const ariaLabel = computed(() => item.ariaLabel)
const text = computed(() => item.text)
return { return {
classes, props,
isActive, isExternal
isExternal,
href,
target,
rel,
ariaLabel,
text
} }
} }

@ -87,7 +87,7 @@ export namespace DefaultTheme {
} }
export interface NavItemWithChildren extends NavItemBase { export interface NavItemWithChildren extends NavItemBase {
items: NavItem[] items: NavItemWithLink[]
} }
// sidebar ------------------------------------------------------------------- // sidebar -------------------------------------------------------------------

Loading…
Cancel
Save