From bbe6bc43f658a3c0efef2e0bf18966730284a324 Mon Sep 17 00:00:00 2001
From: Craig <craig.osterhout@docker.com>
Date: Mon, 7 Jul 2025 12:46:02 -0700
Subject: [PATCH 1/2] drilldown experiment

Signed-off-by: Craig <craig.osterhout@docker.com>
---
 layouts/partials/sidebar/sections.html | 40 ++++++++++++++++++++------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/layouts/partials/sidebar/sections.html b/layouts/partials/sidebar/sections.html
index ff7b3cb0eca..07691f41f90 100644
--- a/layouts/partials/sidebar/sections.html
+++ b/layouts/partials/sidebar/sections.html
@@ -5,16 +5,41 @@
   - Dynamically applies current page highlighting and expanded states.
   - Handles external links via `Params.sidebar.goto` in `renderSingle`.
   - Requires `Params.sitemap` and `Params.sidebar` for filtering and behavior.
-  */
--}}
+*/ -}}
 <!-- section tree -->
 <nav class="navbar-font flex flex-col">
   <div class="block py-4 text-gray-200 md:hidden dark:text-gray-200">
     This section
   </div>
-  <ul>
-    {{ template "renderChildren" .FirstSection }}
-  </ul>
+<ul>
+  {{- $first := .FirstSection }}
+  {{- if eq $first.Title "Manuals" }}
+    {{- if eq page $first }}
+      {{/* 1) On /manuals/ → grouped flat list (unchanged) */}}
+      {{- $sections := $first.Sections }}
+      {{- $ungrouped := where $sections "Params.sidebar.group" "==" nil }}
+      {{- range $ungrouped }}{{ template "renderSingle" . }}{{- end }}
+      {{- range $first.Params.sidebar.groups }}
+        <div class="navbar-group">
+          <li class="navbar-group-font-title">{{ . }}</li>
+          {{- range where $sections "Params.sidebar.group" . }}
+            {{ template "renderSingle" . }}
+          {{- end }}
+        </div>
+      {{- end }}
+    {{- else }}
+      {{/* 2) Under a manual → show that manual’s entire tree */}}
+      {{- range $first.Sections }}
+        {{- if or (eq page .) (page.IsDescendant .) }}
+          {{ template "renderList" . }}
+        {{- end }}
+      {{- end }}
+    {{- end }}
+  {{- else }}
+    {{/* 3) Everywhere else → normal recursive nav */}}
+    {{ template "renderChildren" $first }}
+  {{- end }}
+</ul>
 </nav>
 
 {{ define "renderChildren" }}
@@ -45,7 +70,6 @@
       {{- end }}
     </div>
   {{- end }}
-
 {{ end }}
 
 {{/* Recursive template for sidebar items */}}
@@ -60,7 +84,6 @@
     >
       <div class="navbar-entry-margin w-full truncate">
         {{- if .Permalink }}
-          {{/* If the link is not empty, use it */}}
           <!-- Sections that have children and linking to a page -->
           <a
             {{ if $isCurrent }}
@@ -72,7 +95,6 @@
             {{ template "renderTitle" . }}
           </a>
         {{- else }}
-          {{/* Otherwise, just expand the section */}}
           <!-- Sections that have children and do not link to a page -->
           <button
             @click="expanded = !expanded"
@@ -82,7 +104,7 @@
           </button>
         {{- end }}
       </div>
-      <!-- Expand group button -->
+      <!-- Expand/collapse button -->
       <button
         @click="expanded = !expanded"
         class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800"

From 048d742c96e76745ea5dcc3fec5f4f6e2ee357c1 Mon Sep 17 00:00:00 2001
From: Craig <craig.osterhout@docker.com>
Date: Mon, 7 Jul 2025 13:26:39 -0700
Subject: [PATCH 2/2] multi-groups

Signed-off-by: Craig <craig.osterhout@docker.com>

landing page and nav

