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: '/curriculum', text: 'Curriculum' },
{ href: '/contact', text: 'Contact' }, { 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"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
@ -25,12 +23,16 @@ const links = [
</nav> </nav>
<script> <script>
// Add active class to the current link const setActiveLink = () => {
const link = document.querySelector(`a[href='${location.pathname}']`); const link = document.querySelector(`a[href='${location.pathname}']`);
if (link) { if (link) {
link.classList.add('active'); 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> </script>
<style> <style>

16
src/layouts/Layout.astro
View file

@ -1,4 +1,5 @@
--- ---
import { ViewTransitions } from 'astro:transitions';
export interface Props { export interface Props {
title: string; title: string;
} }
@ -6,7 +7,6 @@ export interface Props {
const { title } = Astro.props; const { title } = Astro.props;
import '../assets/style/global.css'; import '../assets/style/global.css';
import Navbar from '../components/Navbar.astro'; import Navbar from '../components/Navbar.astro';
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@ -18,6 +18,7 @@ import Navbar from '../components/Navbar.astro';
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
<ViewTransitions />
<!-- Reset and normilize styles --> <!-- Reset and normilize styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
@ -26,14 +27,13 @@ import Navbar from '../components/Navbar.astro';
<header> <header>
<Navbar /> <Navbar />
</header> </header>
<main> <main transition:animate="fade">
<slot /> <slot />
</main> </main>
<style>
header > :global(*) {
margin-left: auto;
}
</style>
</body> </body>
</html> </html>
<style>
header > :global(*) {
margin-left: auto;
}
</style>