Ich mal wieder, mit etwas was mich gerade echt.... übelst nervt!
Um die Navigation (egal ob Mobile oder Desktop) zu vereinheitlichen nutze ich ein Composable das ich einfach lade und darüber iteriere, das sieht auch ganz klein und fein so aus:
import {
HomeIcon,
NewspaperIcon,
BuildingOfficeIcon,
IdentificationIcon,
PhotoIcon,
EnvelopeIcon
} from '@heroicons/vue/24/outline';
export const navigation = [
{ id: 1, name: 'Home', href: route('home'), icon: HomeIcon, current: route().current('home') },
{ id: 2, name: 'News', href: route('post.index'), icon: NewspaperIcon,current: route().current('post.*') },
{ id: 3, name: 'Divisions', href: route('division.index'), icon: BuildingOfficeIcon,current: route().current('division.*') },
{ id: 4, name: 'About us', href: route('aboutus'), icon: IdentificationIcon,current: route().current('aboutus') },
{ id: 5, name: 'Gallery', href: '#', icon: PhotoIcon,current: false },
{ id: 6, name: 'Contact', href: '#', icon: EnvelopeIcon,current: false },
];Das ganze funktioniert ja auch ganz schön dann in der Komponente:
<Link
v-for="item in navigation"
:key="item.id"
:href="item.href"
:class="[item.current ? 'bg-blue-950 text-white' : 'hover:bg-blue-800', 'inline-flex flex-col items-center text-xl font-bold rounded px-3 py-3']"
:aria-current="item.current ? 'page' : undefined"
>
<component :is="item.icon" class="size-6" />
{{ item.name }}
</Link>Jetzt aber das Problem: Wechsle ich dann die Seite, wird der Current State nicht gesetzt, um das zu verdeutlichen, hab ich das eben fix mal aufgenommen als Video:
Damit die "neue" Seite auch in der Navigation als aktuelle highlighted ist, muss ich erst alles neu laden, nicht der Sinn der Sache. Jemand vielleicht hier eine Idee wo eventuell mein Denkfehler ist?
Als Info natürlich vergessen: Die route() funktion wird durch Ziggy bereitgestellt, ob das Problem auch mit Wayfinder besteht werde ich erst Sonntag Abend/Montag ausprobieren können.
