clean exemple/navigation to a minimal working example
- 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:
parent
6185d8ea48
commit
1891ba3d68
GPG key ID:
4406BBBF8845D632
9 changed files with 43 additions and 50 deletions
|
|
@ -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>).
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
// ])
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Cecie est la premiere page
|
||||
<dashboard-page></dashboard-page>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"route": "dashboard",
|
||||
"label": "Dashboard",
|
||||
"icon": "dashboard",
|
||||
"version": "0.1.0"
|
||||
"route": "dashboard",
|
||||
"label": "Dashboard",
|
||||
"icon": "dashboard"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue