From b7e130fed2b61bb6587acc6b8702f8e44787d509 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Mon, 11 Sep 2023 05:13:57 +0200
Subject: [PATCH] =?UTF-8?q?Integrate=20lodges=E2=80=99=20and=20languages?=
 =?UTF-8?q?=E2=80=99=20submenus=20to=20the=20main=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There is a big difference between the item that has the submenu for
lodges and languages: languages is a link to the “alternate” version of
the page, while the lodges has no page to link to.  Therefore, one is an
anchor while the other is a button, to make a semantic difference, but
both have the exact same appearance here.
---
 web/static/public.css              | 43 +++++++++++++++++++++++--
 web/templates/public/layout.gohtml | 50 +++++++++++++++---------------
 2 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/web/static/public.css b/web/static/public.css
index a73cd00..6a263cc 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -172,15 +172,18 @@ body > a[href="#content"]:focus {
 body > header {
     position: sticky;
     top: 0;
-    background-color: rgba(var(--clar-rgb), 0.7);
     z-index: 999;
     padding: 1rem 2.5rem;
-    backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
+body > header, nav .has-submenu ul {
+    background-color: rgba(var(--clar-rgb), 0.7);
+    backdrop-filter: blur(10px);
+}
+
 h1 a span {
     display: inline-block;
 }
@@ -213,7 +216,7 @@ nav ul {
     align-items: center;
 }
 
-nav a {
+nav a, nav button {
     font-size: 1.8rem;
     font-weight: 500;
     text-transform: uppercase;
@@ -221,6 +224,40 @@ nav a {
     line-height: 6rem;
 }
 
+nav button {
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+
+nav .has-submenu {
+    position: relative;
+}
+
+nav .has-submenu > a::after, nav .has-submenu > button::after {
+    content: " ⌄";
+    position: absolute;
+    top: -.5rem;
+    right: -0.05rem;
+}
+
+nav .has-submenu ul {
+    flex-direction: column;
+    align-items: start;
+    display: none;
+    position: absolute;
+    top: 5rem;
+}
+
+nav .has-submenu ul a {
+    line-height: 4rem;
+    white-space: nowrap;
+}
+
+nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
+    display: flex;
+}
+
 #content {
     padding: 2.5rem;
 }
diff --git a/web/templates/public/layout.gohtml b/web/templates/public/layout.gohtml
index e44ca72..366ebe5 100644
--- a/web/templates/public/layout.gohtml
+++ b/web/templates/public/layout.gohtml
@@ -21,38 +21,34 @@
 <a href="#content">{{( gettext "Skip to main content" )}}</a>
 <header>
     <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
-    {{/*
-    {{ if .LocalizedAlternates -}}
-        <nav>
-            <ul>
-                {{ range .LocalizedAlternates -}}
-                    <li><a rel="alternate" href="{{ .HRef }}" hreflang="{{ .Lang }}"
-                           lang="{{ .Lang }}">{{ .Endonym }}</a></li>
-                {{ end }}
-            </ul>
-        </nav>
-    {{- end }}
-    */}}
-    {{ with .Menu -}}
-        <nav>
-            <ul>
-                <li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>
-                {{/*
+    <nav>
+        <ul>
+            <li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>
+            {{ with .Menu -}}
                 {{ if .CampsiteTypes -}}
-                    <li>
-                        <button type="button" aria-expanded="false" aria-controls="campsite-types-menu"
-                        >{{( gettext "Singular Lodges" )}}</button>
-                        <ul id="campsite-types-menu">
+                    <li class="has-submenu">
+                        <button type="button">{{( gettext "Singular Lodges" )}}</button>
+                        <ul>
                             {{ range .CampsiteTypes -}}
                                 <li><a href="{{ .HRef }}">{{ .Label }}</a></li>
                             {{ end }}
                         </ul>
                     </li>
                 {{- end }}
-                */}}
-            </ul>
-        </nav>
-    {{- end }}
+            {{- end }}
+            {{ if .LocalizedAlternates -}}
+                <li class="has-submenu">{{ range .LocalizedAlternates -}}
+                        {{ if eq .Lang currentLocale }}{{ template "alternateAnchor" . }}{{ end }}
+                    {{- end }}
+                    <ul>
+                        {{ range .LocalizedAlternates }}{{ if ne .Lang currentLocale -}}
+                            <li>{{ template "alternateAnchor" . }}</li>
+                        {{ end }}{{ end }}
+                    </ul>
+                </li>
+            {{- end }}
+        </ul>
+    </nav>
 </header>
 <main id="content">
     {{- template "content" . }}
@@ -60,3 +56,7 @@
 <footer>© {{( gettext "Campsite Montagut" )}} | 1984–2023</footer>
 </body>
 </html>
+
+{{ define "alternateAnchor" -}}
+    <a rel="alternate" href="{{ .HRef }}" hreflang="{{ .Lang }}" lang="{{ .Lang }}">{{ .Endonym }}</a>
+{{- end }}