From: Kai Moritz <kai@juplo.de>
Date: Fri, 12 Dec 2025 10:33:03 +0000 (+0100)
Subject: WIP:layout:menu
X-Git-Tag: frontend--hugo--rebase--2025-12-21--19-20~26
X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=26bd1ca2bedbe42833fd4d10cc67bb2bda012549;p=website

WIP:layout:menu
---

diff --git a/hugo.yaml b/hugo.yaml
index 18d3aad1..9d1211c7 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -1,5 +1,9 @@
 baseURL: https://example.org/
 languageCode: en-US
+mainSections:
+  - blog
+  - projects
+  - about
 menus:
   main:
   - name: Home
diff --git a/layouts/_partials/menu.html b/layouts/_partials/menu.html
index f39ae01d..a8d39bd1 100644
--- a/layouts/_partials/menu.html
+++ b/layouts/_partials/menu.html
@@ -1,43 +1,34 @@
-<nav id="nav"
-    th:include="~{::#navigation}?:_"
-    th:with="section=${crumbs != null && crumbs.size() > 1 ? crumbs[1] : null}"
-    >
+{{- $page := .page }}
+{{- $menuID := .menuID }}
+
+<nav id="nav">
   <hr class="n"/>
   <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
   <h1 class="nav">Navigation</h1>
   <h2 class="nav menu">Section-Menu</h2>
   <ul id="menu" class="cf">
-    <li th:each="entry : ${_childs.get('/index.html')}"
-        th:with="title=${_titles.get(entry)}"
-        class="m blog"
-        th:class="'m ' + ${title}">
-      <a href="../blog/"
-         th:href="@{${entry}}"
-         class="m"
-         th:class="${section == entry} ? 'm selected' : 'm'"
-         th:text="${_titles.get(entry)}">Blog</a>
+    {{- range $page.Site.MainSections }}
+    {{- $section := site.GetPage "section" . }}
+    <li class="m {{ . }}">
+      <a href="{{ $section.RelPermalink }}" class="{{ cond (eq $page.Section .) "m selected" "m" }}">{{ $section.LinkTitle }}</a>
     </li>
-    <!--/*-->
-    <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
-    <li class="m about"><a href="../about.html" class="m">About</a></li>
-    <!--*/-->
+    {{- end }}
   </ul>
   <h2 class="nav submenu">
-    <span class="s">Submenu for section</span>
-    <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
+    <a class="s selected" href="{{ site.Home.RelPermalink }}">Home</a>
   </h2>
-  <ul th:include="${submenu}?:_"
-      th:with="
-        len=${crumbs == null} ? 0 : ${crumbs.size()},
-        parent=${section},
-        submenu=${_childs.get(parent)},
-        pos=2"
-      id="submenu"
-      class="s"
-      th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
-      >
-    <li th:fragment="submenu(submenu, parent, pos)"
-        th:each="entry : ${submenu}"
+  <ul id="submenu" class="submenu selected">
+  {{- partial "inline/menu/tree.html" (dict "pages" $page.Site.Sections "page" $page) }}
+  {{- define "_partials/inline/menu/tree.html" }}
+    {{- $page := .page -}}
+    {{- range .pages -}}
+    {{- $parent := index .Ancestors 0 -}}
+    {{- $isCurrent := eq . $page -}}
+    {{- $isAncestor := $page.IsDescendant . -}}
+    {{- $isChild := $parent.Eq $page }}
+    {{- $isSibling := $parent.Eq (index $page.Ancestors 0) }}
+    <li class="s{{ if or .Pages .Sections}} sub{{ end }}{{ if not (or $isCurrent $isAncestor (and $isSibling (not $page.IsNode)) $isChild) }} off{{ end }}">
+      <!--
         th:with="
             child=${pos == len},
             hidden=${!child && _canonical.get(crumbs.get(pos)) == entry},
@@ -49,89 +40,38 @@
             "
         class="s sub"
         th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
