From a3a01e5296f4e8c344e7c3df96e95f402d2522fb Mon Sep 17 00:00:00 2001
From: Corentin Huet <corentin.huet@ldc.fr>
Date: Thu, 5 Mar 2026 10:54:49 +0100
Subject: [PATCH] feat: :sparkles: add stickies on unveil page

---
 .../Controllers/Fo/StaticPageController.php   |  4 +-
 database/seeders/Mandatory/StickySeeder.php   | 35 +++++++++++++++
 resources/sass/fo/pages/_unveil.scss          | 41 ++++++++++++++++++
 resources/ts/fo/pages/unveil.ts               | 11 +++++
 resources/views/fo/pages/unveil.blade.php     | 43 ++++++++++++++++++-
 5 files changed, 132 insertions(+), 2 deletions(-)

diff --git a/app/Http/Controllers/Fo/StaticPageController.php b/app/Http/Controllers/Fo/StaticPageController.php
index b3a06ee..32bcbf4 100644
--- a/app/Http/Controllers/Fo/StaticPageController.php
+++ b/app/Http/Controllers/Fo/StaticPageController.php
@@ -91,6 +91,7 @@ class StaticPageController extends Controller
         $siteSection       = $sectionModels->where('section', PageSectionEnum::unveil_sites)->first();
         $historySection    = $sectionModels->where('section', PageSectionEnum::unveil_history)->first();
         $commitmentSection = $sectionModels->where('section', PageSectionEnum::unveil_commitments)->first();
+        $navLinks          = Sticky::query()->where('type', StaticPageType::unveil)->get();
 
         $viewBox     = null;
         $initialZoom = null;
@@ -119,7 +120,8 @@ class StaticPageController extends Controller
             'localSection',
             'siteSection',
             'historySection',
-            'commitmentSection'
+            'commitmentSection',
+            'navLinks'
         ));
     }
 
diff --git a/database/seeders/Mandatory/StickySeeder.php b/database/seeders/Mandatory/StickySeeder.php
index 13c42dd..0f580ba 100644
--- a/database/seeders/Mandatory/StickySeeder.php
+++ b/database/seeders/Mandatory/StickySeeder.php
@@ -48,5 +48,40 @@ class StickySeeder extends Seeder
                 'anchor' => 'on-se-retrouve'
             ],
         );
+        Sticky::query()->updateOrCreate(
+            [
+                'type' => StaticPageType::unveil,
+                'title' => 'VOLENA',
+                'anchor' => 'key-numbers'
+            ],
+        );
+        Sticky::query()->updateOrCreate(
+            [
+                'type' => StaticPageType::unveil,
+                'title' => 'Notre mission',
+                'anchor' => 'missions'
+            ],
+        );
+        Sticky::query()->updateOrCreate(
+            [
+                'type' => StaticPageType::unveil,
+                'title' => 'Filière 100% française',
+                'anchor' => 'local'
+            ],
+        );
+        Sticky::query()->updateOrCreate(
+            [
+                'type' => StaticPageType::unveil,
+                'title' => 'Nos sites',
+                'anchor' => 'sites'
+            ],
+        );
+        Sticky::query()->updateOrCreate(
+            [
+                'type' => StaticPageType::unveil,
+                'title' => 'Notre histoire',
+                'anchor' => 'history'
+            ],
+        );
     }
 }
diff --git a/resources/sass/fo/pages/_unveil.scss b/resources/sass/fo/pages/_unveil.scss
index 3e3a095..36269fc 100644
--- a/resources/sass/fo/pages/_unveil.scss
+++ b/resources/sass/fo/pages/_unveil.scss
@@ -139,4 +139,45 @@
             }
         }
     }
