Fixing Navbar routing. Added routes.

This commit is contained in:
Yohan Boujon 2024-03-11 11:04:29 +01:00
parent afdbe5b9d8
commit 16fe777883
7 changed files with 30 additions and 7 deletions

View file

@ -63,7 +63,7 @@ a {
width: 0; width: 0;
background-color: var(--palette-purple); background-color: var(--palette-purple);
transition: all .3s ease 0s; transition: all .3s ease 0s;
height: 2px; height: 3px;
} }
.navbar-categories-white>div>a::before, .navbar-categories-white>div>a::before,
@ -73,7 +73,6 @@ a {
.navbar-categories>div>a::before { .navbar-categories>div>a::before {
top: -6px; top: -6px;
height: 3px;
} }
.navbar-categories>div>a::after { .navbar-categories>div>a::after {

View file

@ -4,8 +4,21 @@
import '$lib/css/navbar.css'; import '$lib/css/navbar.css';
import { page } from '$app/stores'; import { page } from '$app/stores';
const url = $page.url.pathname; $: pageUrl = $page.url.pathname;
let scrollY; let scrollY;
function isActive(str, url, condition) {
if (url === str) return condition ? 'navbar-active' : 'navbar-active navbar-active-scroll';
else return '';
}
function isActiveMultiple(strArray, url, condition) {
for (const str of strArray) {
const returnVal = isActive(str, url, condition);
if (returnVal != '') return returnVal;
}
return '';
}
</script> </script>
<svelte:window bind:scrollY /> <svelte:window bind:scrollY />
@ -22,16 +35,18 @@
: 'flex-end navbar-categories h-100'} : 'flex-end navbar-categories h-100'}
> >
<div> <div>
<a class={scrollY < 50 ? 'navbar-active' : 'navbar-active navbar-active-scroll'} href="/">Articles</a> <a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
>Articles</a
>
</div> </div>
<div> <div>
<a href="/">Auteurs</a> <a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
</div> </div>
<div> <div>
<a href="/">Catégories</a> <a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
</div> </div>
<div> <div>
<a href="/">Flux RSS</a> <a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">Flux RSS</a>
</div> </div>
</div> </div>
<div <div

View file

@ -0,0 +1,6 @@
import { redirect } from '@sveltejs/kit';
export async function load(context)
{
redirect(301, '/articles')
}

View file

@ -0,0 +1 @@
<h1>Authors</h1>

View file

@ -0,0 +1 @@
<h1>Categories</h1>

View file

@ -0,0 +1 @@
<h1>Rss</h1>