hugo: add main nav icons and fix mobile rendering

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

content/get-started/_index.md

@@ -2,30 +2,32 @@
 title: Get started
 keywords: Docker, get started
 description: Get started with Docker
-notoc: true
 layout: wide
-get-started:
+params:
-- title: Get Docker
-  description: Choose the best installation path for your setup.
-  link: /get-started/get-docker/
   icon: download
-- title: What is Docker?
+  notoc: true
-  description: Learn about the Docker platform.
+  get-started:
-  link: /get-started/docker-overview/
+  - title: Get Docker
-  icon: summarize
+    description: Choose the best installation path for your setup.
-get-started2:
+    link: /get-started/get-docker/
-- title: Introduction
+    icon: download
-  description: Get started with the basics and the benefits of containerizing your applications.
+  - title: What is Docker?
-  link: /get-started/introduction/
+    description: Learn about the Docker platform.
-  icon: rocket
+    link: /get-started/docker-overview/
-- title: Docker concepts
+    icon: summarize
-  description: Gain a better understanding of foundational Docker concepts.
+  get-started2:
-  link: /get-started/docker-concepts/the-basics/what-is-a-container/
+  - title: Introduction
-  icon: foundation
+    description: Get started with the basics and the benefits of containerizing your applications.
-- title: Docker workshop
+    link: /get-started/introduction/
-  description: Get guided through a 45-minute workshop to learn about Docker.
+    icon: rocket
-  link: /get-started/workshop/
+  - title: Docker concepts
-  icon: desk
+    description: Gain a better understanding of foundational Docker concepts.
+    link: /get-started/docker-concepts/the-basics/what-is-a-container/
+    icon: foundation
+  - title: Docker workshop
+    description: Get guided through a 45-minute workshop to learn about Docker.
+    link: /get-started/workshop/
+    icon: desk
 ---
 
 If you're new to Docker, this section guides you through the essential resources to get started.

content/guides/_index.md

@@ -2,31 +2,32 @@
 title: Guides
 keywords: Docker guides
 description: Explore the Docker guides
-notoc: true
+params:
+  icon: developer_guide
+  notoc: true
+  dive-deeper:
+  - title: Language-specific guides
+    description: Learn how to containerize, develop, and test language-specific apps using Docker.
+    link: /language/
+    icon: code
+  - title: Use-case guides
+    description: Walk through practical Docker applications for specific scenarios.
+    link: /guides/use-case/
+    icon: task
+  - title: Deployment and Orchestration
+    description: Deploy and manage Docker containers at scale.
+    link: /guides/deployment-orchestration/orchestration/
+    icon: workspaces
+  resources:
+  - title: Educational resources
+    description: Explore diverse Docker training and hands-on experiences.
+    link: /guides/resources/
+    icon: book
+  - title: Contribute to Docker's docs
+    description: Learn how to help contribute to Docker docs.
+    link: /contribute/
+    icon: edit
 layout: wide
-dive-deeper:
-- title: Language-specific guides
-  description: Learn how to containerize, develop, and test language-specific apps using Docker.
-  link: /language/
-  icon: code
-- title: Use-case guides
-  description: Walk through practical Docker applications for specific scenarios.
-  link: /guides/use-case/
-  icon: task
-- title: Deployment and Orchestration
-  description: Deploy and manage Docker containers at scale.
-  link: /guides/deployment-orchestration/orchestration/
-  icon: workspaces
-
-resources:
-- title: Educational resources
-  description: Explore diverse Docker training and hands-on experiences.
-  link: /guides/resources/
-  icon: book
-- title: Contribute to Docker's docs
-  description: Learn how to help contribute to Docker docs.
-  link: /contribute/
-  icon: edit
 ---
 
 This section contains more advanced guides to help you learn how Docker can optimize your development workflows.

content/learning-paths/_index.md

@@ -3,6 +3,8 @@ title: Learning paths
 description: |
   Docker Learning Paths offer structured guides to help you master Docker.
 keywords: docker, learning, paths, tutorials, resources
+params:
+  icon: "school"
 ---
 
 <p class="w-2/3">

content/manuals/_index.md

@@ -5,62 +5,64 @@ keywords: docker, docs, manuals, products, user guides, how-to
 # hard-code the URL of this page
 url: /manuals/
 layout: wide
