syonad/two
2
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases 9 Packages Wiki Activity Actions

web: start: add icons gestion

Browse source 
Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>
This commit is contained in:
GnomeZworc 2026-06-13 11:03:50 +02:00
commit 6abf93005b
Signed by: nicolas.boufideline
GPG key ID: 4406BBBF8845D632
4 changed files with 21 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/components.lock.json
View file

@ -1 +1,2 @@
[]
[
]

6
web/components.yml
View file

@ -12,7 +12,6 @@
local_components:
- login-gate
- api-client
- side-nav
- logout-button
- side-panel
- date-display
@ -25,7 +24,10 @@ local_components:
# - name: vpc-panel # → components/vpc-panel/
# repo: https://git.g3e.fr/team-reseau/vpc-panel
# ref: v1.2.0 # tag, branch or commit (default: main)
components: []
components:
- name: side-nav
repo: https://git.g3e.fr/syonad/syn-side-nav
ref: main
# Vendor libraries — downloaded into web/vendor/ at build time (gitignored).
# Components import them via relative paths, never via components.json.

18
web/components/side-nav/side-nav.js
View file

@ -16,19 +16,17 @@ const CHEVRON_ICON = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none
<polyline points="9 18 15 12 9 6"/>
</svg>`
const ICONS = {
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>`,
vpc: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/><path d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3"/></svg>`,
subnet: `<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="2" y="2" width="20" height="20" rx="2"/><path d="M8 12h8M12 8v8"/></svg>`,
vm: `<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="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>`,
}
const CSS = new URL('./side-nav.css', import.meta.url).href
const MQ = window.matchMedia('(max-width: 768px)')
const NAV_W = 220 // px
const CSS = new URL('./side-nav.css', import.meta.url).href
const MQ = window.matchMedia('(max-width: 768px)')
const NAV_W = 220 // px
const ICON_FALLBACK = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>`
const iconsRes = await fetch('./icons.json')
const ICONS = iconsRes.ok ? await iconsRes.json() : {}
function resolveIcon(name) {
return ICONS[name] ?? `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>`
return ICONS[name] ?? ICON_FALLBACK
}
class SideNav extends HTMLElement {

7
web/icons.json Normal file
View file

@ -0,0 +1,7 @@
{
"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>",
"vpc": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/><path d=\"M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5\"/><path d=\"M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3\"/></svg>",
"subnet": "<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=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2\"/><path d=\"M8 12h8M12 8v8\"/></svg>",
"vm": "<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=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M8 21h8M12 17v4\"/></svg>",
"account": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/></svg>"
}