Make section menu responsive

assets/scss/components/_toc.scss

@@ -93,4 +93,8 @@
             }
         }
     }
-}
+}
+
+.section-menu > .nav-link.active, .section-menu > .nav-link:hover {
+    color: var(--bs-primary);
+}

i18n/en.yaml

@@ -79,6 +79,8 @@
   translation: "On this page"
 - id: seeAlso
   translation: "See also"
+- id: sectionMenu
+  translation: "Select a topic"
 
 # Sidebar
 - id: toggleSidebar

i18n/nl.yaml

@@ -77,6 +77,8 @@
   translation: "Inhoudsopgave"
 - id: seeAlso
   translation: "Zie ook"
+- id: sectionMenu
+  translation: "Selecteer een onderwerp"
 
 # Sidebar
 - id: toggleSidebar

layouts/partials/assets/section-menu.html

@@ -5,7 +5,31 @@
 {{ end }}
 
 {{- if gt (len $items) 0 }}
-    <nav class="navbar navbar-expand navbar-services p-0 fs-5">
+    <div class="d-grid gap-2 mx-auto d-md-none">
+        {{ partial "assets/button.html" (dict 
+            "title" (T "sectionMenu") 
+            "color" "secondary" 
+            "outline" "true" 
+            "class" "toc-button" 
+            "icon" "fas sort"
+            "justify" "between"
+            "collapse" "toc-collapse"
+            "order" "last") 
+        -}}
+    </div>
+
+    <p>
+        <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+            <div class="toc toc-panel section-menu text-body p-2 fs-6">
+                    {{- range $items }}
+                        {{ $active := eq $page.RelPermalink .RelPermalink }}
+                        <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
+                    {{- end }}
+            </div>
+        </div>
+    </p>
+
+    <nav class="navbar navbar-expand navbar-services p-0 fs-5 d-none d-md-block">
         <div class="container-fluid p-0 pb-3">
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav">