syonad/syn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean exemple/navigation to a minimal working example

Browse source 
- 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>
This commit is contained in:
GnomeZworc 2026-06-07 15:09:02 +02:00
commit 1891ba3d68
Signed by: nicolas.boufideline
GPG key ID: 4406BBBF8845D632
9 changed files with 43 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

2
exemple/navigation/config.yml
View file

@ -22,7 +22,7 @@ components:
repo: https://git.g3e.fr/syonad/syn-side-nav repo: https://git.g3e.fr/syonad/syn-side-nav
ref: main 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. # Components import them via relative paths, never via components.json.
# path: restrict download to a subdirectory of the repo (optional). # path: restrict download to a subdirectory of the repo (optional).
# dest: destination under web/ (default: vendor/<name>). # dest: destination under web/ (default: vendor/<name>).

4
exemple/navigation/sources/config.json
View file

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

45
exemple/navigation/sources/core/menu.js
View file

@ -1,37 +1,10 @@
// Dynamic menu loader. // Dynamic menu loader — injects children into named groups in the side-nav.
// 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. // Imported non-blocking from index.html — does not delay routing.
// Replace MOCK_* with real api-client calls when the backend is ready. //
// Example: populate a group declared in config.yml.
// ── Mock data ──────────────────────────────────────────────────────────────── //
// const nav = document.querySelector('side-nav')
const MOCK_ACCOUNTS = [ // await nav.ready
{ id: 'tresorerie', name: 'Trésorerie' }, // nav.setGroupChildren('Mon Groupe', [
{ id: 'charges', name: 'Charges' }, // { label: 'Item A', href: '#/item-a', icon: 'folder' },
{ 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',
})))

7
exemple/navigation/sources/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="icon" type="image/svg+xml" href="./favicon.svg">
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@ -80,16 +80,17 @@
<body> <body>
<header> <header>
<h1>Syn</h1> <h1>Syn</h1>
<span>web framwork</span> <span>exemple navigation</span>
<div class="spacer"></div> <div class="spacer"></div>
</header> </header>
<div class="layout"> <div class="layout">
<side-nav></side-nav> <side-nav></side-nav>
<main></main> <main></main>
</div> </div>
<div id="error"></div>
<script type="module"> <script type="module">
window.addEventListener('unhandledrejection', e => { window.addEventListener('unhandledrejection', e => {
const el = document.getElementById('error') const el = document.getElementById('error')

17
exemple/navigation/sources/pages/dashboard/dashboard.css
View file

@ -1,2 +1,15 @@
/* Styles scoped to the dashboard page. .dashboard {
Applied when the route is active, removed on navigation. */ padding: 8px;
}
.dashboard h2 {
font-size: 20px;
font-weight: 600;
color: #cdd6f4;
margin-bottom: 8px;
}
.dashboard p {
color: #6c7086;
font-size: 14px;
}

8
exemple/navigation/sources/pages/dashboard/dashboard.js
View file

@ -1,2 +1,10 @@
customElements.define('dashboard-page', class extends HTMLElement {})
export function init(main) { 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>
`
} }

2
exemple/navigation/sources/pages/dashboard/index.html
View file

@ -1 +1 @@
Cecie est la premiere page <dashboard-page></dashboard-page>

7
exemple/navigation/sources/pages/dashboard/manifest.json
View file

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

1
template/sources/components.lock.json Normal file
View file

@ -0,0 +1 @@
[]