From c75289eea7c95972cd8925e75fef12b4d587992d Mon Sep 17 00:00:00 2001
From: Wen Junhua <wenjh1998@gmail.com>
Date: Mon, 27 Nov 2023 23:00:14 +0800
Subject: [PATCH] refactor: refactor headers to use same code

---
 exampleSite/config/_default/params.toml       |   2 +-
 layouts/partials/header/basic.html            | 100 +-------
 .../partials/header/basic/basic-content.html  |  99 ++++++++
 layouts/partials/header/hamburger.html        | 119 +---------
 .../header/hamburger/hamburger-content.html   | 118 ++++++++++
 layouts/partials/header/hybrid.html           | 222 +-----------------
 6 files changed, 223 insertions(+), 437 deletions(-)
 create mode 100644 layouts/partials/header/basic/basic-content.html
 create mode 100644 layouts/partials/header/hamburger/hamburger-content.html

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 3038930a..25b5bad4 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -19,7 +19,7 @@ enableQuicklink = true
 fingerprintAlgorithm = "sha256"
 
 [header]
-  layout = "basic" # valid options: basic, hamburger, hybrid, custom
+  layout = "hybrid" # valid options: basic, hamburger, hybrid, custom
   # logo = "img/logo.jpg"
   # logoDark = "img/dark-logo.jpg"
   showTitle = true
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index 480d8fe7..bd5fadd5 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -7,105 +7,7 @@
     {{/* Main menu */}}
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
       <ul class="flex flex-col list-none text-end sm:flex-row">
