Integrate lodges’ and languages’ submenus to the main menu

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

@@ -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;
 }

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>
-                {{/*
+            {{ with .Menu -}}
                 {{ if .CampsiteTypes -}}
-                    <li>
+                    <li class="has-submenu">
-                        <button type="button" aria-expanded="false" aria-controls="campsite-types-menu"
+                        <button type="button">{{( gettext "Singular Lodges" )}}</button>
-                        >{{( gettext "Singular Lodges" )}}</button>
+                        <ul>
-                        <ul id="campsite-types-menu">
                             {{ range .CampsiteTypes -}}
                                 <li><a href="{{ .HRef }}">{{ .Label }}</a></li>
                             {{ end }}
                         </ul>
                     </li>
                 {{- 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>
-    {{- end }}
 </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 }}