move working code to exemple/navigation/

sources/, config.yml and build.sh relocated under exemple/navigation/.
Root now only contains template/ and exemple/.
README updated to reflect the new structure.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>

exemple/navigation/sources/components.lock.json

@@ -0,0 +1,8 @@
+[
+  {
+    "name": "side-nav",
+    "repo": "https://git.g3e.fr/syonad/syn-side-nav",
+    "ref": "main",
+    "commit": "bf6bbe78a9d361b96168b05d94e560a381283121"
+  }
+]

exemple/navigation/sources/config.json

@@ -0,0 +1,5 @@
+{
+  "netbox_url": "http://netbox.local",
+  "netbox_token": "your-token-here",
+  "agent_url": "http://127.0.0.1:8080"
+}

exemple/navigation/sources/core/config.js

@@ -0,0 +1,4 @@
+const response = await fetch('./config.json')
+if (!response.ok) throw new Error('Failed to load config.json')
+
+export const config = await response.json()

exemple/navigation/sources/core/menu.js

@@ -0,0 +1,37 @@
+// Dynamic menu loader.
+// Fetches data for groups declared with empty children in navigation.json
+// and injects them into side-nav after it is ready.
+//
+// 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',
+})))

exemple/navigation/sources/core/registry.js

@@ -0,0 +1,10 @@
+// Loads and registers all components listed in components.json.
+// To add a component: git clone into components/, add the path here.
+const response = await fetch('./components.json')
+if (!response.ok) throw new Error('Failed to load components.json')
+
+const components = await response.json()
+
+for (const path of components) {
+  await import(`../${path}`)
+}

exemple/navigation/sources/core/router.js

