120 lines
2.9 KiB
Svelte
120 lines
2.9 KiB
Svelte
<!-- svelte-ignore a11y-missing-content -->
|
|
<script>
|
|
import "$lib/css/base.css";
|
|
import "$lib/css/navbar.css";
|
|
import { page } from "$app/stores";
|
|
import anime from "animejs";
|
|
import mainjson from "$lib/json/main.json"
|
|
|
|
import Search from "$lib/components/search.svelte";
|
|
|
|
const SCROLL = 150;
|
|
|
|
$: pageUrl = $page.url.pathname;
|
|
let scrollY = 0;
|
|
let cursorX;
|
|
let cursorY;
|
|
|
|
let navbar_title;
|
|
let navbar_category;
|
|
|
|
function isActive(str, url) {
|
|
if (url === str) return "navbar-active";
|
|
else return "";
|
|
}
|
|
|
|
function isActiveMultiple(strArray, url) {
|
|
for (const str of strArray) {
|
|
const returnVal = isActive(str, url);
|
|
if (returnVal != "") return returnVal;
|
|
}
|
|
return "";
|
|
}
|
|
|
|
function update_gradient(event, div) {
|
|
const rect = div.getBoundingClientRect();
|
|
cursorX = event.clientX - rect.left;
|
|
cursorY = event.clientY - rect.top;
|
|
div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--navbar-ligher) 0%, var(--navbar-darker) 100%)`;
|
|
}
|
|
|
|
function animateForeground(isEntering, div_back) {
|
|
const targetOpacity = isEntering ? 1 : 0;
|
|
|
|
anime({
|
|
targets: div_back,
|
|
opacity: [1 - targetOpacity, targetOpacity],
|
|
duration: 400,
|
|
easing: "easeInOutQuad",
|
|
});
|
|
}
|
|
|
|
function changeScroll() {
|
|
document.documentElement.style.setProperty(
|
|
"--navbar-height",
|
|
scrollY < SCROLL ? "6rem" : "5rem",
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<svelte:window bind:scrollY on:scroll={changeScroll} />
|
|
|
|
<!-- Navbar -->
|
|
<nav class={scrollY < SCROLL ? "flex-row" : "flex-row floating"}>
|
|
<div
|
|
role="banner"
|
|
class={scrollY < SCROLL
|
|
? "disabled"
|
|
: "navbar-height flex-row container"}
|
|
on:mousemove={(event) => {
|
|
update_gradient(event, navbar_title);
|
|
}}
|
|
on:mouseenter={() => {
|
|
animateForeground(true, navbar_title);
|
|
}}
|
|
on:mouseleave={() => {
|
|
animateForeground(false, navbar_title);
|
|
}}
|
|
>
|
|
<div class="navbar-title content">
|
|
<h1 class="title">Etheryo</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
role="banner"
|
|
class="navbar-height flex-row flex-end container"
|
|
on:mousemove={(event) => {
|
|
update_gradient(event, navbar_category);
|
|
}}
|
|
on:mouseenter={() => {
|
|
animateForeground(true, navbar_category);
|
|
}}
|
|
on:mouseleave={() => {
|
|
animateForeground(false, navbar_category);
|
|
}}
|
|
>
|
|
<div class="content navbar-categories">
|
|
<div>
|
|
<a class={isActive("/", pageUrl)} href="/">{mainjson.tab.hub}</a>
|
|
</div>
|
|
<div>
|
|
<a class={isActive("/projects", pageUrl)} href="/projects">{mainjson.tab.projects}</a>
|
|
</div>
|
|
<div>
|
|
<a class={isActive("/about", pageUrl)} href="/about">{mainjson.tab.about}</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://blog.etheryo.fr">{mainjson.tab.blog}</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://git.etheryo.fr">{mainjson.tab.lab}</a>
|
|
</div>
|
|
</div>
|
|
<div class={scrollY < SCROLL ? "navbar-overlay-front" : ""}></div>
|
|
<div
|
|
class={scrollY < SCROLL ? "navbar-overlay-back" : ""}
|
|
bind:this={navbar_category}
|
|
></div>
|
|
</div>
|
|
</nav>
|