make auth nav link span if active

This commit is contained in:
einhornimmond 2025-03-11 10:55:24 +01:00
parent 85409f4a48
commit bf836e7216
3 changed files with 29 additions and 4 deletions

View File

@ -8,9 +8,13 @@
<BImg class="sheet-img position-absolute d-block d-lg-none zindex1000" :src="sheet"></BImg>
<BCollapse id="nav-collapse" is-nav>
<BNavbarNav class="ms-auto me-4 d-none d-lg-flex" right>
<BNavItem :to="register()" class="auth-navbar ms-lg-5">{{ $t('signup') }}</BNavItem>
<NavItem :to="register()" class="auth-navbar ms-lg-5">
{{ $t('signup') }}
</NavItem>
<span class="d-none d-lg-block py-1">{{ $t('|') }}</span>
<BNavItem :to="login()" class="auth-navbar">{{ $t('signin') }}</BNavItem>
<NavItem :to="login()" class="auth-navbar">
{{ $t('signin') }}
</NavItem>
</BNavbarNav>
</BCollapse>
</BNavbar>
@ -19,6 +23,7 @@
<script setup>
import { useAuthLinks } from '@/composables/useAuthLinks'
import NavItem from '../Menu/NavItem.vue'
const { login, register } = useAuthLinks()

View File

@ -2,9 +2,9 @@
<div class="navbar-small">
<BNavbar class="navi">
<BNavbarNav>
<BNavItem :to="register()" class="auth-navbar">{{ $t('signup') }}</BNavItem>
<NavItem :to="register()" class="auth-navbar">{{ $t('signup') }}</NavItem>
<span class="mt-1">{{ $t('|') }}</span>
<BNavItem :to="login()" class="auth-navbar">{{ $t('signin') }}</BNavItem>
<NavItem :to="login()" class="auth-navbar">{{ $t('signin') }}</NavItem>
</BNavbarNav>
</BNavbar>
</div>
@ -12,6 +12,7 @@
<script setup>
import { useAuthLinks } from '@/composables/useAuthLinks'
import NavItem from '../Menu/NavItem.vue'
const { login, register } = useAuthLinks()
</script>

View File

@ -0,0 +1,19 @@
<template>
<li :class="['nav-item', { active: isActive }]">
<span v-if="isActive" class="nav-link active" aria-current="page">
<slot></slot>
</span>
<BNavItem v-else :to="href" class="auth-navbar"><slot></slot></BNavItem>
</li>
</template>
<script setup>
import { defineProps } from 'vue'
import { RouterLink, useLink } from 'vue-router'
const props = defineProps({
...RouterLink.props,
})
const { href, isActive } = useLink(props)
</script>