bunker-admin
2390820e41
ScheduleOutlined was missing from the ANT_ICON_TO_MATERIAL mapping in
header-builder.service.ts, causing Material Icons to render raw text
characters ("S", "O") instead of a clock icon for the Shifts nav item.
Added the missing mapping and a toMaterialIcon() fallback that converts
any unmapped Ant Design icon name to snake_case Material Icons format.
Bunker Admin
254 lines
9.9 KiB
HTML
254 lines
9.9 KiB
HTML
{# Auto-generated by Changemaker Lite Header Builder — do not edit manually #}
|
|
{% extends "base.html" %}
|
|
|
|
{% block announce %}
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
|
|
<nav class="cm-header-nav" role="navigation" aria-label="Application">
|
|
<div class="cm-header-nav__brand">
|
|
<a href="#" data-path="/home" class="cm-header-nav__brand-link">
|
|
<span class="cm-header-nav__brand-text">{{ config.site_name }}</span>
|
|
</a>
|
|
</div>
|
|
<div class="cm-header-nav__links">
|
|
<div class="cm-header-nav__links-inner">
|
|
<a href="#" data-path="/" class="cm-header-nav__link" data-nav-id="home" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">home</span><span class="cm-header-nav__label">Home</span></a>
|
|
<a href="#" data-path="/campaigns" class="cm-header-nav__link" data-nav-id="campaigns"><span class="material-icons-outlined">send</span><span class="cm-header-nav__label">Campaigns</span></a>
|
|
<a href="#" data-path="/shifts" class="cm-header-nav__link" data-nav-id="shifts"><span class="material-icons-outlined">schedule</span><span class="cm-header-nav__label">Shifts</span></a>
|
|
<a href="#" data-path="/events" class="cm-header-nav__link" data-nav-id="events" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">event</span><span class="cm-header-nav__label">Events</span></a>
|
|
<a href="#" data-path="/gallery" class="cm-header-nav__link" data-nav-id="gallery"><span class="material-icons-outlined">play_circle</span><span class="cm-header-nav__label">Gallery</span></a>
|
|
<a href="#" data-path="/shop" class="cm-header-nav__link" data-nav-id="shop"><span class="material-icons-outlined">shopping_bag</span><span class="cm-header-nav__label">Shop</span></a>
|
|
<a href="#" data-path="/donate" class="cm-header-nav__link" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span class="cm-header-nav__label">Donate</span></a>
|
|
<a href="/" class="cm-header-nav__link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span class="cm-header-nav__label">Website</span></a>
|
|
<a href="/docs/" class="cm-header-nav__link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span class="cm-header-nav__label">Docs</span></a>
|
|
<a href="#" data-path="/app" class="cm-header-nav__link">
|
|
<span class="material-icons-outlined">dashboard</span>
|
|
<span class="cm-header-nav__label">Admin</span>
|
|
</a>
|
|
</div>
|
|
<button class="cm-header-nav__hamburger" aria-label="Open navigation menu">
|
|
<span class="material-icons-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div class="cm-header-nav__mobile-drawer" id="cm-mobile-drawer">
|
|
<div class="cm-header-nav__mobile-header">
|
|
<span class="cm-header-nav__brand-text">{{ config.site_name }}</span>
|
|
<button class="cm-header-nav__mobile-close" aria-label="Close navigation menu">
|
|
<span class="material-icons-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="cm-header-nav__mobile-links">
|
|
<a href="#" data-path="/" class="cm-header-nav__mobile-link" data-nav-id="home" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">home</span><span>Home</span></a>
|
|
<a href="#" data-path="/campaigns" class="cm-header-nav__mobile-link" data-nav-id="campaigns"><span class="material-icons-outlined">send</span><span>Campaigns</span></a>
|
|
<a href="#" data-path="/shifts" class="cm-header-nav__mobile-link" data-nav-id="shifts"><span class="material-icons-outlined">schedule</span><span>Shifts</span></a>
|
|
<a href="#" data-path="/events" class="cm-header-nav__mobile-link" data-nav-id="events" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">event</span><span>Events</span></a>
|
|
<a href="#" data-path="/gallery" class="cm-header-nav__mobile-link" data-nav-id="gallery"><span class="material-icons-outlined">play_circle</span><span>Gallery</span></a>
|
|
<a href="#" data-path="/shop" class="cm-header-nav__mobile-link" data-nav-id="shop"><span class="material-icons-outlined">shopping_bag</span><span>Shop</span></a>
|
|
<a href="#" data-path="/donate" class="cm-header-nav__mobile-link" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span>Donate</span></a>
|
|
<a href="/" class="cm-header-nav__mobile-link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span>Website</span></a>
|
|
<a href="/docs/" class="cm-header-nav__mobile-link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span>Docs</span></a>
|
|
<a href="#" data-path="/app" class="cm-header-nav__mobile-link">
|
|
<span class="material-icons-outlined">dashboard</span>
|
|
<span>Admin</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="cm-header-nav__mobile-overlay" id="cm-mobile-overlay"></div>
|
|
<script>
|
|
(function() {
|
|
var h = location.hostname;
|
|
var base;
|
|
if (h === 'localhost' || h === '127.0.0.1') {
|
|
base = location.protocol + '//localhost:' + ({{ config.extra.admin_port }} || 3000);
|
|
} else {
|
|
var parts = h.split('.');
|
|
if (parts.length >= 3) { parts[0] = 'app'; }
|
|
else { parts.unshift('app'); }
|
|
base = location.protocol + '//' + parts.join('.');
|
|
}
|
|
var links = document.querySelectorAll('[data-path]');
|
|
for (var i = 0; i < links.length; i++) {
|
|
links[i].setAttribute('href', base + links[i].getAttribute('data-path'));
|
|
}
|
|
// Highlight active nav link based on current path
|
|
var path = location.pathname;
|
|
var activeLink = null;
|
|
if (path.indexOf('/docs') === 0) activeLink = 'docs';
|
|
document.querySelectorAll('.cm-header-nav__link[data-nav-id], .cm-header-nav__mobile-link[data-nav-id]').forEach(function(el) {
|
|
if (el.getAttribute('data-nav-id') === activeLink) {
|
|
el.classList.add('cm-header-nav__link--active');
|
|
}
|
|
});
|
|
// Hamburger toggle
|
|
var hamburger = document.querySelector('.cm-header-nav__hamburger');
|
|
var drawer = document.getElementById('cm-mobile-drawer');
|
|
var overlay = document.getElementById('cm-mobile-overlay');
|
|
var closeBtn = document.querySelector('.cm-header-nav__mobile-close');
|
|
function openDrawer() { drawer.classList.add('open'); overlay.classList.add('open'); }
|
|
function closeDrawer() { drawer.classList.remove('open'); overlay.classList.remove('open'); }
|
|
if (hamburger) hamburger.addEventListener('click', openDrawer);
|
|
if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
|
|
if (overlay) overlay.addEventListener('click', closeDrawer);
|
|
})();
|
|
</script>
|
|
<style>
|
|
.md-banner {
|
|
background: linear-gradient(135deg, #005a9c 0%, #007acc 100%) !important;
|
|
color: #ffffff !important;
|
|
padding: 0 !important;
|
|
}
|
|
.md-banner__button {
|
|
display: none !important;
|
|
}
|
|
.cm-header-nav {
|
|
background: linear-gradient(135deg, #005a9c 0%, #007acc 100%);
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
z-index: 10;
|
|
box-sizing: border-box;
|
|
}
|
|
.cm-header-nav a {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
}
|
|
.cm-header-nav__brand-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
text-decoration: none !important;
|
|
color: #fff !important;
|
|
}
|
|
.cm-header-nav__brand-text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #fff !important;
|
|
}
|
|
.cm-header-nav__links {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.cm-header-nav__links-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.cm-header-nav__link {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
text-decoration: none !important;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
white-space: nowrap;
|
|
padding-bottom: 2px;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
.cm-header-nav__link:hover {
|
|
color: #fff !important;
|
|
text-decoration: none !important;
|
|
}
|
|
.cm-header-nav__link--active,
|
|
.cm-header-nav__link--active:hover {
|
|
color: #fff !important;
|
|
font-weight: 600;
|
|
border-bottom-color: #fff;
|
|
}
|
|
.cm-header-nav__link .material-icons-outlined {
|
|
font-size: 16px;
|
|
}
|
|
.cm-header-nav__hamburger {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
color: #fff;
|
|
}
|
|
.cm-header-nav__hamburger .material-icons-outlined {
|
|
font-size: 24px;
|
|
}
|
|
/* Mobile drawer */
|
|
.cm-header-nav__mobile-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -280px;
|
|
width: 280px;
|
|
height: 100vh;
|
|
background: #0d1b2a;
|
|
z-index: 10001;
|
|
transition: right 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.cm-header-nav__mobile-drawer.open {
|
|
right: 0;
|
|
}
|
|
.cm-header-nav__mobile-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 24px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
background: #1b2838;
|
|
}
|
|
.cm-header-nav__mobile-close {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: rgba(255,255,255,0.85);
|
|
padding: 4px;
|
|
}
|
|
.cm-header-nav__mobile-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 16px 0;
|
|
}
|
|
.cm-header-nav__mobile-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 24px;
|
|
color: rgba(255,255,255,0.85) !important;
|
|
text-decoration: none !important;
|
|
font-size: 15px;
|
|
border-radius: 4px;
|
|
}
|
|
.cm-header-nav__mobile-link:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
color: #fff !important;
|
|
text-decoration: none !important;
|
|
}
|
|
.cm-header-nav__mobile-link--active {
|
|
color: #fff !important;
|
|
font-weight: 600;
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
.cm-header-nav__mobile-link .material-icons-outlined {
|
|
font-size: 18px;
|
|
}
|
|
.cm-header-nav__mobile-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 10000;
|
|
}
|
|
.cm-header-nav__mobile-overlay.open {
|
|
display: block;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.cm-header-nav { padding: 0 16px; }
|
|
.cm-header-nav__links-inner { display: none; }
|
|
.cm-header-nav__hamburger { display: block; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|