studio-variable/world-game
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: header sémantique + backdrop limité à expertise/about/blog

Browse source 
- Header : <nav> enveloppée dans <header> (landmark sémantique)
- Backdrop navbar restreint aux slides about et blog (scroll > 100px)
- Portfolio : $effect navbar backdrop supprimé + import navigation retiré

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-13 09:06:14 +01:00
parent 0a346040a2
commit 4eb495c021
2 changed files with 44 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/layout/Header.svelte
View file

@ -26,9 +26,11 @@
navigation.toggleMenu()
}
const scrollableSlides = new Set(['about', 'blog'])
onMount(() => {
function onScroll(e) {
if (e.target?.classList?.contains('page-scrollable')) {
if (e.target?.classList?.contains('page-scrollable') && scrollableSlides.has(slides.active?.id)) {
navigation.setScrolled(e.target.scrollTop > 100)
}
}
@ -37,44 +39,46 @@
})
</script>
<nav class="navbar" class:navbar--open={isMenuOpen} class:navbar--scrolled={isScrolled && !isMenuOpen}>
<a href="/" class="navbar-logo">
<img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
</a>
<header>
<nav class="navbar" class:navbar--open={isMenuOpen} class:navbar--scrolled={isScrolled && !isMenuOpen}>
<a href="/" class="navbar-logo">
<img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
</a>
<ul class="navbar-list">
{#each menuItems as slide}
<li>
<a
href={slide.path}
class="navbar-item"
class:active={activeId === slide.id}
>
{getTitle(slide)}
</a>
</li>
{/each}
</ul>
<ul class="navbar-list">
{#each menuItems as slide}
<li>
<a
href={slide.path}
class="navbar-item"
class:active={activeId === slide.id}
>
{getTitle(slide)}
</a>
</li>
{/each}
</ul>
<button
class="navbar-toggle"
onclick={toggleMenu}
aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
aria-expanded={isMenuOpen}
aria-controls="main-menu"
>
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="2" fill="white" class="dot dot-tl" />
<circle cx="17" cy="7" r="2" fill="white" class="dot dot-tr" />
<circle cx="7" cy="17" r="2" fill="white" class="dot dot-bl" />
<circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
<line x1="9" y1="9" x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
<line x1="15" y1="9" x2="9" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
</svg>
</button>
</nav>
<button
class="navbar-toggle"
onclick={toggleMenu}
aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
aria-expanded={isMenuOpen}
aria-controls="main-menu"
>
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="2" fill="white" class="dot dot-tl" />
<circle cx="17" cy="7" r="2" fill="white" class="dot dot-tr" />
<circle cx="7" cy="17" r="2" fill="white" class="dot dot-bl" />
<circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
<line x1="9" y1="9" x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
<line x1="15" y1="9" x2="9" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
</svg>
</button>
</nav>
<Menu />
<Menu />
</header>
<style>
.navbar {