kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move active link handling to JavaScript

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-14 13:58:46 +02:00
parent 991a7b45a0
commit 6f0b121915
5 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ActiveNavigationCheck.astro Normal file
View File

@@ -0,0 +1,20 @@
---
---
<script>
function setActiveLink() {
const links = document.querySelectorAll('.navigation a');
const currentPath = window.location.pathname;
console.log(currentPath);
links.forEach((link) => {
if (link.getAttribute('href') === currentPath) {
link.classList.add('is-active');
} else {
link.classList.remove('is-active');
}
});
}
setActiveLink();
</script>

11
src/components/MainNavigation.astro
View File

@@ -1,15 +1,11 @@
---
import cx from 'classnames';
import { Link } from '.';
import navigation from '../data/navigation.json';
const currentPath = new URL(Astro.request.url).pathname;
---
<nav
class="col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3"
class="navigation col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3"
role="navigation"
aria-label="Main"
>
@@ -18,10 +14,7 @@ const currentPath = new URL(Astro.request.url).pathname;
navigation.map(({ title, url }) => (
<li class="mie-[10px] xs:mie-[15px]">
<Link
class={cx(
'text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20',
{ 'underline !decoration-accent decoration-4': currentPath === url }
)}
class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
href={url}
>
{title}

15
src/components/Subnavigation.astro
View File

@@ -1,24 +1,17 @@
---
import cx from 'classnames';
import data from '../data/subnavigation.json';
import { Link } from '.';
const currentPath = new URL(Astro.request.url).pathname;
---
<nav class="glow flex gap-12" aria-label="Subnavigation">
<nav class="navigation glow flex gap-12" aria-label="Subnavigation" role="navigation">
<ul>
{
data.main.map(({ title, url }) => (
<li>
<Link
href={url}
class={cx(
'font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20',
{ 'underline !decoration-accent decoration-4': currentPath === url }
)}
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
>
{title}
</Link>
@@ -32,9 +25,7 @@ const currentPath = new URL(Astro.request.url).pathname;
<li>
<Link
href={url}
class={`font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
currentPath === url && 'underline !decoration-accent decoration-4'
}`}
class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
>
{title}
</Link>

2
src/layouts/BaseLayout.astro
View File

@@ -9,6 +9,7 @@ import ThemeProvider from '../components/ThemeProvider.astro';
import PageHeader from '../components/PageHeader.astro';
import PageFooter from '../components/PageFooter.astro';
import Sal from '../components/Sal.astro';
import ActiveNavigationCheck from '../components/ActiveNavigationCheck.astro';
export interface Props {
backLink?: string;
@@ -152,6 +153,7 @@ const webManifest = isProduction && {
</script>
<Sal />
<ActiveNavigationCheck />
<ThemeProvider />
</head>

4
src/styles/global.css
View File

@@ -166,6 +166,10 @@
}
@layer components {
.navigation .is-active {
@apply underline !decoration-accent decoration-4;
}
.image-shadow {
@apply relative transition-transform duration-500 ease-in-out;