From 1891ba3d685305dab527bf1697d4b6a4b2612e38 Mon Sep 17 00:00:00 2001
From: GnomeZworc <nicolas.boufidjeline@g3e.fr>
Date: Sun, 7 Jun 2026 15:09:02 +0200
Subject: [PATCH] clean exemple/navigation to a minimal working example
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.html: fix title and typo, add missing #error div
- config.json: replace project-specific keys with generic api_url
- core/menu.js: remove Voltalis mock data, leave commented usage pattern
- dashboard.js: move logic to init(), Custom Element is a plain shell
- dashboard.css: add real styles, remove placeholder comment
- manifest.json: drop unused version field
- config.yml: fix web/vendor comment → sources/vendor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>
---
 exemple/navigation/config.yml                 |  2 +-
 exemple/navigation/sources/config.json        |  4 +-
 exemple/navigation/sources/core/menu.js       | 45 ++++---------------
 exemple/navigation/sources/index.html         |  7 +--
 .../sources/pages/dashboard/dashboard.css     | 17 ++++++-
 .../sources/pages/dashboard/dashboard.js      |  8 ++++
 .../sources/pages/dashboard/index.html        |  2 +-
 .../sources/pages/dashboard/manifest.json     |  7 ++-
 template/sources/components.lock.json         |  1 +
 9 files changed, 43 insertions(+), 50 deletions(-)
 create mode 100644 template/sources/components.lock.json

diff --git a/exemple/navigation/config.yml b/exemple/navigation/config.yml
index 5d2a320..1febc2d 100644
--- a/exemple/navigation/config.yml
+++ b/exemple/navigation/config.yml
@@ -22,7 +22,7 @@ components:
     repo: https://git.g3e.fr/syonad/syn-side-nav
     ref: main
 
-# Vendor libraries — downloaded into web/vendor/ at build time (gitignored).
+# Vendor libraries — downloaded into sources/vendor/ at build time (gitignored).
 # Components import them via relative paths, never via components.json.
 # path: restrict download to a subdirectory of the repo (optional).
 # dest: destination under web/ (default: vendor/<name>).
diff --git a/exemple/navigation/sources/config.json b/exemple/navigation/sources/config.json
index bf6e218..d67ec5d 100644
--- a/exemple/navigation/sources/config.json
+++ b/exemple/navigation/sources/config.json
@@ -1,5 +1,3 @@
 {
-  "netbox_url": "http://netbox.local",
-  "netbox_token": "your-token-here",
-  "agent_url": "http://127.0.0.1:8080"
+  "api_url": "http://localhost:8080"
 }
diff --git a/exemple/navigation/sources/core/menu.js b/exemple/navigation/sources/core/menu.js
index 0a2adad..2b11b8e 100644
--- a/exemple/navigation/sources/core/menu.js
+++ b/exemple/navigation/sources/core/menu.js
@@ -1,37 +1,10 @@
-// Dynamic menu loader.
-// Fetches data for groups declared with empty children in navigation.json
-// and injects them into side-nav after it is ready.
-//
+// Dynamic menu loader — injects children into named groups in the side-nav.
 // Imported non-blocking from index.html — does not delay routing.
