alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

feat(Layout): apply view transition to page navigation

Browse source
This commit is contained in:
Alexander Navarro 2024-02-29 17:03:04 -03:00
parent df32342455
commit d7f4d6321e
2 changed files with 17 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/Navbar.astro
View file

@ -6,8 +6,6 @@ const links = [
{ href: '/curriculum', text: 'Curriculum' },
{ href: '/contact', text: 'Contact' },
];
// TODO: Fix so the "active" class can come from the server so it doesnt flicker
---
<nav class="navbar navbar-expand-lg bg-body-tertiary">
@ -25,12 +23,16 @@ const links = [
</nav>
<script>
// Add active class to the current link
const link = document.querySelector(`a[href='${location.pathname}']`);
const setActiveLink = () => {
const link = document.querySelector(`a[href='${location.pathname}']`);
if (link) {
link.classList.add('active');
}
if (link) {
link.classList.add('active');
}
};
// Add active class to the current link
document.addEventListener('astro:page-load', setActiveLink, { once: true });
document.addEventListener('astro:after-swap', setActiveLink);
</script>
<style>