-        {{ if .Site.Menus.main }}
-          {{ range .Site.Menus.main }}
-            {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-              {{ continue }}
-            {{ end }}
-            <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
-              {{ if eq .Params.action "search" }}
-                {{ $.Scratch.Add "searchCount" 1 }}
-                {{ if $.Site.Params.enableSearch | default false }}
-                  <button
-                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                    title="{{ .Title | default (i18n "search.open_button_title") }}"
-                  >
-                    {{ with .Params.icon | default "search" }}
-                      <span
-                        class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                      >
-                        {{- partial "icon.html" . -}}
-                      </span>
-                    {{- end -}}{{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </button>
-                {{ end }}
-              {{ else if eq .Params.action "appearance" }}
-                {{ $.Scratch.Add "switchCount" 1 }}
-                <button
-                  id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                  type="button"
-                  aria-label="appearance switcher"
-                >
-                  <span
-                    class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                    title="{{ i18n "footer.dark_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "moon" }}
-                      {{- partial "icon.html" . -}}
-                    {{- end -}}
-                    {{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                  <span
-                    class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                    title="{{ i18n "footer.light_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "sun" }}
-                      {{ partial "icon.html" . }}
-                    {{ end }}
-                    {{ if .Params.showName | default true }}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                </button>
-              {{ else if eq .Params.action "locale" }}
-                {{ $.Scratch.Add "localeCount" 1 }}
-                {{ partial "translations.html" . }}
-              {{ else }}
-                <a
-                  href="{{ .URL }}"
-                  title="{{ .Title }}"
-                  {{ with .Params.target }}target="{{ . }}"{{ end }}
-                  >{{ with .Params.icon }}
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{- partial "icon.html" . -}}
-                    </span>
-                  {{- end -}}{{- if .Params.showName | default true -}}
-                    <span
-                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                      >{{ .Name | markdownify | emojify }}</span
-                    >
-                  {{ end }}</a
-                >
-              {{ end }}
-            </li>
-          {{ end }}
-          {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-            <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
-              <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
-                <span
-                  class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                >
-                  {{ partial "icon.html" "search" }}
-                </span>
-              </button>
-            </li>
-          {{ end }}
-        {{ end }}
+        {{ partial "header/basic/basic-content.html" . }}
       </ul>
     {{ end }}
   </nav>
diff --git a/layouts/partials/header/basic/basic-content.html b/layouts/partials/header/basic/basic-content.html
new file mode 100644
index 00000000..3b4d7d65
--- /dev/null
+++ b/layouts/partials/header/basic/basic-content.html
@@ -0,0 +1,99 @@
+{{ if .Site.Menus.main }}
+    {{ range .Site.Menus.main }}
+    {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
+        {{ continue }}
+    {{ end }}
+    <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
+        {{ if eq .Params.action "search" }}
+        {{ $.Scratch.Add "searchCount" 1 }}
+        {{ if $.Site.Params.enableSearch | default false }}
+            <button
+            id="search-button-{{ $.Scratch.Get "searchCount" }}"
+            title="{{ .Title | default (i18n "search.open_button_title") }}"
+            >
+            {{ with .Params.icon | default "search" }}
+                <span
+                class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                >
+                {{- partial "icon.html" . -}}
+                </span>
+            {{- end -}}{{- if .Params.showName | default true -}}
+                <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+                >
+            {{ end }}
+            </button>
+        {{ end }}
+        {{ else if eq .Params.action "appearance" }}
+        {{ $.Scratch.Add "switchCount" 1 }}
+        <button
+            id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+            type="button"
+            aria-label="appearance switcher"
+        >
+            <span
+            class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+            title="{{ i18n "footer.dark_appearance" }}"
+            >
+            {{ with .Params.icon | default "moon" }}
+                {{- partial "icon.html" . -}}
+            {{- end -}}
+            {{- if .Params.showName | default true -}}
+                <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+                >
+            {{ end }}
+            </span>
+            <span
+            class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+            title="{{ i18n "footer.light_appearance" }}"
+            >
+            {{ with .Params.icon | default "sun" }}
+                {{ partial "icon.html" . }}
+            {{ end }}
+            {{ if .Params.showName | default true }}
+                <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+                >
+            {{ end }}
+            </span>
+        </button>
+        {{ else if eq .Params.action "locale" }}
+        {{ $.Scratch.Add "localeCount" 1 }}
+        {{ partial "translations.html" . }}
+        {{ else }}
+        <a
+            href="{{ .URL }}"
+            title="{{ .Title }}"
+            {{ with .Params.target }}target="{{ . }}"{{ end }}
+            >{{ with .Params.icon }}
+            <span
+                class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+            >
+                {{- partial "icon.html" . -}}
+            </span>
+            {{- end -}}{{- if .Params.showName | default true -}}
+            <span
+                class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                >{{ .Name | markdownify | emojify }}</span
+            >
+            {{ end }}</a
+        >
+        {{ end }}
+    </li>
+    {{ end }}
+    {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+    <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
+        <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
+        <span
+            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+        >
+            {{ partial "icon.html" "search" }}
+        </span>
+        </button>
+    </li>
+    {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/header/hamburger.html b/layouts/partials/header/hamburger.html
index fbd5e12c..c0df5dcb 100644
--- a/layouts/partials/header/hamburger.html
+++ b/layouts/partials/header/hamburger.html
@@ -7,124 +7,7 @@
     {{/* 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-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
-        >
-          <ul
-            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
-          >
-            <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 }}
-                {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-                  {{ continue }}
-                {{ end }}
-                <li class="mb-1 group">
-                  {{ if eq .Params.action "search" }}
-                    {{ $.Scratch.Add "searchCount" 1 }}
-                    {{ if $.Site.Params.enableSearch | default false }}
-                      <button
-                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                        title="{{ .Title | default (i18n "search.open_button_title") }}"
-                      >
-                        {{ with .Params.icon | default "search" }}
-                          <span
-                            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                          >
-                            {{- partial "icon.html" . -}}
-                          </span>
-                        {{- end -}}{{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </button>
-                    {{ end }}
-                  {{ else if eq .Params.action "appearance" }}
-                    {{ $.Scratch.Add "switchCount" 1 }}
-                    <button
-                      id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                      type="button"
-                      aria-label="appearance switcher"
-                    >
-                      <span
-                        class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                        title="{{ i18n "footer.dark_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "moon" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                      <span
-                        class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                        title="{{ i18n "footer.light_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "sun" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                    </button>
-                  {{ else if eq .Params.action "locale" }}
-                    {{ $.Scratch.Add "localeCount" 1 }}
-                    {{ partial "translations.html" . }}
-                  {{ else }}
-                    <a
-                      href="{{ .URL }}"
-                      title="{{ .Title }}"
-                      onclick="close_menu()"
-                      {{ with .Params.target }}target="{{ . }}"{{ end }}
-                      >{{ with .Params.icon }}
-                        <span
-                          class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                        >
-                          {{- partial "icon.html" . -}}
-                        </span>
-                      {{- end -}}{{- if .Params.showName | default true -}}
-                        <span
-                          class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                          >{{ .Name | markdownify | emojify }}</span
-                        >
-                      {{ end }}</a
-                    >
-                  {{ end }}
-                </li>
-              {{ end }}
-              {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-                <li class="mb-1 group">
-                  <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{ partial "icon.html" "search" }}
-                    </span>
-                  </button>
-                </li>
-              {{ end }}
-            {{ end }}
-          </ul>
-        </div>
+        {{ partial "header/hamburger/hamburger-content.html" }}
       </label>
     {{ end }}
   </nav>
diff --git a/layouts/partials/header/hamburger/hamburger-content.html b/layouts/partials/header/hamburger/hamburger-content.html
new file mode 100644
index 00000000..bcf2f45d
--- /dev/null
+++ b/layouts/partials/header/hamburger/hamburger-content.html
@@ -0,0 +1,118 @@
+<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-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
+>
+    <ul
+    class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+    >
+    <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 }}
+        {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
+            {{ continue }}
+        {{ end }}
+        <li class="mb-1 group">
+            {{ if eq .Params.action "search" }}
+            {{ $.Scratch.Add "searchCount" 1 }}
+            {{ if $.Site.Params.enableSearch | default false }}
+                <button
+                id="search-button-{{ $.Scratch.Get "searchCount" }}"
+                title="{{ .Title | default (i18n "search.open_button_title") }}"
+                >
+                {{ with .Params.icon | default "search" }}
+                    <span
+                    class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                    >
+                    {{- partial "icon.html" . -}}
+                    </span>
+                {{- end -}}{{- if .Params.showName | default true -}}
+                    <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                    >
+                {{ end }}
+                </button>
+            {{ end }}
+            {{ else if eq .Params.action "appearance" }}
+            {{ $.Scratch.Add "switchCount" 1 }}
+            <button
+                id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                type="button"
+                aria-label="appearance switcher"
+            >
+                <span
+                class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                title="{{ i18n "footer.dark_appearance" }}"
+                >
+                {{ with .Params.icon | default "moon" }}
+                    {{- partial "icon.html" . -}}
+                {{- end -}}
+                {{- if .Params.showName | default true -}}
+                    <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                    >
+                {{ end }}
+                </span>
+                <span
+                class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                title="{{ i18n "footer.light_appearance" }}"
+                >
+                {{ with .Params.icon | default "sun" }}
+                    {{- partial "icon.html" . -}}
+                {{- end -}}
+                {{- if .Params.showName | default true -}}
+                    <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                    >
+                {{ end }}
+                </span>
+            </button>
+            {{ else if eq .Params.action "locale" }}
+            {{ $.Scratch.Add "localeCount" 1 }}
+            {{ partial "translations.html" . }}
+            {{ else }}
+            <a
+                href="{{ .URL }}"
+                title="{{ .Title }}"
+                onclick="close_menu()"
+                {{ with .Params.target }}target="{{ . }}"{{ end }}
+                >{{ with .Params.icon }}
+                <span
+                    class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+                >
+                    {{- partial "icon.html" . -}}
+                </span>
+                {{- end -}}{{- if .Params.showName | default true -}}
+                <span
+                    class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
+                    >{{ .Name | markdownify | emojify }}</span
+                >
+                {{ end }}</a
+            >
+            {{ end }}
+        </li>
+        {{ end }}
+        {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
+        <li class="mb-1 group">
+            <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
+            <span
+                class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
+            >
+                {{ partial "icon.html" "search" }}
+            </span>
+            </button>
+        </li>
+        {{ end }}
+    {{ end }}
+    </ul>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/header/hybrid.html b/layouts/partials/header/hybrid.html
index 69aba1e1..2055bab9 100644
--- a/layouts/partials/header/hybrid.html
+++ b/layouts/partials/header/hybrid.html
@@ -5,229 +5,13 @@
       {{ partial "logo.html" . }}
     </div>
     {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
-      {{/* Hamburger menu */}}
       <label id="menu-button" for="menu-controller" class="block sm:hidden">
-        <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-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
-        >
-          <ul
-            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl text-end sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
-          >
-            <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 }}
-                {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-                  {{ continue }}
-                {{ end }}
-                <li class="mb-1 group">
-                  {{ if eq .Params.action "search" }}
-                    {{ $.Scratch.Add "searchCount" 1 }}
-                    {{ if $.Site.Params.enableSearch | default false }}
-                      <button
-                        id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                        title="{{ .Title | default (i18n "search.open_button_title") }}"
-                      >
-                        {{ with .Params.icon | default "search" }}
-                          <span
-                            class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                          >
-                            {{- partial "icon.html" . -}}
-                          </span>
-                        {{- end -}}{{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </button>
-                    {{ end }}
-                  {{ else if eq .Params.action "appearance" }}
-                    {{ $.Scratch.Add "switchCount" 1 }}
-                    <button
-                      id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                      type="button"
-                      aria-label="appearance switcher"
-                    >
-                      <span
-                        class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                        title="{{ i18n "footer.dark_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "moon" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                      <span
-                        class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                        title="{{ i18n "footer.light_appearance" }}"
-                      >
-                        {{ with .Params.icon | default "sun" }}
-                          {{- partial "icon.html" . -}}
-                        {{- end -}}
-                        {{- if .Params.showName | default true -}}
-                          <span
-                            class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                            >{{ .Name | markdownify | emojify }}</span
-                          >
-                        {{ end }}
-                      </span>
-                    </button>
-                  {{ else if eq .Params.action "locale" }}
-                    {{ $.Scratch.Add "localeCount" 1 }}
-                    {{ partial "translations.html" . }}
-                  {{ else }}
-                    <a
-                      href="{{ .URL }}"
-                      title="{{ .Title }}"
-                      onclick="close_menu()"
-                      {{ with .Params.target }}target="{{ . }}"{{ end }}
-                      >{{ with .Params.icon }}
-                        <span
-                          class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                        >
-                          {{- partial "icon.html" . -}}
-                        </span>
-                      {{- end -}}{{- if .Params.showName | default true -}}
-                        <span
-                          class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                          >{{ .Name | markdownify | emojify }}</span
-                        >
-                      {{ end }}</a
-                    >
-                  {{ end }}
-                </li>
-              {{ end }}
-              {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-                <li class="mb-1 group">
-                  <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{ partial "icon.html" "search" }}
-                    </span>
-                  </button>
-                </li>
-              {{ end }}
-            {{ end }}
-          </ul>
-        </div>
+        {{/* Hamburger menu */}}
+        {{ partial "header/hamburger/hamburger-content.html" }}
       </label>
       {{/* Basic menu */}}
       <ul class="flex-row hidden list-none text-end sm:flex">
-        {{ if .Site.Menus.main }}
-          {{ range .Site.Menus.main }}
-            {{ if and (eq .Params.action "locale") (or (not page.IsTranslated) (not site.IsMultiLingual)) }}
-              {{ continue }}
-            {{ end }}
-            <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
-              {{ if eq .Params.action "search" }}
-                {{ $.Scratch.Add "searchCount" 1 }}
-                {{ if $.Site.Params.enableSearch | default false }}
-                  <button
-                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
-                    title="{{ .Title | default (i18n "search.open_button_title") }}"
-                  >
-                    {{ with .Params.icon | default "search" }}
-                      <span
-                        class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                      >
-                        {{- partial "icon.html" . -}}
-                      </span>
-                    {{- end -}}{{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </button>
-                {{ end }}
-              {{ else if eq .Params.action "appearance" }}
-                {{ $.Scratch.Add "switchCount" 1 }}
-                <button
-                  id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
-                  type="button"
-                  aria-label="appearance switcher"
-                >
-                  <span
-                    class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
-                    title="{{ i18n "footer.dark_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "moon" }}
-                      {{- partial "icon.html" . -}}
-                    {{- end -}}
-                    {{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                  <span
-                    class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
-                    title="{{ i18n "footer.light_appearance" }}"
-                  >
-                    {{ with .Params.icon | default "sun" }}
-                      {{- partial "icon.html" . -}}
-                    {{- end -}}
-                    {{- if .Params.showName | default true -}}
-                      <span
-                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                        >{{ .Name | markdownify | emojify }}</span
-                      >
-                    {{ end }}
-                  </span>
-                </button>
-              {{ else if eq .Params.action "locale" }}
-                {{ $.Scratch.Add "localeCount" 1 }}
-                {{ partial "translations.html" . }}
-              {{ else }}
-                <a
-                  href="{{ .URL }}"
-                  title="{{ .Title }}"
-                  {{ with .Params.target }}target="{{ . }}"{{ end }}
-                  >{{ with .Params.icon }}
-                    <span
-                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                    >
-                      {{- partial "icon.html" . -}}
-                    </span>
-                  {{- end -}}{{- if .Params.showName | default true -}}
-                    <span
-                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
-                      >{{ .Name | markdownify | emojify }}</span
-                    >
-                  {{ end }}</a
-                >
-              {{ end }}
-            </li>
-          {{ end }}
-          {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
-            <li class="mb-1 group sm:mb-0 sm:me-7 sm:last:me-0">
-              <button id="search-button-m1" title="{{ i18n "search.open_button_title" }}">
-                <span
-                  class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
-                >
-                  {{ partial "icon.html" "search" }}
-                </span>
-              </button>
-            </li>
-          {{ end }}
-
-        {{ end }}
+        {{ partial "header/basic/basic-content.html" . }}
       </ul>
     {{ end }}
   </nav>