From 5065870f6459503263bfdccc99c19983b6a44adc Mon Sep 17 00:00:00 2001
From: Oscar Najera <hi@oscarnajera.com>
Date: Tue, 7 Jan 2025 00:31:41 +0100
Subject: Top nav menu with tailwindcss

---
 layouts/partials/header.html | 53 ++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 27 deletions(-)

(limited to 'layouts/partials/header.html')

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 394f274..8394764 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
-<nav class="header w-full bg-lime-700 cf ">
-  <div class="max-w-screen-md mx-auto pl-2 text-white">
-    <a href="{{ site.BaseURL | relLangURL }}" class="block float-left">
+<nav class="bg-lime-700">
+  <div class="max-w-screen-md mx-auto text-white flex justify-between">
+    <a href="{{ site.BaseURL | relLangURL }}" class="">
       {{ with resources.Get .Site.Params.logo }}
         <img
           height="{{ site.Params.logo_height }}"
@@ -9,42 +9,41 @@
           alt="{{ site.Title }}"
         />
       {{ end }}
-
-
       <span class="pl-2 text-4xl leading-normal berkshire-swash">
         {{ .Site.Title }}
       </span>
     </a>
     <input class="menu-btn hidden" type="checkbox" id="menu-btn" />
-    <label class="float-right md:hidden m-2 p-4 menu-icon" for="menu-btn">
+    <label class="menu-icon m-2 p-4 md:hidden" for="menu-btn">
       <span class="navicon bg-white"></span>
     </label>
-    <ul class="m-0 p-0 overflow-hidden font-sans leading-none">
+    <div
+      class="menu bg-lime-700 md:w-fit md:flex-row md:max-h-none md:static top-12"
+    >
       {{ range .Site.Menus.main }}
-        <li class="md:float-left hover:bg-lime-500">
-          <a class="block p-4" href="{{ .PageRef | relLangURL }}">
-            {{ .Pre }}
-            {{- T .Name | title -}}
-          </a>
-        </li>
+        <a class="hover:bg-lime-500 p-4" href="{{ .PageRef | relLangURL }}">
+          {{ .Pre }}
+          {{- T .Name | title -}}
+        </a>
       {{ end }}
+    </div>
 
-      {{ if .IsTranslated }}
-        <select
-          name="lang"
-          class="my-2 py-1 tc ba b--black-20 br2 w3-theme-d3 mw3 "
-          onchange="self.location=options[selectedIndex].value"
-        >
+    {{ if .IsTranslated }}
+      <select
+        name="lang"
+        class="my-2 py-1 tc ba b--black-20 br2 w3-theme-d3 mw3 "
+        onchange="self.location=options[selectedIndex].value"
+      >
+        <option value="{{ .Permalink }}">
+          {{ .Language.Lang }}
+        </option>
+        {{ range .Translations }}
           <option value="{{ .Permalink }}">
             {{ .Language.Lang }}
           </option>
-          {{ range .Translations }}
-            <option value="{{ .Permalink }}">
-              {{ .Language.Lang }}
-            </option>
-          {{ end }}
-        </select>
-      {{ end }}
-    </ul>
+        {{ end }}
+      </select>
+    {{ end }}
+
   </div>
 </nav>
-- 
cgit v1.2.3