KabundiNjuki
71 lines
3.9 KiB
JavaScript
71 lines
3.9 KiB
JavaScript
/* Lukenya Marathon — shared left sidebar.
|
|
* Loaded once on every Desk page (see hooks.py: app_include_js).
|
|
* Every lukenya-* page should render its sidebar by calling
|
|
* lukenya.nav.render(activeRoute) instead of building its own <aside>.
|
|
* Styling lives in public/css/lukenya_navigation.css — don't copy it
|
|
* into individual page .css files.
|
|
*/
|
|
frappe.provide("lukenya.nav");
|
|
|
|
(function () {
|
|
const ICON = {
|
|
grid: '<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"/>',
|
|
calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
|
|
users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
|
flag: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/>',
|
|
card: '<rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>',
|
|
chart: '<line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>',
|
|
sliders: '<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>',
|
|
run: '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',
|
|
};
|
|
|
|
const svg = (name, size) =>
|
|
`<svg class="lm-ico" width="${size || 18}" height="${size || 18}" viewBox="0 0 24 24" fill="none" ` +
|
|
`stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICON[name]}</svg>`;
|
|
|
|
const esc = (s) => frappe.utils.escape_html(s == null ? "" : String(s));
|
|
|
|
// Single source of truth for every lukenya-* page's left sidebar.
|
|
const NAV = [
|
|
{ label: "Dashboard", icon: "grid", route: "lukenya-dashboard" },
|
|
{ label: "Events", icon: "calendar", route: "lukenya-events" },
|
|
{ label: "Participants", icon: "users", route: "lukenya-participants" },
|
|
{ label: "Race Management", icon: "flag", route: "lukenya-race-management" },
|
|
{ label: "Payments", icon: "card", route: "lukenya-payments" },
|
|
{ label: "Reports", icon: "chart", route: "lukenya-reports" },
|
|
{ label: "Settings", icon: "sliders", soon: true },
|
|
];
|
|
|
|
// activeRoute: the calling page's own route, e.g. "lukenya-payments".
|
|
lukenya.nav.render = function (activeRoute) {
|
|
const items = NAV.map((n) => {
|
|
const attrs =
|
|
n.route === activeRoute
|
|
? 'class="lm-nav__item is-active" aria-current="page"'
|
|
: n.soon
|
|
? 'class="lm-nav__item is-soon" disabled title="' + esc(__("Coming soon")) + '"'
|
|
: `class="lm-nav__item" data-route="${esc(n.route)}"`;
|
|
return `<button type="button" ${attrs}>${svg(n.icon, 18)}<span>${esc(__(n.label))}</span></button>`;
|
|
}).join("");
|
|
|
|
return `
|
|
<aside class="lm-side">
|
|
<div class="lm-brand">
|
|
<span class="lm-brand__mark"><img src="/assets/lukenya_marathon/images/lukenya-logo.png" alt="Lukenya Marathon"></span>
|
|
<span class="lm-brand__name">${esc(__("Lukenya Marathon"))}</span>
|
|
</div>
|
|
<nav class="lm-nav" aria-label="${esc(__("Dashboard sections"))}">${items}</nav>
|
|
<button type="button" class="lm-side__workspace" data-action="workspace">${esc(__("Open full workspace"))}</button>
|
|
<div class="lm-side__promo">
|
|
<p>${esc(__("Run for a healthier tomorrow"))}</p>
|
|
</div>
|
|
</aside>`;
|
|
};
|
|
|
|
// Bound once, globally, so "Open full workspace" works on every page that
|
|
// renders the shared sidebar — no per-page wiring needed.
|
|
$(document).on("click", '.lm-side [data-action="workspace"]', function () {
|
|
frappe.set_route("Workspaces", "Lukenya Marathon");
|
|
});
|
|
})();
|