Signed-off-by: Craig <craig.osterhout@docker.com>
---
 content/manuals/_index.md                     |   1 +
 .../ai/mcp-catalog-and-toolkit/_index.md      |   5 +-
 content/manuals/desktop/_index.md             |   4 +-
 layouts/_default/baseof.html                  |  11 +-
 layouts/partials/sidebar/sections.html        | 128 ++++++--------
 layouts/section/manuals.html                  | 163 ++++++++++++++++++
 6 files changed, 234 insertions(+), 78 deletions(-)
 create mode 100644 layouts/section/manuals.html

diff --git a/content/manuals/_index.md b/content/manuals/_index.md
index 546324bb8a3..4d8684d7b59 100644
--- a/content/manuals/_index.md
+++ b/content/manuals/_index.md
@@ -13,6 +13,7 @@ params:
       - AI
       - Products
       - Platform
+      - Desktop
   notoc: true
   open-source:
   - title: Docker Build
diff --git a/content/manuals/ai/mcp-catalog-and-toolkit/_index.md b/content/manuals/ai/mcp-catalog-and-toolkit/_index.md
index c91713b27fc..d46f603e8c6 100644
--- a/content/manuals/ai/mcp-catalog-and-toolkit/_index.md
+++ b/content/manuals/ai/mcp-catalog-and-toolkit/_index.md
@@ -3,7 +3,10 @@ title: Docker MCP Catalog and Toolkit
 linkTitle: MCP Catalog and Toolkit
 params:
   sidebar:
-    group: AI
+    group:
+     - AI
+     - Products
+     - Desktop
     badge:
       color: blue
       text: Beta
diff --git a/content/manuals/desktop/_index.md b/content/manuals/desktop/_index.md
index 4162dcd3950..38b2c0dfd2d 100644
--- a/content/manuals/desktop/_index.md
+++ b/content/manuals/desktop/_index.md
@@ -6,7 +6,9 @@ keywords: how to use docker desktop, what is docker desktop used for, what does
   desktop do, using docker desktop
 params:
   sidebar:
-    group: Products
+    group: 
+    - Products
+    - Desktop
 grid:
 - title: Install Docker Desktop
   description: |
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 7b06c790c81..b6f88dbccf0 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -50,10 +50,13 @@
             Back
           </button>
           <!-- Actual Sidebar Content -->
-          {{ block "left" . }}
-            {{ partial "sidebar/mainnav.html" . }}
-            {{ partial "sidebar/sections.html" . }}
-          {{ end }}
+ {{ block "left" . }}
+   {{ partial "sidebar/mainnav.html" . }}
+  {{/* only skip sections.html when we're on exactly /manuals/ */}}
+  {{ if ne .RelPermalink "/manuals/" }}
+    {{ partial "sidebar/sections.html" . }}
+  {{ end }}
+ {{ end }}
         </div>
       </div>
 
diff --git a/layouts/partials/sidebar/sections.html b/layouts/partials/sidebar/sections.html
index 07691f41f90..b7ad62da7fe 100644
--- a/layouts/partials/sidebar/sections.html
+++ b/layouts/partials/sidebar/sections.html
@@ -11,35 +11,41 @@
   <div class="block py-4 text-gray-200 md:hidden dark:text-gray-200">
     This section
   </div>
-<ul>
-  {{- $first := .FirstSection }}
-  {{- if eq $first.Title "Manuals" }}
-    {{- if eq page $first }}
-      {{/* 1) On /manuals/ → grouped flat list (unchanged) */}}
-      {{- $sections := $first.Sections }}
-      {{- $ungrouped := where $sections "Params.sidebar.group" "==" nil }}
-      {{- range $ungrouped }}{{ template "renderSingle" . }}{{- end }}
-      {{- range $first.Params.sidebar.groups }}
-        <div class="navbar-group">
-          <li class="navbar-group-font-title">{{ . }}</li>
-          {{- range where $sections "Params.sidebar.group" . }}
-            {{ template "renderSingle" . }}
+  <ul>
+    {{- $first := .FirstSection }}
+    {{- if eq $first.Title "Manuals" }}
+      {{- if eq page $first }}
+        {{/* 1) On /manuals/ → list all manuals, grouped by Params.sidebar.groups (multi-group supported) */}}
+        {{- $sections := $first.Sections }}
+        {{- /* Manuals without any group */}}
+        {{- $ungrouped := where $sections "Params.sidebar.group" "==" nil }}
+        {{- range $ungrouped }}
+          {{ template "renderSingle" . }}
+        {{- end }}
+        {{- /* Then each declared group, allowing multiple groups per manual */}}
+        {{- range $group := $first.Params.sidebar.groups }}
+          <div class="navbar-group">
+            <li class="navbar-group-font-title">{{ $group }}</li>
+            {{- range $sections }}
+              {{- if in .Params.sidebar.group $group }}
+                {{ template "renderSingle" . }}
+              {{- end }}
+            {{- end }}
+          </div>
+        {{- end }}
+      {{- else }}
+        {{/* 2) Under a specific manual → render that manual’s full collapsible tree */}}
+        {{- range $first.Sections }}
+          {{- if or (eq page .) (page.IsDescendant .) }}
+            {{ template "renderList" . }}
           {{- end }}
