mirror of
https://github.com/IT4Change/gradido.git
synced 2026-02-06 09:56:05 +00:00
make auth nav link span if active
This commit is contained in:
parent
85409f4a48
commit
bf836e7216
@ -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()
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
19
frontend/src/components/Menu/NavItem.vue
Normal file
19
frontend/src/components/Menu/NavItem.vue
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user