@@ -0,0 +1,55 @@
+// Hash-based SPA router.
+// Reads pages.json (generated by build.sh from config.yml).
+// Each page is an HTML fragment (index.html) + optional CSS + optional JS module.
+//
+// Load order enforced by index.html:
+//   await import('./core/registry.js')   ← defines all components
+//   await import('./core/router.js')     ← this file
+
+const response = await fetch('./pages.json')
+if (!response.ok) throw new Error('router: failed to load pages.json — run build.sh')
+const PAGES = await response.json()
+
+// Cache of imported JS modules — modules are only fetched once per session.
+const MODULE_CACHE = new Map()
+
+// Currently active page CSS <link> — removed on navigation.
+let activeCSS = null
+
+function currentRoute() {
+  const hash = window.location.hash.replace(/^#\//, '') || PAGES[0]?.route || ''
+  return hash.split('?')[0]
+}
+
+async function render(routeName) {
+  const page = PAGES.find(p => p.route === routeName) ?? PAGES[0]
+  const main  = document.querySelector('main')
+  if (!main || !page) return
+
+  // ── HTML ────────────────────────────────────────────────────────────────────
+  const htmlRes = await fetch(page.html)
+  if (!htmlRes.ok) throw new Error(`router: failed to load ${page.html}`)
+  main.innerHTML = await htmlRes.text()
+
+  // ── CSS ─────────────────────────────────────────────────────────────────────
+  activeCSS?.remove()
+  activeCSS = null
+  if (page.css) {
+    const link  = document.createElement('link')
+    link.rel    = 'stylesheet'
+    link.href   = page.css
+    document.head.appendChild(link)
+    activeCSS = link
+  }
+
+  // ── JS ──────────────────────────────────────────────────────────────────────
+  if (page.js) {
+    if (!MODULE_CACHE.has(page.js)) {
+      MODULE_CACHE.set(page.js, await import(`../${page.js}`))
+    }
+    MODULE_CACHE.get(page.js)?.init?.(main)
+  }
+}
+
+await render(currentRoute())
+window.addEventListener('hashchange', () => render(currentRoute()))

exemple/navigation/sources/favicon.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Background -->
+  <rect width="32" height="32" rx="6" fill="#1e1e2e"/>
+
+  <!-- Server rack unit 1 -->
+  <rect x="5" y="7" width="22" height="5" rx="1.5" fill="#313244"/>
+  <circle cx="23" cy="9.5" r="1.2" fill="#a6e3a1"/>
+  <rect x="8" y="9" width="10" height="1" rx="0.5" fill="#585b70"/>
+
+  <!-- Server rack unit 2 -->
+  <rect x="5" y="14" width="22" height="5" rx="1.5" fill="#313244"/>
+  <circle cx="23" cy="16.5" r="1.2" fill="#89b4fa"/>
+  <rect x="8" y="16" width="10" height="1" rx="0.5" fill="#585b70"/>
+
+  <!-- Server rack unit 3 -->
+  <rect x="5" y="21" width="22" height="5" rx="1.5" fill="#313244"/>
+  <circle cx="23" cy="23.5" r="1.2" fill="#89b4fa"/>
+  <rect x="8" y="23" width="6" height="1" rx="0.5" fill="#585b70"/>
+
+  <!-- Rack frame left -->
+  <rect x="3" y="5" width="2" height="23" rx="1" fill="#45475a"/>
+  <!-- Rack frame right -->
+  <rect x="27" y="5" width="2" height="23" rx="1" fill="#45475a"/>
+</svg>

exemple/navigation/sources/icons.json

@@ -0,0 +1,3 @@
+{
+  "dashboard": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"/></svg>"
+}

exemple/navigation/sources/index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>two — dashboard</title>
+  <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      background: #181825;
+      color: #cdd6f4;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 24px;
+      border-bottom: 1px solid #313244;
+      background: #1e1e2e;
+      flex-shrink: 0;
+    }
+
+    header h1 {
+      font-size: 17px;
+      font-weight: 600;
+      color: #89b4fa;
+      letter-spacing: 0.02em;
+    }
+
+    header span {
+      font-size: 12px;
+      color: #6c7086;
+    }
+
+    header .spacer {
+      flex: 1;
+    }
+
+    .layout {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    main {
+      flex: 1;
+      padding: 28px;
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      gap: 20px;
+    }
+
+    /* Mobile: side-nav gère sa propre géométrie via inline styles (JS) */
+    @media (max-width: 768px) {
+      main { padding: 16px; }
+    }
+
+    #error {
+      display: none;
+      background: #313244;
+      border: 1px solid #f38ba8;
+      border-radius: 8px;
+      padding: 14px 18px;
+      color: #f38ba8;
+      font-family: monospace;
+      font-size: 13px;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Syn</h1>
+    <span>web framwork</span>
+    <div class="spacer"></div>
+  </header>
+
+  <div class="layout">
+    <side-nav></side-nav>
+
+    <main></main>
+  </div>
+
+  <script type="module">
+    window.addEventListener('unhandledrejection', e => {
+      const el = document.getElementById('error')
+      if (el) {
+        el.style.display = 'block'
+        el.textContent = `Error: ${e.reason?.message ?? e.reason}`
+      }
+    })
+
+    // Sequential: registry defines all custom elements,
+    // then router renders the current route.
+    await import('./core/registry.js')
+    await import('./core/router.js')
+
+    // Non-blocking: populates dynamic menu groups after routing.
+    import('./core/menu.js')
+  </script>
+
+</body>
+</html>

exemple/navigation/sources/pages/dashboard/dashboard.css

@@ -0,0 +1,2 @@
+/* Styles scoped to the dashboard page.
+   Applied when the route is active, removed on navigation. */

exemple/navigation/sources/pages/dashboard/dashboard.js

@@ -0,0 +1,2 @@
+export function init(main) {
+}

exemple/navigation/sources/pages/dashboard/index.html

@@ -0,0 +1 @@
+Cecie est la premiere page

exemple/navigation/sources/pages/dashboard/manifest.json

@@ -0,0 +1,6 @@
+{
+  "route":   "dashboard",
+  "label":   "Dashboard",
+  "icon":    "dashboard",
+  "version": "0.1.0"
+}