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')
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