refactor(header): modularize basic.html

layouts/partials/header/basic.html

@@ -1,4 +1,5 @@
-<div class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 padding-main-menu">
+{{/* Logo section */}}
+{{ define "HeaderLogo" }}
     {{ if .Site.Params.Logo }}
     {{ $logo := resources.Get .Site.Params.Logo }}
     {{ if $logo }}
@@ -19,16 +20,10 @@
     </div>
     {{ end }}
     {{- end }}
-    <div class="flex flex-1 items-center justify-between">
-        <nav class="flex space-x-3">
+{{ end }}
 
-            {{ if not .Site.Params.disableTextInHeader | default true }}
-            <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{
-                .Site.Title | markdownify
-                }}</a>
-            {{ end }}
-
-        </nav>
+{{/* Desktop navigation */}}
+{{ define "HeaderDesktopNavigation" }}
         <nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
 
             {{ if .Site.Menus.main }}
@@ -63,6 +58,10 @@
             {{ end }}
 
         </nav>
+{{ end }}
+
+{{/* Mobile navigation */}}
+{{ define "HeaderMobileNavigation" }}
         <div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
 
             <span></span>
@@ -89,7 +88,9 @@
             {{ end }}
 
         </div>
-    </div>
+{{ end }}
+
+{{ define "HeaderMobileMenu" }}
     <div class="-my-2 md:hidden">
 
         <label id="menu-button" class="block">
@@ -145,6 +146,22 @@
             </div>
         </label>
     </div>
+{{ end }}
+
+<div class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 padding-main-menu">
+    {{ template "HeaderLogo" . }}
+    <div class="flex flex-1 items-center justify-between">
+        <nav class="flex space-x-3">
+            {{ if not .Site.Params.disableTextInHeader | default true }}
+            <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{
+                .Site.Title | markdownify
+                }}</a>
+            {{ end }}
+        </nav>
+        {{ template "HeaderDesktopNavigation" . }}
+        {{ template "HeaderMobileNavigation" . }}
+    </div>
+    {{ template "HeaderMobileMenu" . }}
 </div>
 
 {{ if .Site.Menus.subnavigation }}