-        >
-      <a  href="../potemkin/fix-swf/overview.html"
-          th:if="${entry != parent}"
-          th:href="@{${entry}}"
-          class="s selected"
-          th:class="(${selected} ? 's selected' : 's') + ' len_' + ${len} + ' pos_' + ${pos} + (${leaf}?' leaf':'')"
-          th:text="${_titles.get(entry)}"
-          >fix-swf</a>
-      <ul th:if="${selected and childs != null}"
-          class="s active"
-          th:class="'s' + (${entry == uri or (len &gt; 1 and entry == crumbs.get(len-2) and _childs.get(uri) == null)} ? ' selected' : '')"
-          >
-        <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
-            class="s"
-            >
-          <strong class="s">Overview</strong>
-        </li>
-        <!--/*-->
-        <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
-        <li class="s"><a href="#" class="s">FAQ</a></li>
-        <li class="s"><a href="#" class="s">Documentation</a></li>
-        <!--*/-->
+      -->
+      <a  href="{{ .RelPermalink }}"
+          class="s {{ if (or $isCurrent $isAncestor) }} selected{{ end }}"
+          >{{ .LinkTitle }}</a>
+      <!--
+      <ul>
+        <li>.: {{ .Path }}</li>
+        <li>$parent: {{ $parent.Path }}</li>
+        <li>$page: {{ $page.Path }}</li>
+        <li>$page.IsNode: {{ $page.IsNode }}</li>
+        <li>$isCurrent: {{ $isCurrent }}</li>
+        <li>$isAncestor: {{ $isAncestor }}</li>
+        <li>$isSibling: {{ $isSibling }}</li>
+        <li>$isChild: {{ $isChild }}</li>
+        <li>.Eq $page: {{ .Eq $page }}</li>
+        <li>.IsAncestor $page: {{ .IsAncestor $page }}</li>
+        <li>.IsDescendant $page: {{ .IsDescendant $page }}</li>
+      </ul>
+      -->
+      {{ if or .Pages .Sections }}
+      <ul class="s{{ if (or $isCurrent $isAncestor) }} active{{ end }}">
+        {{- if .Pages }}
+          {{- partial "inline/menu/tree.html" (dict
+              "pages" .Pages
+              "page" $page
+          ) }}
+        {{- end }}
       </ul>
+      {{- end }}
     </li>
-    <!--/*-->
-    <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
-    <li class="s off"><a href="#" class="s">jquery.openx</a></li>
-    <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
-    <li class="s sub off"><a href="#" class="s">accelerator</a></li>
-    <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
-    <!--*/-->
-    <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})" class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
+    {{- end }}
+  {{- end }}
   </ul>
   <hr class="n"/>
 </nav>
-{{- /*
-Renders a menu for the given menu ID.
-
-@context {page} page The current page.
-@context {string} menuID The menu ID.
-
-@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
-*/}}
-
-{{- $page := .page }}
-{{- $menuID := .menuID }}
-
-{{- with index site.Menus $menuID }}
-  <nav>
-    <ul>
-      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-    </ul>
-  </nav>
-{{- end }}
-
-{{- define "_partials/inline/menu/walk.html" }}
-  {{- $page := .page }}
-  {{- range .menuEntries }}
-    {{- $attrs := dict "href" .URL }}
-    {{- if $page.IsMenuCurrent .Menu . }}
-      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
-    {{- else if $page.HasMenuCurrent .Menu .}}
-      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
-    {{- end }}
-    {{- $name := .Name }}
-    {{- with .Identifier }}
-      {{- with T . }}
-        {{- $name = . }}
-      {{- end }}
-    {{- end }}
-    <li>
-      <a
-        {{- range $k, $v := $attrs }}
-          {{- with $v }}
-            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
-          {{- end }}
-        {{- end -}}
-      >{{ $name }}</a>
-      {{- with .Children }}
-        <ul>
-          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-        </ul>
-      {{- end }}
-    </li>
-  {{- end }}
-{{- end }}