.tab-koten,
.tab-hotspots {
    padding: 0.4rem 1.75rem;
    border-radius: var(--radius-circle);
    align-items: center;
    width: 100%;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.tab-koten a,
.tab-hotspots a {
    color: var(--secondary-semi-dark);
}

.tab-koten svg,
.tab-hotspots svg {
    stroke: var(--secondary-semi-dark);
}

.tab-koten[aria-current="page"] a,
.tab-hotspots[aria-current="page"] a {
    color: var(--secondary);
}

.tab-koten[aria-current="page"] svg,
.tab-hotspots[aria-current="page"] svg {
    stroke: var(--secondary);
}

.tab-slider {
    position: absolute;
    top: 0.15rem;
    bottom: 0.15rem;
    border-radius: var(--radius-circle);
    background-color: white;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--secondary-ultra-light);
    z-index: 0;
    pointer-events: none;
    view-transition-name: --tab-pill; /* ← enige toevoeging */
}

@view-transition {
    navigation: auto;
}

#brxe-kdyasw {
    view-transition-name: --persist-nav;
}
document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    const kotenParent = document.querySelector('.tab-koten');
    const hotspotsParent = document.querySelector('.tab-hotspots');

    if (kotenParent && (currentPath === '/' || currentPath.startsWith('/koten') || currentPath.startsWith('/kot'))) {
        kotenParent.setAttribute('aria-current', 'page');
    }
    if (hotspotsParent && (currentPath.startsWith('/hotspots') || currentPath.startsWith('/hotspot') || currentPath.startsWith('/alle-hotspots'))) {
        hotspotsParent.setAttribute('aria-current', 'page');
    }

    const container = document.querySelector('.tab-koten')?.closest('ul');
    const pill = container?.querySelector('.tab-slider'); // ← pakt de statische pill
    const active = container?.querySelector('[aria-current="page"]');
    if (!container || !pill || !active) return;

    const rect = active.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();
    pill.style.width = rect.width + 'px';
    pill.style.left = (rect.left - containerRect.left) + 'px';
});
Ga op zoektocht

Meest gezochte steden

AntwerpenLeuvenGent

Menu

Hotspots in jouw studentenstad

Ontdek leuke en handige studentenhotspots.

Ontdekken

Lijst