-// Replace MOCK_* with real api-client calls when the backend is ready.
-
-// ── Mock data ────────────────────────────────────────────────────────────────
-
-const MOCK_ACCOUNTS = [
-  { id: 'tresorerie',   name: 'Trésorerie'   },
-  { id: 'charges',      name: 'Charges'       },
-  { id: 'produits',     name: 'Produits'      },
-  { id: 'fournisseurs', name: 'Fournisseurs'  },
-]
-
-async function fetchAccounts() {
-  // TODO: replace with real call
-  // const api = document.querySelector('api-client')
-  // return await api.finance.list('/accounts')
-  await new Promise(r => setTimeout(r, 500))  // simulate network latency
-  return MOCK_ACCOUNTS
-}
-
-// ── Injection ────────────────────────────────────────────────────────────────
-
-const nav = document.querySelector('side-nav')
-if (!nav) throw new Error('menu.js: side-nav not found in DOM')
-
-await nav.ready
-
-const accounts = await fetchAccounts()
-nav.setGroupChildren('Comptes', accounts.map(a => ({
-  label: a.name,
-  href:  `#/account?id=${a.id}`,
-  icon:  'account',
-})))
+//
+// Example: populate a group declared in config.yml.
+//
+//   const nav = document.querySelector('side-nav')
+//   await nav.ready
+//   nav.setGroupChildren('Mon Groupe', [
+//     { label: 'Item A', href: '#/item-a', icon: 'folder' },
+//   ])
diff --git a/exemple/navigation/sources/index.html b/exemple/navigation/sources/index.html
index 73731c9..b8dd774 100644
--- a/exemple/navigation/sources/index.html
+++ b/exemple/navigation/sources/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>two — dashboard</title>
+  <title>Navigation — Syn exemple</title>
   <link rel="icon" type="image/svg+xml" href="./favicon.svg">
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -80,16 +80,17 @@
 <body>
   <header>
     <h1>Syn</h1>
-    <span>web framwork</span>
+    <span>exemple navigation</span>
     <div class="spacer"></div>
   </header>
 
   <div class="layout">
     <side-nav></side-nav>
-
     <main></main>
   </div>
 
+  <div id="error"></div>
+
   <script type="module">
     window.addEventListener('unhandledrejection', e => {
       const el = document.getElementById('error')
diff --git a/exemple/navigation/sources/pages/dashboard/dashboard.css b/exemple/navigation/sources/pages/dashboard/dashboard.css
index 204e2c0..4c061a1 100644
--- a/exemple/navigation/sources/pages/dashboard/dashboard.css
+++ b/exemple/navigation/sources/pages/dashboard/dashboard.css
@@ -1,2 +1,15 @@
-/* Styles scoped to the dashboard page.
-   Applied when the route is active, removed on navigation. */
+.dashboard {
+  padding: 8px;
+}
+
+.dashboard h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #cdd6f4;
+  margin-bottom: 8px;
+}
+
+.dashboard p {
+  color: #6c7086;
+  font-size: 14px;
+}
diff --git a/exemple/navigation/sources/pages/dashboard/dashboard.js b/exemple/navigation/sources/pages/dashboard/dashboard.js
index 9e3ae5c..b3ad3ff 100644
--- a/exemple/navigation/sources/pages/dashboard/dashboard.js
+++ b/exemple/navigation/sources/pages/dashboard/dashboard.js
@@ -1,2 +1,10 @@
+customElements.define('dashboard-page', class extends HTMLElement {})
+
 export function init(main) {
+  main.querySelector('dashboard-page').innerHTML = `
+    <div class="dashboard">
+      <h2>Dashboard</h2>
+      <p>Page d'exemple chargée via le routeur Syn.</p>
+    </div>
+  `
 }
diff --git a/exemple/navigation/sources/pages/dashboard/index.html b/exemple/navigation/sources/pages/dashboard/index.html
index b27ce1d..fde75c8 100644
--- a/exemple/navigation/sources/pages/dashboard/index.html
+++ b/exemple/navigation/sources/pages/dashboard/index.html
@@ -1 +1 @@
-Cecie est la premiere page
+<dashboard-page></dashboard-page>
diff --git a/exemple/navigation/sources/pages/dashboard/manifest.json b/exemple/navigation/sources/pages/dashboard/manifest.json
index 1a0f7ba..2e16d86 100644
--- a/exemple/navigation/sources/pages/dashboard/manifest.json
+++ b/exemple/navigation/sources/pages/dashboard/manifest.json
@@ -1,6 +1,5 @@
 {
-  "route":   "dashboard",
-  "label":   "Dashboard",
-  "icon":    "dashboard",
-  "version": "0.1.0"
+  "route": "dashboard",
+  "label": "Dashboard",
+  "icon":  "dashboard"
 }
diff --git a/template/sources/components.lock.json b/template/sources/components.lock.json
new file mode 100644
index 0000000..fe51488
--- /dev/null
+++ b/template/sources/components.lock.json
@@ -0,0 +1 @@
+[]