Header progress 🛠

default.hbs

@@ -25,6 +25,11 @@
     {{!-- The footer --}}
     {{> footer}}
 
+    {{!-- Common scripts shared between pages --}}
+    <script defer src="{{asset "js/manifest.js"}}"></script>
+    <script defer src="{{asset "js/vendor.js"}}"></script>
+    <script defer src="{{asset "js/app.js"}}"></script>
+
     {{!-- The #block helper will pull in data from the #contentFor other template files --}}
     {{{block "scripts"}}}
 

index.hbs

@@ -1,2 +1,5 @@
 {{!< default}}
 {{!-- Insert everything in this file into the {body} of the default.hbs template --}}
+
+{{!-- The header --}}
+{{> header background=@site.cover_image}}

partials/header.hbs

@@ -0,0 +1,34 @@
+<header class="m-header js-header">
+  {{#if background}}
+    <div class="m-header__shadow"></div>
+  {{/if}}
+
+  <div class="m-mobile-topbar" data-aos="fade-down">
+    <button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="Open menu">
+      <span class="icon-menu"></span>
+    </button>
+    <button class="m-icon-button in-mobile-topbar js-open-search" aria-label="Open search">
+      <span class="icon-search"></span>
+    </button>
+  </div>
+
+  <div class="m-menu js-menu">
+    <button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="Close menu">
+      <span class="icon-close"></span>
+    </button>
+    <div class="m-menu__main" data-aos="fade-down">
+      <div class="l-wrapper">
+        <div class="m-nav">
+          <nav class="m-nav__left">
+            {{#if @site.navigation}}
+              {{navigation}}
+            {{/if}}
+          </nav>
+          <button class="m-icon-button in-menu-main js-open-search" aria-label="Open search">
+            <span class="icon-search"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>

partials/navigation.hbs

@@ -0,0 +1,53 @@
+<ul role="menu">
+  {{#if @site.logo}}
+  <li class="only-desktop" role="menuitem">
+    <a href="{{@site.url}}" class="m-logo">
+      <img src="{{@site.logo}}" alt="{{@site.title}}">
+    </a>
+  </li>
+  {{/if}}
+  {{#foreach navigation}}
+    <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
+      <a href="{{url absolute="true"}}">{{label}}</a>
+    </li>
+  {{/foreach}}
+  <li role="menuitem" class="js-submenu-option">
+    <button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="Toggle submenu">
+      <span class="icon-more"></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">Recent articles</h3>
+          <div class="js-recent-articles">
+            {{#get "posts" limit="4" order="published_at desc" as |post|}}
+              {{#post}}
+                <div>
+                  <a href="{{url}}" class="m-recent-article">
+                    <div class="m-recent-article__picture">
+                      <div style="background-image: url({{img_url feature_image size="m"}});"></div>
+                    </div>
+                    <h3 class="m-recent-article__title">{{title}}</h3>
+                    <span class="m-recent-article__date">{{date published_at timeago="true"}}</span>
+                  </a>
+                </div>
+              {{/post}}
+            {{/get}}
+          </div>
+        </section>
+        <section class="m-tags">
+          <h3 class="m-submenu-title">Tags</h3>
+          <ul>
+            {{#get "tags" limit="10" as |tag|}}
+              {{#tag}}
+                <li>
+                  <a href="{{url}}">{{name}}</a>
+                </li>
+              {{/tag}}
+            {{/get}}
+          </ul>
+        </section>
+      </div>
+    </div>
+  </li>
+</ul>