liebling/partials/header.hbs

137 lines
5.9 KiB
Handlebars
Raw Normal View History

2019-04-14 18:41:25 +00:00
{{!--
This header template is shared across all the pages.
--}}
2020-02-25 16:10:57 +00:00
<header class="m-header {{#if background}}with-picture{{/if}} js-header">
2019-02-19 23:00:22 +00:00
<div class="m-mobile-topbar" data-aos="fade-down">
2020-07-07 15:13:29 +00:00
<button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="{{t "Open menu"}}">
<span class="icon-menu" aria-hidden="true"></span>
2019-02-19 23:00:22 +00:00
</button>
2019-02-25 16:14:38 +00:00
{{#if @site.logo}}
<a href="{{@site.url}}" class="m-logo in-mobile-topbar">
<img src="{{@site.logo}}" alt="{{@site.title}}">
</a>
2019-10-03 15:07:33 +00:00
{{else}}
<a href="{{@site.url}}" class="m-site-name in-mobile-topbar">
{{@site.title}}
</a>
2019-02-25 16:14:38 +00:00
{{/if}}
2020-07-07 15:13:29 +00:00
<button class="m-icon-button in-mobile-topbar js-open-search" aria-label="{{t "Open search"}}">
<span class="icon-search" aria-hidden="true"></span>
2019-02-19 23:00:22 +00:00
</button>
</div>
<div class="m-menu js-menu">
2020-07-07 15:13:29 +00:00
<button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="{{t "Close menu"}}">
2019-02-19 23:00:22 +00:00
<span class="icon-close"></span>
</button>
<div class="m-menu__main" data-aos="fade-down">
<div class="l-wrapper">
<div class="m-nav">
2020-07-07 15:13:29 +00:00
<nav class="m-nav__left" role="navigation" aria-label="{{t "Main menu"}}">
<ul>
{{#if @site.logo}}
2020-07-07 15:13:29 +00:00
<li class="only-desktop">
<a href="{{@site.url}}" class="m-logo">
<img src="{{@site.logo}}" alt="{{@site.title}}">
</a>
</li>
{{else}}
2020-07-07 15:13:29 +00:00
<li class="only-desktop">
<a href="{{@site.url}}" class="m-site-name in-desktop-menu">
{{@site.title}}
</a>
</li>
{{/if}}
{{#if @site.navigation}}
{{navigation}}
{{/if}}
2020-04-27 22:01:48 +00:00
{{#if @site.secondary_navigation}}
2020-07-07 15:13:29 +00:00
<li class="more">
2020-04-27 22:01:48 +00:00
<a href="javascript:void(0);" class="js-open-secondary-menu">
{{t "More"}}
2020-07-07 15:13:29 +00:00
<span class="icon-chevron-down" aria-hidden="true"></span>
2020-04-27 22:01:48 +00:00
</a>
</li>
{{/if}}
2020-07-07 15:13:29 +00:00
<li class="js-submenu-option">
<button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="{{t "Open submenu"}}">
<span class="icon-more" aria-hidden="true"></span>
</button>
<div class="m-submenu js-submenu">
<div class="l-wrapper in-submenu">
<section class="m-recent-articles">
<h3 class="m-submenu-title in-recent-articles">{{t "Recent articles"}}</h3>
2020-06-29 13:54:07 +00:00
{{#get "posts" limit="4" order="published_at desc" as |recent|}}
{{#if recent}}
<div class="glide js-recent-slider">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
{{#foreach recent}}
<div class="glide__slide">
<a href="{{url}}" class="m-recent-article">
<div class="m-recent-article__picture {{#unless feature_image}}no-picture{{/unless}}">
{{#if feature_image}}
<img src="{{img_url feature_image size="s"}}" loading="lazy" alt="">
{{else}}
<img src="{{asset "images/no-image.png"}}" loading="lazy" alt="">
{{/if}}
</div>
<h3 class="m-recent-article__title js-recent-article-title" title="{{title}}">
{{title}}
</h3>
<span class="m-recent-article__date">{{date published_at timeago="true"}}</span>
</a>
2020-02-25 16:10:57 +00:00
</div>
2020-06-29 13:54:07 +00:00
{{/foreach}}
</div>
</div>
2020-06-29 13:54:07 +00:00
</div>
{{else}}
<div class="m-not-found in-recent-articles">{{t "No recent articles found :("}}</div>
{{/if}}
{{/get}}
</section>
<section class="m-tags">
<h3 class="m-submenu-title">{{t "Tags"}}</h3>
{{#get "tags" limit="10"}}
2020-02-25 16:10:57 +00:00
<ul>
{{#foreach tags}}
<li>
<a href="{{url}}">{{name}}</a>
</li>
{{else}}
<li class="m-not-found">{{t "No tags found :("}}</li>
{{/foreach}}
</ul>
{{/get}}
</section>
</div>
</div>
</li>
</ul>
2019-02-19 23:00:22 +00:00
</nav>
2019-11-12 16:48:45 +00:00
<div class="m-nav__right">
2020-07-07 15:13:29 +00:00
<button class="m-icon-button in-menu-main js-open-search" aria-label="{{t "Open search"}}">
<span class="icon-search" aria-hidden="true"></span>
2019-11-12 16:48:45 +00:00
</button>
2020-07-07 15:13:29 +00:00
<div class="m-toggle-darkmode js-tooltip" data-tippy-content="{{t "Toggle dark mode"}}" tabindex="0">
<label for="toggle-darkmode" class="sr-only">
{{t "Toggle dark mode"}}
</label>
<input id="toggle-darkmode" type="checkbox" class="js-toggle-darkmode">
2019-11-12 16:48:45 +00:00
<div></div>
</div>
</div>
2019-02-19 23:00:22 +00:00
</div>
</div>
</div>
</div>
2020-04-27 22:01:48 +00:00
{{#if @site.secondary_navigation}}
<div id="secondary-navigation-template" style="display: none;">
{{navigation type="secondary"}}
</div>
{{/if}}
2019-02-19 23:00:22 +00:00
</header>