-notoc: true
+params:
-development:
+  icon: description
-- title: Docker Desktop
+  notoc: true
-  description: Your command center for container development.
+  development:
-  icon: /assets/icons/Whale.svg
+  - title: Docker Desktop
-  link: /desktop/
+    description: Your command center for container development.
-- title: Docker Compose
+    icon: /assets/icons/Whale.svg
-  description: Define and run multi-container applications.
+    link: /desktop/
-  icon: /assets/icons/Compose.svg
+  - title: Docker Compose
-  link: /compose/
+    description: Define and run multi-container applications.
-- title: Docker Build
+    icon: /assets/icons/Compose.svg
-  description: Build and ship any application anywhere.
+    link: /compose/
-  icon: build
+  - title: Docker Build
-  link: /build/
+    description: Build and ship any application anywhere.
-- title: Docker Engine
+    icon: build
-  description: The industry-leading container runtime.
+    link: /build/
-  icon: developer_board
+  - title: Docker Engine
-  link: /engine/
+    description: The industry-leading container runtime.
-- title: Docker Extensions
+    icon: developer_board
-  description: Customize your Docker Desktop workflow.
+    link: /engine/
-  icon: extension
+  - title: Docker Extensions
-  link: /extensions/
+    description: Customize your Docker Desktop workflow.
-services:
+    icon: extension
-- title: Docker Hub
+    link: /extensions/
-  description: Discover, share, and integrate container images
+  services:
-  icon: hub
+  - title: Docker Hub
-  link: /docker-hub/
+    description: Discover, share, and integrate container images
-- title: Docker Scout
+    icon: hub
-  description: Image analysis and policy evaluation.
+    link: /docker-hub/
-  icon: /assets/icons/Scout.svg
+  - title: Docker Scout
-  link: /scout/
+    description: Image analysis and policy evaluation.
-- title: Trusted content
+    icon: /assets/icons/Scout.svg
-  description: Curated, high-quality content from trusted sources.
+    link: /scout/
-  icon: verified
+  - title: Trusted content
-  link: /trusted-content/
+    description: Curated, high-quality content from trusted sources.
-- title: Build Cloud
+    icon: verified
-  description: Build your images faster in the cloud.
+    link: /trusted-content/
-  icon: /assets/images/logo-build-cloud.svg
+  - title: Build Cloud
-  link: /build-cloud/
+    description: Build your images faster in the cloud.
-admin:
+    icon: /assets/images/logo-build-cloud.svg
-- title: Administration
+    link: /build-cloud/
-  description: Centralized observability for companies and organizations.
+  admin:
-  icon: admin_panel_settings
+  - title: Administration
-  link: /admin/
+    description: Centralized observability for companies and organizations.
-- title: Security
+    icon: admin_panel_settings
-  description: Security guardrails for both administrators and developers.
+    link: /admin/
-  icon: lock
+  - title: Security
-  link: /security/
+    description: Security guardrails for both administrators and developers.
-- title: Billing
+    icon: lock
-  description: Manage billing and payment methods.
+    link: /security/
-  icon: payments
+  - title: Billing
-  link: /billing/
+    description: Manage billing and payment methods.
-- title: Subscription
+    icon: payments
-  description: Commercial use licenses for Docker products.
+    link: /billing/
-  icon: card_membership
+  - title: Subscription
-  link: /subscription/
+    description: Commercial use licenses for Docker products.
+    icon: card_membership
+    link: /subscription/
 ---
 
 This section contains user guides on how to install, set up, configure, and use

content/reference/_index.md

@@ -1,44 +1,47 @@
 ---
 title: Reference documentation
+linkTitle: Reference
 layout: wide
 description: Find reference documentation for the Docker platform’s various APIs, CLIs, and file formats
-notoc: true
+params:
-grid_files:
-- title: Dockerfile
-  description: Defines the contents and startup behavior of a single container.
-  icon: edit_document
-  link: /reference/dockerfile/
-- title: Compose file
-  description: Defines a multi-container application.
-  icon: polyline
-  link: /reference/compose-file/
-grid_clis:
-- title: Docker CLI
-  description: The main Docker CLI, includes all `docker` commands.
   icon: terminal
-  link: /reference/cli/docker/
+  notoc: true
-- title: Compose CLI
+  grid_files:
-  description: The CLI for Docker Compose, for building and running multi-container
+  - title: Dockerfile
-    applications.
+    description: Defines the contents and startup behavior of a single container.
-  icon: subtitles
+    icon: edit_document
-  link: /reference/cli/docker/compose/
+    link: /reference/dockerfile/
-- title: Daemon CLI (dockerd)
+  - title: Compose file
-  description: Persistent process that manages containers.
+    description: Defines a multi-container application.
-  icon: developer_board
+    icon: polyline
-  link: /reference/cli/dockerd/
+    link: /reference/compose-file/
-grid_apis:
+  grid_clis:
-- title: Engine API
+  - title: Docker CLI
-  description: The main API for Docker, provides programmatic access to a daemon.
+    description: The main Docker CLI, includes all `docker` commands.
-  icon: api
+    icon: terminal
-  link: /reference/api/engine/
+    link: /reference/cli/docker/
-- title: Docker Hub API
+  - title: Compose CLI
-  description: API to interact with Docker Hub.
+    description: The CLI for Docker Compose, for building and running multi-container
-  icon: communities
+      applications.
-  link: /reference/api/hub/latest/
+    icon: subtitles
-- title: DVP Data API
+    link: /reference/cli/docker/compose/
-  description: API for Docker Verified Publishers to fetch analytics data.
+  - title: Daemon CLI (dockerd)
-  icon: area_chart
+    description: Persistent process that manages containers.
-  link: /reference/api/hub/dvp/
+    icon: developer_board
+    link: /reference/cli/dockerd/
+  grid_apis:
+  - title: Engine API
+    description: The main API for Docker, provides programmatic access to a daemon.
+    icon: api
+    link: /reference/api/engine/
+  - title: Docker Hub API
+    description: API to interact with Docker Hub.
+    icon: communities
+    link: /reference/api/hub/latest/
+  - title: DVP Data API
+    description: API for Docker Verified Publishers to fetch analytics data.
+    icon: area_chart
+    link: /reference/api/hub/dvp/
 ---
 
 This section includes the reference documentation for the Docker platform's

