bunker-admin
e2a1ac0113
The collapsed Material header (height: 0, overflow: visible) left the search input reachable but the __search checkbox was never toggled when users typed directly into it. This prevented both Material's native CSS and our custom CSS from revealing the results panel (opacity stayed 0, scrollwrap max-height stayed 0). - Add focusin/input event delegation to check __search on direct input - Add search icon, dark mode toggle, and docs sidebar toggle to header - Add CSS for hidden Material header, search positioning, palette, tabs - Avoid Jinja2 block syntax inside JS comments (parsed as directives) Bunker Admin
685 lines
28 KiB
HTML
685 lines
28 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="/home" class="cm-header-nav__link" data-nav-id="home"><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="/map" class="cm-header-nav__link" data-nav-id="map"><span class="material-icons-outlined">place</span><span class="cm-header-nav__label">Map</span></a>
|
|
<div class="cm-header-nav__dropdown">
|
|
<span class="cm-header-nav__link cm-header-nav__dropdown-trigger">
|
|
<span class="material-icons-outlined">apps</span>
|
|
<span class="cm-header-nav__label">Scheduling</span>
|
|
<span class="material-icons-outlined cm-header-nav__chevron">expand_more</span>
|
|
</span>
|
|
<div class="cm-header-nav__dropdown-menu">
|
|
<a href="#" data-path="/shifts" class="cm-header-nav__dropdown-item" data-nav-id="shifts"><span class="material-icons-outlined">schedule</span><span>Shifts</span></a>
|
|
<a href="#" data-path="/events" class="cm-header-nav__dropdown-item" data-nav-id="events"><span class="material-icons-outlined">event</span><span>Calendar</span></a>
|
|
<a href="#" data-path="/polls" class="cm-header-nav__dropdown-item" data-nav-id="polls"><span class="material-icons-outlined">bar_chart</span><span>Polls</span></a>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="cm-header-nav__dropdown">
|
|
<span class="cm-header-nav__link cm-header-nav__dropdown-trigger">
|
|
<span class="material-icons-outlined">account_balance_wallet</span>
|
|
<span class="cm-header-nav__label">Commerce</span>
|
|
<span class="material-icons-outlined cm-header-nav__chevron">expand_more</span>
|
|
</span>
|
|
<div class="cm-header-nav__dropdown-menu">
|
|
<a href="#" data-path="/pricing" class="cm-header-nav__dropdown-item" data-nav-id="pricing"><span class="material-icons-outlined">attach_money</span><span>Pricing</span></a>
|
|
<a href="#" data-path="/shop" class="cm-header-nav__dropdown-item" 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__dropdown-item" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span>Donate</span></a>
|
|
</div>
|
|
</div>
|
|
<a href="#" data-path="/wall-of-fame" class="cm-header-nav__link" data-nav-id="wall-of-fame"><span class="material-icons-outlined">emoji_events</span><span class="cm-header-nav__label">Wall of Fame</span></a>
|
|
<a href="#" data-path="/pages" class="cm-header-nav__link" data-nav-id="pages"><span class="material-icons-outlined">description</span><span class="cm-header-nav__label">Pages</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>
|
|
<label for="__search" class="cm-header-nav__utility" title="Search">
|
|
<span class="material-icons-outlined">search</span>
|
|
</label>
|
|
<button class="cm-header-nav__utility" id="cm-palette-toggle" title="Toggle dark mode" type="button">
|
|
<span class="material-icons-outlined">dark_mode</span>
|
|
</button>
|
|
<a href="#" data-path="/login" class="cm-header-nav__link" id="cm-signin-link">
|
|
<span class="material-icons-outlined">login</span>
|
|
<span class="cm-header-nav__label">Sign In</span>
|
|
</a>
|
|
<div class="cm-header-nav__dropdown" id="cm-admin-dropdown" style="display:none">
|
|
<span class="cm-header-nav__link cm-header-nav__dropdown-trigger">
|
|
<span class="material-icons-outlined">person</span>
|
|
<span class="cm-header-nav__label">Admin</span>
|
|
<span class="material-icons-outlined cm-header-nav__chevron">expand_more</span>
|
|
</span>
|
|
<div class="cm-header-nav__dropdown-menu cm-header-nav__dropdown-menu--right">
|
|
<a href="#" data-path="/app" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">dashboard</span><span>Admin Panel</span></a>
|
|
<a href="#" data-path="/volunteer" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">volunteer_activism</span><span>Volunteer Portal</span></a>
|
|
<a href="#" data-path="/volunteer/profile" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">account_circle</span><span>My Profile</span></a>
|
|
<a href="#" data-path="/logout" class="cm-header-nav__dropdown-item"><span class="material-icons-outlined">logout</span><span>Logout</span></a>
|
|
</div>
|
|
</div>
|
|
</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="/home" class="cm-header-nav__mobile-link" data-nav-id="home"><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="/map" class="cm-header-nav__mobile-link" data-nav-id="map"><span class="material-icons-outlined">place</span><span>Map</span></a>
|
|
<div class="cm-header-nav__mobile-group" data-group-id="scheduling">
|
|
<span class="cm-header-nav__mobile-link cm-header-nav__mobile-group-trigger" role="button">
|
|
<span class="material-icons-outlined">apps</span>
|
|
<span style="flex:1">Scheduling</span>
|
|
<span class="material-icons-outlined cm-header-nav__mobile-chevron">expand_more</span>
|
|
</span>
|
|
<div class="cm-header-nav__mobile-group-children">
|
|
<a href="#" data-path="/shifts" class="cm-header-nav__mobile-link" data-nav-id="shifts" style="padding-left:48px"><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" style="padding-left:48px"><span class="material-icons-outlined">event</span><span>Calendar</span></a>
|
|
<a href="#" data-path="/polls" class="cm-header-nav__mobile-link" data-nav-id="polls" style="padding-left:48px"><span class="material-icons-outlined">bar_chart</span><span>Polls</span></a>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="cm-header-nav__mobile-group" data-group-id="commerce">
|
|
<span class="cm-header-nav__mobile-link cm-header-nav__mobile-group-trigger" role="button">
|
|
<span class="material-icons-outlined">account_balance_wallet</span>
|
|
<span style="flex:1">Commerce</span>
|
|
<span class="material-icons-outlined cm-header-nav__mobile-chevron">expand_more</span>
|
|
</span>
|
|
<div class="cm-header-nav__mobile-group-children">
|
|
<a href="#" data-path="/pricing" class="cm-header-nav__mobile-link" data-nav-id="pricing" style="padding-left:48px"><span class="material-icons-outlined">attach_money</span><span>Pricing</span></a>
|
|
<a href="#" data-path="/shop" class="cm-header-nav__mobile-link" data-nav-id="shop" style="padding-left:48px"><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" style="padding-left:48px"><span class="material-icons-outlined">favorite_border</span><span>Donate</span></a>
|
|
</div>
|
|
</div>
|
|
<a href="#" data-path="/wall-of-fame" class="cm-header-nav__mobile-link" data-nav-id="wall-of-fame"><span class="material-icons-outlined">emoji_events</span><span>Wall of Fame</span></a>
|
|
<a href="#" data-path="/pages" class="cm-header-nav__mobile-link" data-nav-id="pages"><span class="material-icons-outlined">description</span><span>Pages</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>
|
|
<div class="cm-header-nav__mobile-divider"></div>
|
|
<label for="__search" class="cm-header-nav__mobile-link" style="cursor:pointer">
|
|
<span class="material-icons-outlined">search</span>
|
|
<span>Search</span>
|
|
</label>
|
|
<button class="cm-header-nav__mobile-link cm-header-nav__utility-btn" id="cm-mobile-palette-toggle" type="button">
|
|
<span class="material-icons-outlined">dark_mode</span>
|
|
<span>Dark Mode</span>
|
|
</button>
|
|
<button class="cm-header-nav__mobile-link cm-header-nav__utility-btn" id="cm-docs-sidebar-toggle" type="button">
|
|
<span class="material-icons-outlined">menu_book</span>
|
|
<span>Docs Navigation</span>
|
|
</button>
|
|
<div class="cm-header-nav__mobile-divider"></div>
|
|
<a href="#" data-path="/login" class="cm-header-nav__mobile-link" id="cm-mobile-signin-link">
|
|
<span class="material-icons-outlined">login</span>
|
|
<span>Sign In</span>
|
|
</a>
|
|
<div class="cm-header-nav__mobile-group" data-group-id="admin" id="cm-mobile-admin-group" style="display:none">
|
|
<span class="cm-header-nav__mobile-link cm-header-nav__mobile-group-trigger" role="button">
|
|
<span class="material-icons-outlined">person</span>
|
|
<span style="flex:1">Admin</span>
|
|
<span class="material-icons-outlined cm-header-nav__mobile-chevron">expand_more</span>
|
|
</span>
|
|
<div class="cm-header-nav__mobile-group-children">
|
|
<a href="#" data-path="/app" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">dashboard</span><span>Admin Panel</span></a>
|
|
<a href="#" data-path="/volunteer" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">volunteer_activism</span><span>Volunteer Portal</span></a>
|
|
<a href="#" data-path="/volunteer/profile" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">account_circle</span><span>My Profile</span></a>
|
|
<a href="#" data-path="/logout" class="cm-header-nav__mobile-link" style="padding-left:48px"><span class="material-icons-outlined">logout</span><span>Logout</span></a>
|
|
</div>
|
|
</div>
|
|
</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 | default(0) }} || 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);
|
|
// Mobile group expand/collapse toggles
|
|
document.querySelectorAll('.cm-header-nav__mobile-group-trigger').forEach(function(trigger) {
|
|
trigger.addEventListener('click', function() {
|
|
var group = this.closest('.cm-header-nav__mobile-group');
|
|
var children = group.querySelector('.cm-header-nav__mobile-group-children');
|
|
var isExpanded = group.classList.contains('expanded');
|
|
if (isExpanded) {
|
|
group.classList.remove('expanded');
|
|
children.style.display = 'none';
|
|
} else {
|
|
group.classList.add('expanded');
|
|
children.style.display = 'block';
|
|
}
|
|
});
|
|
});
|
|
// Auth-aware: show Admin dropdown for logged-in users, Sign In for guests.
|
|
// Uses hidden iframe + postMessage to read auth state from the app's origin.
|
|
function showAdminMenu() {
|
|
var s1 = document.getElementById('cm-signin-link');
|
|
var s2 = document.getElementById('cm-mobile-signin-link');
|
|
var a1 = document.getElementById('cm-admin-dropdown');
|
|
var a2 = document.getElementById('cm-mobile-admin-group');
|
|
if (s1) s1.style.display = 'none';
|
|
if (s2) s2.style.display = 'none';
|
|
if (a1) a1.style.display = '';
|
|
if (a2) a2.style.display = '';
|
|
}
|
|
// 1. Same-origin check (works when MkDocs served from same origin as app)
|
|
try {
|
|
var stored = localStorage.getItem('cml-auth');
|
|
if (stored) {
|
|
var parsed = JSON.parse(stored);
|
|
if (parsed && parsed.state && parsed.state.accessToken) {
|
|
showAdminMenu();
|
|
}
|
|
}
|
|
} catch(e) {}
|
|
// 2. Cross-origin check via hidden iframe + postMessage
|
|
var iframe = document.createElement('iframe');
|
|
iframe.style.display = 'none';
|
|
iframe.src = base + '/auth-check.html?origin=' + encodeURIComponent(location.origin);
|
|
window.addEventListener('message', function(event) {
|
|
if (event.origin !== base) return;
|
|
if (event.data && event.data.type === 'cml-auth-status' && event.data.authenticated) {
|
|
showAdminMenu();
|
|
}
|
|
});
|
|
document.body.appendChild(iframe);
|
|
// Palette toggle (dark/light mode)
|
|
function togglePalette() {
|
|
var inputs = document.querySelectorAll('.cm-palette-container input[name="__palette"]');
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
if (!inputs[i].checked) { inputs[i].click(); break; }
|
|
}
|
|
setTimeout(updatePaletteIcon, 50);
|
|
}
|
|
function updatePaletteIcon() {
|
|
var scheme = document.body.getAttribute('data-md-color-scheme') || 'default';
|
|
var isDark = scheme === 'slate';
|
|
var icon = isDark ? 'light_mode' : 'dark_mode';
|
|
document.querySelectorAll('#cm-palette-toggle .material-icons-outlined, #cm-mobile-palette-toggle .material-icons-outlined').forEach(function(el) {
|
|
el.textContent = icon;
|
|
});
|
|
var ml = document.querySelector('#cm-mobile-palette-toggle span:not(.material-icons-outlined)');
|
|
if (ml) ml.textContent = isDark ? 'Light Mode' : 'Dark Mode';
|
|
}
|
|
var ptBtn = document.getElementById('cm-palette-toggle');
|
|
var ptBtnM = document.getElementById('cm-mobile-palette-toggle');
|
|
if (ptBtn) ptBtn.addEventListener('click', togglePalette);
|
|
if (ptBtnM) ptBtnM.addEventListener('click', function() { togglePalette(); closeDrawer(); });
|
|
// Docs sidebar toggle (opens Material's docs navigation drawer)
|
|
var docsSidebarBtn = document.getElementById('cm-docs-sidebar-toggle');
|
|
if (docsSidebarBtn) {
|
|
docsSidebarBtn.addEventListener('click', function() {
|
|
closeDrawer();
|
|
var dt = document.getElementById('__drawer');
|
|
if (dt) { dt.checked = !dt.checked; dt.dispatchEvent(new Event('change')); }
|
|
});
|
|
}
|
|
// Close custom drawer when search label is clicked on mobile + auto-focus input
|
|
document.querySelectorAll('label[for="__search"]').forEach(function(el) {
|
|
el.addEventListener('click', function() {
|
|
closeDrawer();
|
|
setTimeout(function() {
|
|
var input = document.querySelector('.md-search__input');
|
|
if (input) input.focus();
|
|
}, 150);
|
|
});
|
|
});
|
|
// Search activation: mirror checkbox state as a body class for CSS targeting.
|
|
// On desktop, Material's search input is always visible (overflow from collapsed
|
|
// header). Typing directly into it triggers the search worker but never checks
|
|
// the __search checkbox, so the results panel stays hidden. We fix this by
|
|
// checking the checkbox on input focus/input events.
|
|
var searchToggle = document.getElementById('__search');
|
|
if (searchToggle) {
|
|
function syncSearchClass() {
|
|
document.body.classList.toggle('cm-search-active', searchToggle.checked);
|
|
}
|
|
searchToggle.addEventListener('change', syncSearchClass);
|
|
syncSearchClass();
|
|
// Activate search when the Material input is focused or typed into directly.
|
|
// Uses event delegation because the search input is rendered after this
|
|
// script (announce block runs before header block).
|
|
document.addEventListener('focusin', function(e) {
|
|
if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) {
|
|
if (!searchToggle.checked) {
|
|
searchToggle.checked = true;
|
|
searchToggle.dispatchEvent(new Event('change'));
|
|
}
|
|
}
|
|
});
|
|
document.addEventListener('input', function(e) {
|
|
if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) {
|
|
if (!searchToggle.checked) {
|
|
searchToggle.checked = true;
|
|
searchToggle.dispatchEvent(new Event('change'));
|
|
}
|
|
}
|
|
});
|
|
// Click-outside to dismiss search
|
|
document.addEventListener('click', function(e) {
|
|
if (!searchToggle.checked) return;
|
|
var panel = document.querySelector('.md-search__inner');
|
|
if (panel && panel.contains(e.target)) return;
|
|
if (e.target.closest && e.target.closest('label[for="__search"]')) return;
|
|
searchToggle.checked = false;
|
|
syncSearchClass();
|
|
});
|
|
// Also sync on Escape key (Material toggles checkbox via JS)
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') setTimeout(syncSearchClass, 50);
|
|
});
|
|
}
|
|
// Init palette icon + observe changes
|
|
setTimeout(updatePaletteIcon, 100);
|
|
new MutationObserver(function() { updatePaletteIcon(); })
|
|
.observe(document.body, { attributes: true, attributeFilter: ['data-md-color-scheme'] });
|
|
})();
|
|
</script>
|
|
<style>
|
|
.md-banner {
|
|
background: linear-gradient(135deg, #005a9c 0%, #007acc 100%) !important;
|
|
color: #ffffff !important;
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.md-banner__inner {
|
|
overflow: visible !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
max-width: 100% !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;
|
|
position: relative;
|
|
z-index: 100;
|
|
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;
|
|
}
|
|
/* Desktop dropdown menus */
|
|
.cm-header-nav__dropdown {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.cm-header-nav__dropdown-trigger {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.cm-header-nav__dropdown-trigger .cm-header-nav__chevron {
|
|
font-size: 14px;
|
|
transition: transform 0.2s;
|
|
}
|
|
.cm-header-nav__dropdown:hover .cm-header-nav__chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
.cm-header-nav__dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 180px;
|
|
background: #1b2838;
|
|
border-radius: 8px;
|
|
padding: 6px 0;
|
|
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
|
|
z-index: 100;
|
|
margin-top: 4px;
|
|
}
|
|
.cm-header-nav__dropdown:hover .cm-header-nav__dropdown-menu {
|
|
display: block;
|
|
}
|
|
.cm-header-nav__dropdown-menu--right {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
.cm-header-nav__dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
text-decoration: none !important;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
transition: background 0.15s;
|
|
}
|
|
.cm-header-nav__dropdown-item:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
color: #fff !important;
|
|
text-decoration: none !important;
|
|
}
|
|
.cm-header-nav__dropdown-item .material-icons-outlined {
|
|
font-size: 16px;
|
|
}
|
|
/* 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;
|
|
}
|
|
/* Mobile group expand/collapse */
|
|
.cm-header-nav__mobile-group-trigger {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.cm-header-nav__mobile-chevron {
|
|
font-size: 14px !important;
|
|
transition: transform 0.2s;
|
|
}
|
|
.cm-header-nav__mobile-group.expanded .cm-header-nav__mobile-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
.cm-header-nav__mobile-group-children {
|
|
display: none;
|
|
}
|
|
.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; }
|
|
.cm-header-nav__dropdown-menu { display: none !important; }
|
|
}
|
|
/* Hidden Material header — stays at 0 height normally */
|
|
.md-header--cm-hidden {
|
|
height: 0 !important;
|
|
min-height: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: 0 !important;
|
|
overflow: visible !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* === DESKTOP SEARCH (>= 60em / 960px) === */
|
|
@media screen and (min-width: 60em) {
|
|
/* When search is active, make the search panel a fixed dropdown below custom header */
|
|
body.cm-search-active .md-header--cm-hidden .md-search__inner {
|
|
position: fixed !important;
|
|
top: 56px !important;
|
|
right: 16px !important;
|
|
left: auto !important;
|
|
width: min(34rem, calc(100vw - 32px)) !important;
|
|
background: var(--md-default-bg-color) !important;
|
|
border-radius: 0 0 8px 8px !important;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
|
|
z-index: 300 !important;
|
|
}
|
|
|
|
/* Dark overlay behind search panel */
|
|
body.cm-search-active .md-header--cm-hidden .md-search__overlay {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
background: rgba(0,0,0,0.54) !important;
|
|
opacity: 1 !important;
|
|
z-index: 299 !important;
|
|
border-radius: 0 !important;
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* === MOBILE SEARCH (< 60em / 960px) === */
|
|
@media screen and (max-width: 59.984375em) {
|
|
/* Full-screen search takeover on mobile */
|
|
body.cm-search-active .md-header--cm-hidden .md-search__inner {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
opacity: 1 !important;
|
|
overflow: visible !important;
|
|
transform: none !important;
|
|
z-index: 300 !important;
|
|
background: var(--md-default-bg-color) !important;
|
|
}
|
|
}
|
|
|
|
/* Force search results to show when active (both breakpoints) */
|
|
body.cm-search-active .md-header--cm-hidden .md-search__output {
|
|
opacity: 1 !important;
|
|
}
|
|
body.cm-search-active .md-header--cm-hidden .md-search__scrollwrap {
|
|
max-height: 75vh !important;
|
|
}
|
|
.cm-palette-container {
|
|
height: 0 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
/* Hide Material tabs — custom header covers navigation */
|
|
.md-tabs { display: none !important; }
|
|
/* Utility icon styling */
|
|
.cm-header-nav__utility {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
transition: color 0.2s;
|
|
}
|
|
.cm-header-nav__utility:hover { color: #fff; }
|
|
.cm-header-nav__utility .material-icons-outlined { font-size: 20px; }
|
|
.cm-header-nav__utility-btn {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255,255,255,0.85);
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
font-family: inherit;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
.cm-header-nav__mobile-divider {
|
|
height: 1px;
|
|
background: rgba(255,255,255,0.1);
|
|
margin: 8px 24px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block header %}
|
|
<header class="md-header md-header--cm-hidden" data-md-component="header">
|
|
<div class="cm-palette-container">
|
|
{% if config.theme.palette %}
|
|
{% if not config.theme.palette is mapping %}
|
|
{% include "partials/palette.html" %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
{% if "material/search" in config.plugins %}
|
|
{% include "partials/search.html" %}
|
|
{% endif %}
|
|
</header>
|
|
{% endblock %}
|
|
|
|
{% block tabs %}{% endblock %}
|