+
+    .unveil-navigation {
+        @include media-breakpoint-up(md) {
+            position: fixed;
+            z-index: 10;
+            bottom: 4rem;
+            left: 4rem;
+            max-width: 15rem;
+
+            &-wrapper {
+                height: 0;
+                opacity: 0;
+                transform: translateY(25%);
+                transition: .3s;
+                visibility: hidden;
+
+                &.show {
+                    height: auto;
+                    opacity: 1;
+                    transform: translateY(0);
+                    visibility: visible;
+                }
+            }
+        }
+
+        .col-md-12 {
+            @include media-breakpoint-up(md) {
+                width: fit-content;
+            }
+
+            .badge {
+                width: .5rem;
+                height: .5rem;
+
+                @include media-breakpoint-up(md) {
+                    width: 1rem;
+                    height: 1rem;
+                }
+            }
+        }
+    }
 }
diff --git a/resources/ts/fo/pages/unveil.ts b/resources/ts/fo/pages/unveil.ts
index fa9f8f6..4591d02 100644
--- a/resources/ts/fo/pages/unveil.ts
+++ b/resources/ts/fo/pages/unveil.ts
@@ -7,6 +7,17 @@ document.addEventListener("DOMContentLoaded", function () {
         return;
     }
 
+    const button = document.querySelector(".unveil-navigation .btn") as HTMLButtonElement;
+    const navWrapper = document.querySelectorAll(".unveil-navigation-wrapper ");
+    button.addEventListener("click", () => {
+        navWrapper.forEach((element: Element) => {
+            element.classList.toggle("show");
+        });
+        document.querySelectorAll(".unveil-navigation .btn svg").forEach(icon => {
+            icon.classList.toggle("d-none");
+        });
+    });
+
     // The colors to use in the carousel, in this order.
     const colors = [
         "quint", "secondary", "sixt", "quad"
diff --git a/resources/views/fo/pages/unveil.blade.php b/resources/views/fo/pages/unveil.blade.php
index 30147fa..d322276 100644
--- a/resources/views/fo/pages/unveil.blade.php
+++ b/resources/views/fo/pages/unveil.blade.php
@@ -19,6 +19,47 @@
     <section class="unveil">
         {{-- KEY NUMBERS --}}
         <section class="key-numbers anchor-padding my-5" id="key-numbers">
+            <div class="unveil-navigation z-2">
+                <div class="unveil-navigation-wrapper show row m-0 p-0">
+                    @foreach ($navLinks as $key => $link)
+                        <div class="col-6 col-md-12 px-md-0 py-md-1 p-2">
+                            <div @class([
+                                'rounded-5 shadow-sm h-100',
+                                match($loop->index) {
+                                    0 => 'bg-primary-light',
+                                    1 => 'bg-secondary-light',
+                                    2 => 'bg-quad-light',
+                                    3 => 'bg-quint-light',
+                                    4 => 'bg-sixt-light',
+                                    default => 'bg-primary-light'
+                                }
+                            ])>
+                                <a class="d-flex justify-content-start align-items-center text-primary text-decoration-none p-sm-3 p-2 h-100"
+                                    data-bs-toggle="tooltip" href="#{{ $link->anchor }}"
+                                    title="{{ __('Accéder à la partie :name de la page', ['name' => $link->title]) }}">
+                                    <span @class([
+                                        'badge rounded-pill d-block me-2',
+                                        match($loop->index) {
+                                            0 => 'bg-primary',
+                                            1 => 'bg-secondary',
+                                            2 => 'bg-quad',
+                                            3 => 'bg-quint',
+                                            4 => 'bg-sixt',
+                                            default => 'bg-primary'
+                                        }
+                                    ])></span>
+                                    <small>{{ $link->title }}</small>
+                                </a>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+                <button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3"
+                    title="{{ __('Afficher/Masquer le menu des ancres') }}">
+                    <i class="fa-solid fa-plus d-none"></i>
+                    <i class="fa-solid fa-minus"></i>
+                </button>
+            </div>
             <div class="container">
                 <div class="row">
                     <div class="col-12">
@@ -130,7 +171,7 @@
             </div>
         </section>
         {{-- OUR HISTORY --}}
-        <section class="history pb-lg-5 mb-5 overflow-hidden">
+        <section class="history pb-lg-5 mb-5 overflow-hidden" id="history">
             <div class="container">
                 <div class="row">
                     <div class="col-12">