✨ Add header layouts and hamburger menu layout

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

CHANGELOG.md

@@ -8,8 +8,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Header layouts for selecting a preferred header style
+- Hamburger menu header layout with popover main menu ([#167](https://github.com/jpanther/congo/discussions/167), [#88](https://github.com/jpanther/congo/discussions/88), [#43](https://github.com/jpanther/congo/discussions/43), [#29](https://github.com/jpanther/congo/discussions/29))
 - Front matter support for showing or hiding comments on a per article basis ([#207](https://github.com/jpanther/congo/discussions/207))
 - `showCopyright` and `showThemeAttribution` parameters that allow more control over how the site footer is displayed ([#192](https://github.com/jpanther/congo/discussions/192))
+- `bars` SVG icon
 
 ### Changed
 

assets/css/compiled/main.css

@@ -1015,6 +1015,22 @@ body button {
   display: none;
 }
 
+/* Hamburger menu */
+
+body:has(#menu-controller:checked) {
+  position: fixed;
+  overflow-y: scroll;
+}
+
+#menu-button:has(#menu-controller:checked) {
+  visibility: hidden;
+}
+
+#menu-controller:checked ~ #menu-wrapper {
+  visibility: visible;
+  opacity: 1;
+}
+
 /* RTL support */
 
 [dir="rtl"] .prose blockquote {
@@ -1706,6 +1722,14 @@ body button {
   z-index: 10;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
 .order-first {
   order: -9999;
 }
@@ -1748,6 +1772,11 @@ body button {
   margin-bottom: 0px;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -2015,6 +2044,10 @@ body button {
   overflow: hidden;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
 .scroll-smooth {
   scroll-behavior: smooth;
 }
@@ -2118,6 +2151,10 @@ body button {
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
 }
 
+.bg-neutral-100\/50 {
+  background-color: rgba(var(--color-neutral-100), 0.5);
+}
+
 .object-scale-down {
   -o-object-fit: scale-down;
      object-fit: scale-down;
@@ -2849,6 +2886,10 @@ body button {
     padding-bottom: 2.5rem;
   }
 
+  .sm\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
   .sm\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;

assets/css/main.css

@@ -21,6 +21,17 @@ body button {
   @apply hidden;
 }
 
+/* Hamburger menu */
+body:has(#menu-controller:checked) {
+  @apply fixed overflow-y-scroll;
+}
+#menu-button:has(#menu-controller:checked) {
+  @apply invisible;
+}
+#menu-controller:checked ~ #menu-wrapper {
+  @apply visible opacity-100;
+}
+
 /* RTL support */
 .prose blockquote {
   @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;

assets/icons/bars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>

config/_default/params.toml

@@ -15,6 +15,9 @@ enableCodeCopy = false
 # mainSections = ["section1", "section2"]
 # robots = ""
 
+[header]
+  layout = "basic" # valid options: basic, hamburger, custom
+
 [footer]
   showCopyright = true
   showThemeAttribution = true

exampleSite/config/_default/params.toml

@@ -15,6 +15,9 @@ enableCodeCopy = true
 mainSections = ["samples"]
 # robots = ""
 
+[header]
+  layout = "basic" # valid options: basic, hamburger, custom
+
 [footer]
   showCopyright = true
   showThemeAttribution = true

exampleSite/content/docs/configuration.md

@@ -121,6 +121,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.|
 |`mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
 |`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
+|`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.|
 |`footer.showCopyright`|`true`|Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).|
 |`footer.showThemeAttribution`|`true`|Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page).|
 |`footer.showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.|

exampleSite/content/samples/icons.md

@@ -19,6 +19,7 @@ The full list of built-in icons and their corresponding names can referenced bel
 | -------------------- | --------------------------------- |
 | amazon               | {{< icon amazon >}}               |
 | apple                | {{< icon apple >}}                |
+| bars                 | {{< icon bars >}}                 |
 | blogger              | {{< icon blogger >}}              |
 | bug                  | {{< icon bug >}}                  |
 | check                | {{< icon check >}}                |

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 }}