This commit is contained in:
KabundiNjuki
@@ -0,0 +1,175 @@
|
||||
/* Lukenya Marathon — shared left sidebar.
|
||||
* Loaded once on every Desk page (see hooks.py: app_include_css).
|
||||
* Matches the markup from public/js/lukenya_navigation.js (lukenya.nav.render).
|
||||
* Do not copy these rules into individual page .css files — if the sidebar
|
||||
* needs to change, change it here and every page picks it up.
|
||||
*/
|
||||
|
||||
.lm-side,
|
||||
.lm-side * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lm-side :where(button) {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lm-side .lm-ico {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.lm-side {
|
||||
--lm-primary: #0f9818;
|
||||
--lm-primary-ink: #ffffff;
|
||||
--lm-side-top: #06381c;
|
||||
--lm-side-bottom: #0a5c2a;
|
||||
--lm-side-ink: #c9d4ea;
|
||||
--lm-radius: 14px;
|
||||
--lm-radius-sm: 10px;
|
||||
|
||||
position: sticky;
|
||||
top: var(--navbar-height, 48px);
|
||||
height: calc(100vh - var(--navbar-height, 48px));
|
||||
width: 248px;
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px 14px;
|
||||
background: linear-gradient(180deg, var(--lm-side-top), var(--lm-side-bottom));
|
||||
color: var(--lm-side-ink);
|
||||
}
|
||||
|
||||
.lm-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 8px 18px;
|
||||
color: #fff;
|
||||
}
|
||||
.lm-brand__mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.lm-brand__mark img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.lm-brand__name {
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.lm-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.lm-nav__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 11px 14px;
|
||||
border: 0;
|
||||
border-radius: var(--lm-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--lm-side-ink);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.lm-nav__item:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: #fff;
|
||||
}
|
||||
.lm-nav__item.is-active {
|
||||
background: var(--lm-primary);
|
||||
color: var(--lm-primary-ink);
|
||||
box-shadow: 0 6px 16px rgba(15, 152, 24, 0.35);
|
||||
}
|
||||
.lm-nav__item.is-soon {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.lm-nav__item.is-soon:hover {
|
||||
background: transparent;
|
||||
color: var(--lm-side-ink);
|
||||
}
|
||||
|
||||
.lm-side__workspace {
|
||||
margin: auto 0 0;
|
||||
padding: 9px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-radius: var(--lm-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--lm-side-ink);
|
||||
font-size: 13px;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
.lm-side__workspace:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.lm-side__promo {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
min-height: 120px;
|
||||
padding: 14px;
|
||||
border-radius: var(--lm-radius);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(6, 56, 28, 0) 30%, rgba(6, 56, 28, 0.9)),
|
||||
linear-gradient(160deg, #1c7a3a 0%, #0a3d1e 100%);
|
||||
color: #fff;
|
||||
}
|
||||
.lm-side__promo p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
max-width: 9em;
|
||||
}
|
||||
|
||||
.lm-side :is(button):focus-visible {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.lm-side {
|
||||
position: static;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
.lm-brand {
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
.lm-nav {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.lm-nav__item span {
|
||||
display: none;
|
||||
}
|
||||
.lm-nav__item {
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
.lm-side__workspace,
|
||||
.lm-side__promo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1,70 @@
|
||||
/* 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");
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user