Fixing Navbar routing. Added routes.
This commit is contained in:
parent
afdbe5b9d8
commit
16fe777883
7 changed files with 30 additions and 7 deletions
|
@ -63,7 +63,7 @@ a {
|
|||
width: 0;
|
||||
background-color: var(--palette-purple);
|
||||
transition: all .3s ease 0s;
|
||||
height: 2px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.navbar-categories-white>div>a::before,
|
||||
|
@ -73,7 +73,6 @@ a {
|
|||
|
||||
.navbar-categories>div>a::before {
|
||||
top: -6px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.navbar-categories>div>a::after {
|
||||
|
|
|
@ -4,8 +4,21 @@
|
|||
import '$lib/css/navbar.css';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
const url = $page.url.pathname;
|
||||
$: pageUrl = $page.url.pathname;
|
||||
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>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
|
@ -22,16 +35,18 @@
|
|||
: 'flex-end navbar-categories h-100'}
|
||||
>
|
||||
<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>
|
||||
<a href="/">Auteurs</a>
|
||||
<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/">Catégories</a>
|
||||
<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/">Flux RSS</a>
|
||||
<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">Flux RSS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
6
frontend/src/routes/+page.js
Normal file
6
frontend/src/routes/+page.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export async function load(context)
|
||||
{
|
||||
redirect(301, '/articles')
|
||||
}
|
1
frontend/src/routes/authors/+page.svelte
Normal file
1
frontend/src/routes/authors/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<h1>Authors</h1>
|
1
frontend/src/routes/categories/+page.svelte
Normal file
1
frontend/src/routes/categories/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<h1>Categories</h1>
|
1
frontend/src/routes/rss/+page.svelte
Normal file
1
frontend/src/routes/rss/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<h1>Rss</h1>
|
Loading…
Add table
Reference in a new issue