Feat: navigation par slides horizontaux

- Nouveau store slides.svelte.js : gestion de l'état des slides (activeIndex, pendingPath, chargement progressif)
- Réécriture du router : remplace navaid par une logique custom avec chargement de la slide initiale puis des autres en arrière-plan
- App.svelte : layout slides-wrapper avec translateX, transition 1000ms
- Header.svelte : menu 100% dynamique depuis slides.all (ordre et titres multilingues depuis Kirby)
- site/controllers/site.php : navigation exposée via site->pages()->listed() avec titres par langue, home prependue

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

site/controllers/site.php

@@ -1,6 +1,11 @@
 <?php
 
 return function ($page, $kirby, $site) {
+  $homePage = $site->find('home');
+  $navPages = $homePage
+    ? $site->pages()->listed()->prepend($homePage->id(), $homePage)
+    : $site->pages()->listed();
+
   // Generic page data available in all templates
   $genericData = [
     'title' => $page->title()->value(),
@@ -19,13 +24,19 @@ return function ($page, $kirby, $site) {
           'name' => $l->name()
         ];
       })->values(),
-      'navigation' => $site->main_navigation()->toStructure()->map(function($item) use ($kirby) {
+      'navigation' => $navPages->map(function($p) use ($kirby) {
-        $linkedPage = $item->link()->toPages()->first();
+        $titles = [];
+        foreach ($kirby->languages() as $lang) {
+          $titles[$lang->code()] = $p->content($lang->code())->title()->value();
+        }
+        if (empty($titles)) {
+          $titles['fr'] = $p->title()->value();
+        }
         return [
-          'label_fr' => $item->label_fr()->value(),
+          'id' => $p->uid(),
-          'label_en' => $item->label_en()->value(),
+          'url' => '/' . $p->uri(),
-          'url' => $linkedPage?->url(),
+          'title' => $p->title()->value(),
-          'isActive' => $linkedPage?->isOpen() ?? false
+          'titles' => $titles
         ];
       })->values()
     ]

src/App.svelte

@@ -1,8 +1,7 @@
 <script>
-  import { page } from '@state/page.svelte'
+  import { slides } from '@state/slides.svelte'
 
   import Header from '@components/layout/Header.svelte'
-  import Footer from '@components/layout/Footer.svelte'
   import Cursor from '@components/layout/Cursor.svelte'
 
   import Home from '@views/Home.svelte'
@@ -17,22 +16,20 @@
   import Default from '@views/Default.svelte'
 
   const templates = {
-    'home': Home,
+    home: Home,
-    'about': About,
+    about: About,
-    'expertise': Expertise,
+    expertise: Expertise,
-    'portfolio': Portfolio,
+    portfolio: Portfolio,
-    'project': Project,
+    project: Project,
-    'jouer': Jouer,
+    jouer: Jouer,
-    'game': Game,
+    game: Game,
-    'blog': Blog,
+    blog: Blog,
-    'article': Article,
+    article: Article,
-    'default': Default
+    default: Default
   }
 
-  const pageData = $derived(page.data)
+  const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
-  const template = $derived(pageData ? (page.template || 'default') : null)
+  const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
-  const View = $derived(template ? (templates[template] || Default) : null)
-  const showFooter = $derived(template && template !== 'home')
 </script>
 
 <div class="app">
@@ -40,14 +37,22 @@
   <Header />
 
   <main class="main">
-    {#if pageData && View}
+    <div
-      <View data={pageData} />
+      class="slides-wrapper"
-    {/if}
+      style="width: {wrapperWidth}; transform: {wrapperTransform}"
+    >
+      {#each slides.all as slide}
+        <div class="slide" data-slide={slide.id}>
+          {#if slide.loaded}
+            <svelte:component
+              this={templates[slide.template] ?? Default}
+              data={slide.data}
+            />
+          {/if}
+        </div>
+      {/each}
+    </div>
   </main>
-
-  {#if showFooter}
-    <Footer />
-  {/if}
 </div>
 
 <style>
@@ -61,17 +66,7 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     background: #000;
     color: #fff;
-    overflow-x: hidden;
+    overflow: hidden;
-  }
-
-  .app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .main {
-    flex: 1;
   }
 
   :global(a) {
@@ -83,4 +78,26 @@
     max-width: 100%;
     height: auto;
   }
+
+  .app {
+    height: 100vh;
+  }
+
+  .main {
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+  }
+
+  .slides-wrapper {
+    display: flex;
+    height: 100%;
+    transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
+  }
+
+  .slide {
+    width: 100vw;
+    height: 100vh;
+    flex-shrink: 0;
+  }
 </style>

src/components/layout/Header.svelte

@@ -1,27 +1,20 @@
 <script>
   import { navigation } from '@state/navigation.svelte'
   import { locale } from '@state/locale.svelte'
-  import { page } from '@state/page.svelte'
+  import { slides } from '@state/slides.svelte'
-  import { navigateTo } from '@router'
+  import { slideTo } from '@router'
 
   const isMenuOpen = $derived(navigation.isMenuOpen)
   const currentLang = $derived(locale.current)
-  const currentPage = $derived(page.template || 'home')
+  const activeId = $derived(slides.active?.id ?? 'home')
+  const menuItems = $derived(slides.all.filter(s => s.id !== 'home'))
 
-  const translations = {
+  function getTitle(slide) {
-    expertise: { fr: 'EXPERTISE', en: 'EXPERTISE' },
+    return slide.titles?.[currentLang] || slide.title || slide.id
-    games: { fr: 'GAMES', en: 'GAMES' },
-    play: { fr: 'PLAY', en: 'PLAY' },
-    about: { fr: 'À PROPOS', en: 'ABOUT' },
-    blog: { fr: 'BLOG', en: 'BLOG' }
-  }
-
-  function t(key) {
-    return translations[key]?.[currentLang] || translations[key]?.fr || key
   }
 
   function handleNav(path) {
-    navigateTo(path)
+    slideTo(path)
   }
 
   function toggleMenu() {
@@ -52,65 +45,19 @@
     />
   </div>
 
-  <div
+  {#each menuItems as slide}
-    class="navbar-item clickable"
+    <div
-    class:active={currentPage === 'expertise'}
+      class="navbar-item clickable"
-    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
+      class:active={activeId === slide.id}
-    onclick={() => handleNav('/expertise')}
+      style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
-    onkeypress={(e) => e.key === 'Enter' && handleNav('/expertise')}
+      onclick={() => handleNav(slide.path)}
-    role="button"
+      onkeypress={(e) => e.key === 'Enter' && handleNav(slide.path)}
-    tabindex="0"
+      role="button"
-  >
+      tabindex="0"
-    {t('expertise')}
+    >
-  </div>
+      {getTitle(slide)}
-
+    </div>
-  <div
+  {/each}
-    class="navbar-item clickable"
-    class:active={currentPage === 'portfolio'}
-    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
-    onclick={() => handleNav('/portfolio')}
-    onkeypress={(e) => e.key === 'Enter' && handleNav('/portfolio')}
-    role="button"
-    tabindex="0"
-  >
-    {t('games')}
-  </div>
-
-  <div
-    class="navbar-item clickable"
-    class:active={currentPage === 'jouer'}
-    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
-    onclick={() => handleNav('/jouer')}
-    onkeypress={(e) => e.key === 'Enter' && handleNav('/jouer')}
-    role="button"
-    tabindex="0"
-  >
-    {t('play')}
-  </div>
-
-  <div
-    class="navbar-item clickable"
-    class:active={currentPage === 'about'}
-    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
-    onclick={() => handleNav('/a-propos')}
-    onkeypress={(e) => e.key === 'Enter' && handleNav('/a-propos')}
-    role="button"
-    tabindex="0"
-  >
-    {t('about')}
-  </div>
-
-  <div
-    class="navbar-item clickable"
-    class:active={currentPage === 'blog' || currentPage === 'article'}
-    style="visibility: {isMenuOpen ? 'hidden' : 'visible'};"
-    onclick={() => handleNav('/blog')}
-    onkeypress={(e) => e.key === 'Enter' && handleNav('/blog')}
-    role="button"
-    tabindex="0"
-  >
-    {t('blog')}
-  </div>
 
   <div
     class="clickable"

src/router/index.js

@@ -1,93 +1,109 @@
-import navaid from "navaid";
+import { slides } from "@state/slides.svelte";
-import { page } from "@state/page.svelte";
-import { navigation } from "@state/navigation.svelte";
 import { site } from "@state/site.svelte";
 import { locale } from "@state/locale.svelte";
 
-export const router = navaid("/", () => {
+let siteInitialized = false;
-  // Default handler
-});
 
-async function loadPage(path) {
+function normalizePath(path) {
-  navigation.setLoading(true);
+  return path === "/" ? "/home" : path;
-  page.setLoading(true);
+}
+
+async function loadSlide(path) {
+  const idx = slides.getIndexByPath(path);
+  if (idx !== -1) {
+    const slide = slides.all[idx];
+    if (slide.loaded || slide.loading) return;
+    slides.setLoading(path, true);
+  }
+
+  console.log(`[router] loadSlide: ${path}`);
 
   try {
     const response = await fetch(`${path}.json`);
-
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
-    if (!response.ok) {
-      throw new Error(`Failed to load page: ${response.status}`);
-    }
-
     const data = await response.json();
 
-    if (data.site) {
+    console.log(`[router] fetch ok: ${path}`, {
-      site.set(data.site);
+      template: data.template,
-      locale.initialize(data.site.language, data.site.languages);
+      hasSite: !!data.site,
-    }
+      navigation: data.site?.navigation,
-
-    page.set({
-      data,
-      template: data.template || "default",
-      url: path,
-      loading: false,
-      error: null,
     });
 
-    window.scrollTo(0, 0);
+    if (!siteInitialized && data.site) {
+      site.set(data.site);
+      locale.initialize(data.site.language, data.site.languages);
+      slides.init(data.site.navigation);
+      siteInitialized = true;
+      console.log(`[router] slides initialized:`, slides.all.map(s => s.path));
+    }
+
+    slides.setData(path, data);
+    console.log(`[router] setData done: ${path}, slides loaded:`, slides.all.map(s => `${s.path}=${s.loaded}`));
   } catch (error) {
-    console.error("Failed to load page:", error);
+    console.error(`[router] Failed to load slide ${path}:`, error);
-    page.setError(error);
+    slides.setLoading(path, false);
-  } finally {
-    navigation.setLoading(false);
   }
 }
 
-// Route handlers
+function loadAllSlidesInBackground(exceptPath) {
-router
+  slides.all
-  .on("/", () => loadPage("/home"))
+    .filter((s) => s.path !== exceptPath)
-  .on("/expertise", () => loadPage("/expertise"))
+    .forEach((s) => loadSlide(s.path));
-  .on("/portfolio", () => loadPage("/portfolio"))
+}
-  .on("/portfolio/:slug", ({ slug }) => loadPage(`/portfolio/${slug}`))
+
-  .on("/jouer", () => loadPage("/jouer"))
+export function slideTo(path, { skipHistory = false } = {}) {
-  .on("/jouer/:slug", ({ slug }) => loadPage(`/jouer/${slug}`))
+  path = normalizePath(path);
-  .on("/a-propos", () => loadPage("/a-propos"))
+
-  .on("/blog", () => loadPage("/blog"))
+  if (!skipHistory) {
-  .on("/blog/:slug", ({ slug }) => loadPage(`/blog/${slug}`))
+    history.pushState({}, "", path === "/home" ? "/" : path);
-  .on("*", (params) => {
+  }
-    // Fallback for other routes
+
-    loadPage(window.location.pathname);
+  const idx = slides.getIndexByPath(path);
+  if (idx !== -1 && slides.all[idx].title) {
+    document.title = `${slides.all[idx].title} — World Game`;
+  }
+
+  slides.slideTo(path);
+
+  if (idx !== -1 && !slides.all[idx].loaded) {
+    loadSlide(path);
+  }
+}
+
+export async function initRouter() {
+  const initialPath = normalizePath(window.location.pathname);
+  console.log(`[router] initRouter, initialPath: ${initialPath}`);
+
+  await loadSlide(initialPath);
+
+  const idx = slides.getIndexByPath(initialPath);
+  console.log(`[router] after initial load, idx=${idx}, slides.all.length=${slides.all.length}`);
+  if (idx !== -1) {
+    slides.setActiveIndex(idx);
+  }
+
+  loadAllSlidesInBackground(initialPath);
+
+  window.addEventListener("popstate", () => {
+    const path = normalizePath(window.location.pathname);
+    slideTo(path, { skipHistory: true });
   });
 
-export function initRouter() {
-  // Start listening to route changes
-  router.listen();
-
-  // Intercept internal link clicks
   document.addEventListener("click", (e) => {
     const link = e.target.closest("a");
     if (!link) return;
 
     const url = new URL(link.href, window.location.origin);
-
-    // Only intercept same-origin links without target attribute
     if (
       url.origin === window.location.origin &&
       !link.target &&
       !link.hasAttribute("download")
     ) {
       e.preventDefault();
-      navigateTo(url.pathname);
+      slideTo(url.pathname);
     }
   });
-
-  // Handle browser back/forward
-  window.addEventListener("popstate", () => {
-    router.run(window.location.pathname);
-  });
 }
 
-export function navigateTo(path) {
+// Keep navigateTo as alias so existing views don't break
-  window.history.pushState({}, "", path);
+export const navigateTo = slideTo;
-  loadPage(path);
-}

src/state/slides.svelte.js

@@ -0,0 +1,76 @@
+let slidesData = $state([])
+let activeIndex = $state(0)
+let pendingPath = $state(null)
+
+function getIndexByPath(path) {
+  return slidesData.findIndex(s => s.path === path)
+}
+
+export const slides = {
+  get all() { return slidesData },
+  get activeIndex() { return activeIndex },
+  get active() { return slidesData[activeIndex] ?? null },
+  get pendingPath() { return pendingPath },
+
+  init(siteNavigation) {
+    slidesData = siteNavigation.map(nav => ({
+      id: nav.id,
+      path: nav.url,
+      title: nav.title,
+      titles: nav.titles || { fr: nav.title },
+      template: nav.id,
+      data: null,
+      loaded: false,
+      loading: false
+    }))
+  },
+
+  setData(path, data) {
+    const idx = getIndexByPath(path)
+    if (idx === -1) return
+    slidesData[idx] = {
+      ...slidesData[idx],
+      template: data.template || slidesData[idx].id,
+      data,
+      loaded: true,
+      loading: false
+    }
+    if (pendingPath === path) {
+      slides.resolvePending()
+    }
+  },
+
+  setLoading(path, bool) {
+    const idx = getIndexByPath(path)
+    if (idx === -1) return
+    slidesData[idx] = { ...slidesData[idx], loading: bool }
+  },
+
+  slideTo(path) {
+    const idx = getIndexByPath(path)
+    if (idx === -1) return
+    if (slidesData[idx].loaded) {
+      activeIndex = idx
+      pendingPath = null
+    } else {
+      pendingPath = path
+    }
+  },
+
+  setActiveIndex(idx) {
+    activeIndex = idx
+  },
+
+  resolvePending() {
+    if (!pendingPath) return
+    const idx = getIndexByPath(pendingPath)
+    if (idx !== -1 && slidesData[idx].loaded) {
+      activeIndex = idx
+      pendingPath = null
+    }
+  },
+
+  getIndexByPath(path) {
+    return getIndexByPath(path)
+  }
+}