hugo_stats.json

@@ -234,6 +234,7 @@
       "dark:hover:bg-blue-dark-500",
       "dark:hover:bg-gray-dark-200",
       "dark:hover:bg-gray-dark-500",
+      "dark:hover:text-blue-dark",
       "dark:hover:text-white",
       "dark:prose-invert",
       "dark:ring-gray-dark-400",
@@ -379,7 +380,9 @@
       "md:max-w-[66%]",
       "md:px-20",
       "md:scale-100",
+      "md:sticky",
       "md:text-sm",
+      "md:top-16",
       "md:w-[300px]",
       "md:z-auto",
       "min-h-screen",
@@ -426,6 +429,7 @@
       "pl-5",
       "place-items-center",
       "placeholder:text-white",
+      "pr-2",
       "prose",
       "pt-0",
       "px-1",
@@ -445,7 +449,6 @@
       "right-8",
       "ring-[1.5px]",
       "ring-gray-light-200",
-      "rotate-180",
       "rotate-45",
       "rounded",
       "rounded-[6px]",
@@ -470,7 +473,6 @@
       "sm:items-center",
       "sm:w-full",
       "space-x-2",
-      "space-y-2",
       "space-y-4",
       "sticky",
       "svg-container",
@@ -513,9 +515,7 @@
       "top-3",
       "top-6",
       "top-full",
-      "transform",
       "transition",
-      "transition-transform",
       "truncate",
       "underline",
       "underline-offset-2",

layouts/_default/baseof.html

@@ -11,7 +11,7 @@
   <main class="relative flex w-full max-w-[1920px]">
     <!-- Sidebar -->
     <div x-data
-      class="md:h-[calc(100vh - 64px)] sticky top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 sm:w-full md:z-auto md:block md:w-[300px]"
+      class="md:h-[calc(100vh - 64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
       :class="{ 'hidden': ! $store.showSidebar }">
       <!-- Gray backdrop on small screens -->
       <div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"
@@ -23,22 +23,39 @@
           Back
         </button>
         <!-- Main navigation -->
-        <div x-data="{ expanded: false }">
+        <div class="py-2 px-4" x-data="{ expanded: false }">
-          <div class="px-4 flex w-full items-center justify-between">
+          <div class="flex w-full items-center justify-between">
-            <a class="text-lg flex-grow" href="{{ .FirstSection.Permalink }}">{{ .FirstSection.LinkTitle }}</a>
+            <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ .FirstSection.Permalink }}">
+              {{- with .FirstSection.Params.icon }}
+                <span class="pr-2 icon-sm icon-svg">
+                  {{- partialCached "icon.html" . . -}}
+                </span>
+              {{- end }}
+              {{- .FirstSection.LinkTitle -}}
+            </a>
             <button @click="expanded = !expanded" class="rounded hover:bg-gray-light-300 hover:dark:bg-gray-dark-300">
-              <span :class="{ 'rotate-180': expanded }" class="icon-svg transform transition-transform">
+              <span x-show="! expanded" class="icon-svg">
                 {{ partialCached "icon" "expand_more" "expand_more" }}
               </span>
+              <span x-cloak x-show="expanded" class="icon-svg">
+                {{ partialCached "icon" "expand_less" "expand_less" }}
+              </span>
             </button>
           </div>
-          <ul x-cloak x-show="expanded" class="mt-2 space-y-2 px-2">
+          <ul x-cloak x-show="expanded" class="py-4 space-y-4">
             {{ range site.Menus.main }}
-            {{ if ne page.FirstSection .Page }}
+              {{ if ne page.FirstSection .Page }}
-            <li>
+              <li>
-              <a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
+                <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ .URL }}">
-            </li>
+                  {{- with .Page.Params.icon }}
-            {{ end }}
+                    <span class="pr-2 icon-sm icon-svg">
+                      {{- partialCached "icon.html" . . -}}
+                    </span>
+                  {{- end }}
+                  {{- .Name }}
+                </a>
+              </li>
+              {{ end }}
             {{ end }}
           </ul>
         </div>

layouts/partials/sidebar.html

@@ -63,7 +63,7 @@
 
 {{ define "renderSingle" }}
   {{- if .Params.goto }}
-    <li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark">
+    <li class="px-4 hover:text-blue-light hover:dark:text-blue-dark">
       <a class="py-2 w-full truncate block"
          href="{{ .Params.goto }}"
          title="{{ .LinkTitle }}">
@@ -72,7 +72,7 @@
     </li>
   {{- else }}
     {{ $isCurrent := eq page . }}
-    <li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark
+    <li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark
       {{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
       <a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block"
         href="{{ .Permalink }}" title="{{ .LinkTitle }}">