✨ Add header layouts and hamburger menu layout

Ref #167, #88, #43, #29

layouts/_default/baseof.html

@@ -25,7 +25,12 @@
         >{{ i18n "nav.skip_to_main" }}</a
       >
     </div>
-    {{- partial "header.html" . -}}
+    {{ $header := print "partials/header/" .Site.Params.header.layout ".html" }}
+    {{ if templates.Exists $header }}
+      {{ partial $header . }}
+    {{ else }}
+      {{ partial "partials/header/basic.html" . }}
+    {{ end }}
     <div class="relative flex flex-col grow">
       <main id="main-content" class="grow">
         {{ block "main" . }}{{ end }}

layouts/partials/header.html

@@ -1,63 +0,0 @@
-<header
-  class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral print:hidden"
->
-  {{/* Site logo/title */}}
-  <div>
-    {{ if .Site.Params.Logo -}}
-      {{ $logo := resources.Get .Site.Params.Logo }}
-      {{ if $logo }}
-        <a href="{{ "" | relLangURL }}">
-          <img
-            src="{{ $logo.RelPermalink }}"
-            width="{{ div $logo.Width 2 }}"
-            height="{{ div $logo.Height 2 }}"
-            class="max-w-[10rem] max-h-[10rem] object-scale-down object-left"
-            alt="{{ .Site.Title }}"
-          />
-        </a>
-      {{ end }}
-    {{ else }}
-      <a
-        class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-        rel="me"
-        href="{{ "" | relLangURL }}"
-        >{{ .Site.Title | markdownify | emojify }}</a
-      >
-    {{- end }}
-    {{ partial "translations.html" . }}
-  </div>
-  {{/* Main menu */}}
-  {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
-    <nav>
-      <ul class="flex flex-col list-none sm:flex-row">
-        {{ if .Site.Menus.main }}
-          {{ range .Site.Menus.main }}
-            <li
-              class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
-            >
-              <a
-                class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                href="{{ .URL }}"
-                title="{{ .Title }}"
-                >{{ .Name | markdownify | emojify }}</a
-              >
-            </li>
-          {{ end }}
-        {{ end }}
-        {{ if .Site.Params.enableSearch | default false }}
-          <li
-            class="ltr:text-right rtl:text-left ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
-          >
-            <button
-              id="search-button"
-              class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-              title="{{ i18n "search.open_button_title" }}"
-            >
-              {{ partial "icon.html" "search" }}
-            </button>
-          </li>
-        {{ end }}
-      </ul>
-    </nav>
-  {{ end }}
-</header>

layouts/partials/header/basic.html

@@ -0,0 +1,57 @@
+<header class="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden">
+  <nav class="flex justify-between">
+    {{/* Site logo/title */}}
+    <div>
+      {{ if .Site.Params.Logo -}}
+        {{ $logo := resources.Get .Site.Params.Logo }}
+        {{ if $logo }}
+          <a href="{{ "" | relLangURL }}">
+            <img
+              src="{{ $logo.RelPermalink }}"
+              width="{{ div $logo.Width 2 }}"
+              height="{{ div $logo.Height 2 }}"
+              class="max-w-[10rem] max-h-[10rem] object-scale-down object-left"
+              alt="{{ .Site.Title }}"
+            />
+          </a>
+        {{ end }}
+      {{ else }}
+        <a
+          class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+          rel="me"
+          href="{{ "" | relLangURL }}"
+          >{{ .Site.Title | markdownify | emojify }}</a
+        >
+      {{- end }}
+      {{ partial "translations.html" . }}
+    </div>
+    {{/* Main menu */}}
+    {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
+      <ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row">
+        {{ if .Site.Menus.main }}
+          {{ range .Site.Menus.main }}
+            <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
+              <a
+                class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+                href="{{ .URL }}"
+                title="{{ .Title }}"
+                >{{ .Name | markdownify | emojify }}</a
+              >
+            </li>
+          {{ end }}
+        {{ end }}
+        {{ if .Site.Params.enableSearch | default false }}
+          <li class="ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
+            <button
+              id="search-button"
+              class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+              title="{{ i18n "search.open_button_title" }}"
+            >
+              {{ partial "icon.html" "search" }}
+            </button>
+          </li>
+        {{ end }}
+      </ul>
+    {{ end }}
+  </nav>
+</header>

layouts/partials/header/hamburger.html

@@ -0,0 +1,75 @@
+<header class="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden">
+  <nav class="flex justify-between">
+    {{/* Site logo/title */}}
+    <div class="z-40">
+      {{ if .Site.Params.Logo -}}
+        {{ $logo := resources.Get .Site.Params.Logo }}
+        {{ if $logo }}
+          <a href="{{ "" | relLangURL }}">
+            <img
+              src="{{ $logo.RelPermalink }}"
+              width="{{ div $logo.Width 2 }}"
+              height="{{ div $logo.Height 2 }}"
+              class="max-w-[10rem] max-h-[10rem] object-scale-down object-left"
+              alt="{{ .Site.Title }}"
+            />
+          </a>
+        {{ end }}
+      {{ else }}
+        <a
+          class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+          rel="me"
+          href="{{ "" | relLangURL }}"
+          >{{ .Site.Title | markdownify | emojify }}</a
+        >
+      {{- end }}
+      {{ partial "translations.html" . }}
+    </div>
+    {{/* Hamburger menu */}}
+    {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
+      <label id="menu-button" for="menu-controller" class="block">
+        <input type="checkbox" id="menu-controller" class="hidden" />
+        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+          {{ partial "icon.html" "bars" }}
+        </div>
+        <div
+          id="menu-wrapper"
+          class="fixed inset-0 z-30 invisible w-screen h-screen px-6 py-6 overflow-auto transition-opacity opacity-0 cursor-default sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10 bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
+        >
+          <ul
+            class="flex flex-col m-auto mx-4 overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl"
+          >
+            <li class="mb-1">
+              <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
+                >{{ partial "icon.html" "xmark" }}</span
+              >
+            </li>
+            {{ if .Site.Menus.main }}
+              {{ range .Site.Menus.main }}
+                <li class="mb-1">
+                  <a
+                    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+                    href="{{ .URL }}"
+                    title="{{ .Title }}"
+                    >{{ .Name | markdownify | emojify }}</a
+                  >
+                </li>
+              {{ end }}
+            {{ end }}
+            {{ if .Site.Params.enableSearch | default false }}
+              <li>
+                <button
+                  id="search-button"
+                  class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+                  title="{{ i18n "search.open_button_title" }}"
+                >
+                  {{ partial "icon.html" "search" }}
+                </button>
+              </li>
+            {{ end }}
+          </ul>
+        </div>
+      </label>
+    {{ end }}
+  </nav>
+</header>

layouts/partials/translations.html

@@ -1,7 +1,7 @@
 {{ if .IsTranslated }}
-  <nav class="inline">
+  <div class="inline">
     {{ range .AllTranslations }}
       <a href="{{ .RelPermalink }}">{{ .Language.Params.displayName | emojify }}</a>
     {{ end }}
-  </nav>
+  </div>
 {{ end }}