96 lines
4.9 KiB
Handlebars
96 lines
4.9 KiB
Handlebars
{{!-- Kopfzeile: Logo links, Menü und Symbole rechts in einer Zeile --}}
|
|
<header class="site-header container">
|
|
|
|
<a class="site-brand" href="{{@site.url}}">
|
|
{{#if @site.logo}}
|
|
<img class="site-brand__logo" src="{{img_url @site.logo size="s"}}" alt="{{@site.title}}">
|
|
{{else}}
|
|
<span class="site-brand__title">{{@site.title}}</span>
|
|
{{/if}}
|
|
</a>
|
|
|
|
<nav class="site-nav" id="site-nav" aria-label="{{t "Menu"}}">
|
|
{{navigation}}
|
|
</nav>
|
|
{{!--
|
|
Aufklappmenüs: Ghost kennt nur ein flaches Menü. Die Ebene ergibt sich aus den
|
|
Bindestrichen am Anfang des Namens:
|
|
Unsere Reisen
|
|
- Europa (Unterpunkt von "Unsere Reisen")
|
|
-- Zypern (Unterpunkt von "Europa")
|
|
- Asien
|
|
Das Skript steht direkt hinter dem Menü, damit nichts sichtbar umspringt.
|
|
--}}
|
|
<script>
|
|
(function () {
|
|
var list = document.querySelector('#site-nav > ul');
|
|
if (!list) return;
|
|
|
|
var chevron = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>';
|
|
var submenuOf = function (parent) {
|
|
var submenu = parent.querySelector(':scope > .nav-submenu');
|
|
if (submenu) return submenu;
|
|
submenu = document.createElement('ul');
|
|
submenu.className = 'nav-submenu';
|
|
var toggle = document.createElement('button');
|
|
toggle.type = 'button';
|
|
toggle.className = 'nav-submenu-toggle';
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
toggle.setAttribute('aria-label', parent.querySelector('a').textContent);
|
|
toggle.innerHTML = chevron;
|
|
parent.classList.add('nav-has-children');
|
|
parent.appendChild(toggle);
|
|
parent.appendChild(submenu);
|
|
return submenu;
|
|
};
|
|
|
|
// parents[0] = letzter Hauptpunkt, parents[1] = letzter Unterpunkt der ersten Ebene
|
|
var parents = [null, null];
|
|
Array.prototype.slice.call(list.children).forEach(function (item) {
|
|
var link = item.querySelector('a');
|
|
if (!link) return;
|
|
var match = /^\s*((?:[-–—]\s*)+)(.+)$/.exec(link.textContent);
|
|
var depth = match ? Math.min(match[1].replace(/\s/g, '').length, 2) : 0;
|
|
// Ohne passenden Oberpunkt eine Ebene höher einhängen
|
|
while (depth > 0 && !parents[depth - 1]) depth--;
|
|
|
|
if (depth === 0) {
|
|
parents = [item, null];
|
|
return;
|
|
}
|
|
link.textContent = match[2];
|
|
submenuOf(parents[depth - 1]).appendChild(item);
|
|
if (depth === 1) parents[1] = item;
|
|
|
|
// Ist ein Unterpunkt die aktuelle Seite, werden auch seine Oberpunkte hervorgehoben
|
|
if (item.classList.contains('nav-current')) {
|
|
for (var i = 0; i < depth; i++) parents[i].classList.add('nav-current-parent');
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<div class="site-actions">
|
|
<button class="icon-link" type="button" data-ghost-search aria-label="{{t "Search"}}">
|
|
<svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
|
|
</button>
|
|
|
|
<button class="icon-link theme-toggle" type="button" aria-label="{{t "Toggle dark mode"}}">
|
|
<svg class="theme-toggle__moon" viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
|
<svg class="theme-toggle__sun" viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
|
</button>
|
|
|
|
{{#if @site.members_enabled}}
|
|
{{#if @member}}
|
|
<a class="btn" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
|
|
{{else}}
|
|
<a class="btn" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
<button class="icon-link nav-toggle" type="button" aria-label="{{t "Menu"}}" aria-expanded="false" aria-controls="site-nav">
|
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
</header>
|