Correcr links for navbar.

This commit is contained in:
Yohan Boujon 2025-03-29 16:44:42 +01:00
parent 64e3a6e7ac
commit e425fec7ce
4 changed files with 44 additions and 32 deletions

View file

@ -10,7 +10,3 @@
<SvgIcon type="mdi" path={mdiEmailFast} /> <SvgIcon type="mdi" path={mdiEmailFast} />
<a href="mailto:contact@etheryo.fr">Envoyez nous un mail</a> <a href="mailto:contact@etheryo.fr">Envoyez nous un mail</a>
</div> </div>
<div class="page-icon-text">
<SvgIcon type="mdi" path={mdiHelp} />
<a href="https://duckduckgo.com/">Besoin d'aide</a>
</div>

View file

@ -1,11 +1,11 @@
<!-- svelte-ignore a11y-missing-content --> <!-- svelte-ignore a11y-missing-content -->
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/navbar.css'; import "$lib/css/navbar.css";
import { page } from '$app/stores'; import { page } from "$app/stores";
import anime from 'animejs'; import anime from "animejs";
import Search from '$lib/components/search.svelte'; import Search from "$lib/components/search.svelte";
const SCROLL = 150; const SCROLL = 150;
@ -18,16 +18,16 @@
let navbar_category; let navbar_category;
function isActive(str, url) { function isActive(str, url) {
if (url === str) return 'navbar-active'; if (url === str) return "navbar-active";
else return ''; else return "";
} }
function isActiveMultiple(strArray, url) { function isActiveMultiple(strArray, url) {
for (const str of strArray) { for (const str of strArray) {
const returnVal = isActive(str, url); const returnVal = isActive(str, url);
if (returnVal != '') return returnVal; if (returnVal != "") return returnVal;
} }
return ''; return "";
} }
function update_gradient(event, div) { function update_gradient(event, div) {
@ -44,14 +44,14 @@
targets: div_back, targets: div_back,
opacity: [1 - targetOpacity, targetOpacity], opacity: [1 - targetOpacity, targetOpacity],
duration: 400, duration: 400,
easing: 'easeInOutQuad' easing: "easeInOutQuad",
}); });
} }
function changeScroll() { function changeScroll() {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--navbar-height', "--navbar-height",
scrollY < SCROLL ? '6rem' : '5rem' scrollY < SCROLL ? "6rem" : "5rem",
); );
} }
</script> </script>
@ -59,10 +59,12 @@
<svelte:window bind:scrollY on:scroll={changeScroll} /> <svelte:window bind:scrollY on:scroll={changeScroll} />
<!-- Navbar --> <!-- Navbar -->
<nav class={scrollY < SCROLL ? 'flex-row' : 'flex-row floating'}> <nav class={scrollY < SCROLL ? "flex-row" : "flex-row floating"}>
<div <div
role="banner" role="banner"
class="{scrollY < SCROLL ? 'disabled' : 'navbar-height flex-row container'}" class={scrollY < SCROLL
? "disabled"
: "navbar-height flex-row container"}
on:mousemove={(event) => { on:mousemove={(event) => {
update_gradient(event, navbar_title); update_gradient(event, navbar_title);
}} }}
@ -93,21 +95,22 @@
> >
<div class="content navbar-categories"> <div class="content navbar-categories">
<div> <div>
<a class={isActiveMultiple(['/', '/articles', '/style'], pageUrl)} href="/articles" <a class={isActive("/", pageUrl)} href="/">Hub</a>
>Articles</a
>
</div> </div>
<div> <div>
<a class={isActive('/authors', pageUrl)} href="/authors">Auteurs</a> <a class={isActive("/projects", pageUrl)} href="/projects">Projets</a>
</div> </div>
<div> <div>
<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a> <a href="https://blog.etheryo.fr">Blog</a>
</div> </div>
<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size=25 /> <div>
<a href="https://git.etheryo.fr">Labo</a>
</div> </div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''}>
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category}>
</div> </div>
<div class={scrollY < SCROLL ? "navbar-overlay-front" : ""}></div>
<div
class={scrollY < SCROLL ? "navbar-overlay-back" : ""}
bind:this={navbar_category}
></div>
</div> </div>
</nav> </nav>

View file

@ -1,9 +1,6 @@
<script> <script>
import "$lib/css/base.css"; import "$lib/css/base.css";
import "$lib/css/main.css"; import "$lib/css/main.css";
import Link from "$lib/components/link.svelte";
let img = "placeholder.png";
</script> </script>
<div class="main-banner"> <div class="main-banner">

View file

@ -0,0 +1,16 @@
<script>
import "$lib/css/base.css";
import "$lib/css/main.css";
</script>
<div class="main-banner">
<div class="main-banner-gradient"></div>
<div class="main-banner-content">
<div
class="flex-row center"
style="padding-top: 15rem;padding-bottom: 15rem;"
>
<h1>Projects</h1>
</div>
</div>
</div>