-        </div>
-      {{- end }}
-    {{- else }}
-      {{/* 2) Under a manual → show that manual’s entire tree */}}
-      {{- range $first.Sections }}
-        {{- if or (eq page .) (page.IsDescendant .) }}
-          {{ template "renderList" . }}
         {{- end }}
       {{- end }}
+    {{- else }}
+      {{/* 3) Everywhere else → normal recursive nav of FirstSection */}}
+      {{ template "renderChildren" $first }}
     {{- end }}
-  {{- else }}
-    {{/* 3) Everywhere else → normal recursive nav */}}
-    {{ template "renderChildren" $first }}
-  {{- end }}
-</ul>
+  </ul>
 </nav>
 
 {{ define "renderChildren" }}
@@ -55,17 +61,17 @@
       {{- template "renderSingle" . }}
     {{- end }}
   {{- end }}
-  {{- range .Params.sidebar.groups }}
-    <!--  Main titles -->
+  {{- /* grouping, allowing multiple groups per page */}}
+  {{- range $group := .Params.sidebar.groups }}
     <div class="navbar-group">
-      <li class="navbar-group-font-title">
-        {{ . }}
-      </li>
-      {{- range where $pages "Params.sidebar.group" . }}
-        {{- if .IsSection }}
-          {{- template "renderList" . }}
-        {{- else }}
-          {{- template "renderSingle" . }}
+      <li class="navbar-group-font-title">{{ $group }}</li>
+      {{- range $pages }}
+        {{- if in .Params.sidebar.group $group }}
+          {{- if .IsSection }}
+            {{- template "renderList" . }}
+          {{- else }}
+            {{- template "renderSingle" . }}
+          {{- end }}
         {{- end }}
       {{- end }}
     </div>
@@ -76,26 +82,19 @@
 {{ define "renderList" }}
   {{ $isCurrent := eq page . }}
   {{ $expanded := or $isCurrent (page.IsDescendant .) }}
-  <li class="" x-data="{ expanded: {{ $expanded }} }">
-    <div
-      class="{{ if $isCurrent }}
-        navbar-entry-background-current
-      {{ end }} flex w-full items-center justify-between rounded-sm"
-    >
+  <li x-data="{ expanded: {{ $expanded }} }">
+    <div class="{{ if $isCurrent }}navbar-entry-background-current{{ end }}
+                flex w-full items-center justify-between rounded-sm">
       <div class="navbar-entry-margin w-full truncate">
         {{- if .Permalink }}
-          <!-- Sections that have children and linking to a page -->
           <a
-            {{ if $isCurrent }}
-              aria-current="page" id="sidebar-current-page"
-            {{ end }}
+            {{ if $isCurrent }}aria-current="page" id="sidebar-current-page"{{ end }}
             class="hover:text-blue block select-none hover:dark:text-blue-400"
             href="{{ .Permalink }}"
           >
             {{ template "renderTitle" . }}
           </a>
         {{- else }}
-          <!-- Sections that have children and do not link to a page -->
           <button
             @click="expanded = !expanded"
             class="hover:text-blue w-full text-left select-none hover:dark:text-blue-400"
@@ -104,29 +103,20 @@
           </button>
         {{- end }}
       </div>
