Correcr links for navbar.
This commit is contained in:
parent
64e3a6e7ac
commit
e425fec7ce
4 changed files with 44 additions and 32 deletions
|
@ -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>
|
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<!-- 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;
|
||||||
|
|
||||||
$: pageUrl = $page.url.pathname;
|
$: pageUrl = $page.url.pathname;
|
||||||
let scrollY=0;
|
let scrollY = 0;
|
||||||
let cursorX;
|
let cursorX;
|
||||||
let cursorY;
|
let cursorY;
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
16
src/routes/projects/+page.svelte
Normal file
16
src/routes/projects/+page.svelte
Normal 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>
|
Loading…
Add table
Reference in a new issue