-      <!-- Expand/collapse button -->
-      <button
-        @click="expanded = !expanded"
-        class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800"
-      >
-        <span
-          :class="{ 'hidden' : expanded }"
-          class="icon-svg {{ if $expanded }}hidden{{ end }}"
-        >
+      <button @click="expanded = !expanded"
+              class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800">
+        <span :class="{ 'hidden': expanded }"
+              class="icon-svg {{ if $expanded }}hidden{{ end }}">
           {{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}
         </span>
-        <span
-          :class="{ 'hidden' : !expanded }"
-          class="icon-svg {{ if not $expanded }}hidden{{ end }}"
-        >
+        <span :class="{ 'hidden': !expanded }"
+              class="icon-svg {{ if not $expanded }}hidden{{ end }}">
           {{ partialCached "icon" "arrow_drop_up" "arrow_drop_up" }}
         </span>
       </button>
     </div>
-    <ul
-      :class="{ 'hidden' : !expanded }"
-      class="{{ if not $expanded }}hidden{{ end }} ml-3"
-    >
+    <ul :class="{ 'hidden': !expanded }"
+        class="{{ if not $expanded }}hidden{{ end }} ml-3">
       {{ template "renderChildren" . }}
     </ul>
   </li>
@@ -145,15 +135,9 @@
     </li>
   {{- else }}
     {{ $isCurrent := eq page . }}
-    <li
-      class="navbar-entry-margin hover:text-blue {{ if $isCurrent }}
-        navbar-entry-background-current
-      {{ end }} rounded-sm hover:dark:text-blue-400"
-    >
+    <li class="navbar-entry-margin hover:text-blue {{ if $isCurrent }}navbar-entry-background-current{{ end }} rounded-sm hover:dark:text-blue-400">
       <a
-        {{ if $isCurrent }}
-          aria-current="page" id="sidebar-current-page"
-        {{ end }}
+        {{ if $isCurrent }}aria-current="page" id="sidebar-current-page"{{ end }}
         class="block w-full truncate"
         href="{{ .Permalink }}"
         title="{{ .LinkTitle }}"
@@ -168,7 +152,7 @@
   {{ .LinkTitle }}
   {{- with .Params.sidebar.badge }}
     <span>
-      {{- partial "components/badge.html" (dict "color" .color "content" .text) }}
+      {{ partial "components/badge.html" (dict "color" .color "content" .text) }}
     </span>
   {{- end }}
 {{ end }}
diff --git a/layouts/section/manuals.html b/layouts/section/manuals.html
new file mode 100644
index 00000000000..ce1b0528737
--- /dev/null
+++ b/layouts/section/manuals.html
@@ -0,0 +1,163 @@
+{{ define "left" }}
+  {{ if eq .RelPermalink "/manuals/" }}
+    {{ partial "sidebar/mainnav.html" . }}
+
+    {{ $section := .Site.GetPage "section" "manuals" }}
+
+    {{/* Create group-to-count map */}}
+    {{ $groupCounts := dict }}
+
+    {{/* Count all manuals (no dupes) */}}
+    {{ $seen := slice }}
+    {{ $allCount := 0 }}
+    {{ range $p := $section.Pages }}
+      {{ if not (in $seen $p.Permalink) }}
+        {{ $seen = $seen | append $p.Permalink }}
+        {{ $allCount = add $allCount 1 }}
+      {{ end }}
+    {{ end }}
+    {{ $groupCounts = merge $groupCounts (dict "All" $allCount) }}
+
+    {{/* Count per group */}}
+    {{ range $group := $section.Params.sidebar.groups }}
+      {{ $count := 0 }}
+      {{ range $p := $section.Pages }}
+        {{ $pageGroups := slice }}
+        {{ if reflect.IsSlice $p.Params.sidebar.group }}
+          {{ $pageGroups = $p.Params.sidebar.group }}
+        {{ else if $p.Params.sidebar.group }}
+          {{ $pageGroups = slice $p.Params.sidebar.group }}
+        {{ end }}
+        {{ if in $pageGroups $group }}
+          {{ $count = add $count 1 }}
+        {{ end }}
+      {{ end }}
+      {{ $groupCounts = merge $groupCounts (dict $group $count) }}
+    {{ end }}
+
+    <nav
+      class="navbar-font flex flex-col gap-4 p-4 text-sm"
+      x-data="{
+        selected: '',
+        select(group) {
+          this.selected = group;
+          const url = new URL(window.location.href);
+          url.searchParams.set('group', group);
+          window.history.replaceState({}, '', url);
+          this.$dispatch('group-selected', { group });
+        },
+        init() {
+          const url = new URL(window.location.href);
+          const group = url.searchParams.get('group') || 'All';
+          this.selected = group;
+          this.$nextTick(() => {
+            this.$dispatch('group-selected', { group: this.selected });
+          });
+        }
+      }"
+    >
+      <p class="font-semibold">Product category</p>
+      <ul class="space-y-2">
+        {{ $groups := slice "All" | append $section.Params.sidebar.groups }}
+        {{ range $group := $groups }}
+          <li>
+            <button
+              @click="select('{{ $group }}')"
+              :class="{ 'font-bold': selected === '{{ $group }}' }"
+              class="hover:underline text-left w-full"
+            >
+              {{ $group }} ({{ index $groupCounts $group }})
+            </button>
+          </li>
+        {{ end }}
+      </ul>
+    </nav>
+  {{ else }}
+    {{ partial "sidebar/mainnav.html" . }}
+    {{ partial "sidebar/sections.html" . }}
+  {{ end }}
+{{ end }}
+
+
+{{ define "main" }}
+  {{ if eq .RelPermalink "/manuals/" }}
+    <article
+      class="prose max-w-none"
+      x-data="{
+        manuals: [],
+        all: JSON.parse(document.getElementById('manuals-data').textContent),
+        init() {
+          const url = new URL(window.location.href);
+          const group = url.searchParams.get('group') || 'All';
+          this.manuals = this.all[group] || [];
+        }
+      }"
+      @group-selected.window="manuals = all[$event.detail.group] || []"
+    >
+      <h1>{{ .Title }}</h1>
+
+      <template x-if="manuals.length === 0">
+        <p>Select a group from the left to view its manuals.</p>
+      </template>
+
+      <template x-if="manuals.length > 0">
+        <section>
+          <ul class="list-disc ml-6">
+            <template x-for="item in manuals" :key="item.url">
+              <li>
+                <a class="hover:underline" :href="item.url" x-text="item.title"></a>
+              </li>
+            </template>
+          </ul>
+        </section>
+      </template>
+
+      <script type="application/json" id="manuals-data">
+      {
+        {{- $section := .Site.GetPage "section" "manuals" }}
+        "All": [
+          {{- $seen := slice }}
+          {{- $innerFirst := true }}
+          {{- range $p := $section.Pages }}
+            {{- if not (in $seen $p.Permalink) }}
+              {{- if not $innerFirst }},{{ end }}
+              {
+                "title": "{{ $p.LinkTitle | htmlEscape }}",
+                "url": "{{ $p.Permalink }}"
+              }
+              {{- $seen = $seen | append $p.Permalink }}
+              {{- $innerFirst = false }}
+            {{- end }}
+          {{- end }}
+        ],
+        {{- $first := true }}
+        {{- range $group := $section.Params.sidebar.groups }}
+          {{- if not $first }},{{ end }}
+          "{{ $group }}": [
+            {{- $inner := true }}
+            {{- range $p := $section.Pages }}
+              {{- $pageGroups := slice }}
+              {{- if reflect.IsSlice $p.Params.sidebar.group }}
+                {{- $pageGroups = $p.Params.sidebar.group }}
+              {{- else if $p.Params.sidebar.group }}
+                {{- $pageGroups = slice $p.Params.sidebar.group }}
+              {{- end }}
+              {{- if in $pageGroups $group }}
+                {{- if not $inner }},{{ end }}
+                {
+                  "title": "{{ $p.LinkTitle | htmlEscape }}",
+                  "url": "{{ $p.Permalink }}"
+                }
+                {{- $inner = false }}
+              {{- end }}
+            {{- end }}
+          ]
+          {{- $first = false }}
+        {{- end }}
+      }
+      </script>
+    </article>
+  {{ else }}
+    {{ partial "content-default.html" . }}
+  {{ end }}
+{{ end }}