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,27 +2,29 @@
 title: Get started
 keywords: Docker, get started
 description: Get started with Docker
-notoc: true
 layout: wide
-get-started:
+params:
-- title: Get Docker
+  icon: download
+  notoc: true
+  get-started:
+  - title: Get Docker
     description: Choose the best installation path for your setup.
     link: /get-started/get-docker/
     icon: download
-- title: What is Docker?
+  - title: What is Docker?
     description: Learn about the Docker platform.
     link: /get-started/docker-overview/
     icon: summarize
-get-started2:
+  get-started2:
-- title: Introduction
+  - title: Introduction
     description: Get started with the basics and the benefits of containerizing your applications.
     link: /get-started/introduction/
     icon: rocket
-- title: Docker concepts
+  - title: Docker concepts
     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
+  - title: Docker workshop
     description: Get guided through a 45-minute workshop to learn about Docker.
     link: /get-started/workshop/
     icon: desk

content/guides/_index.md

@@ -2,31 +2,32 @@
 title: Guides
 keywords: Docker guides
 description: Explore the Docker guides
-notoc: true
+params:
-layout: wide
+  icon: developer_guide
-dive-deeper:
+  notoc: true
-- title: Language-specific guides
+  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
+  - title: Use-case guides
     description: Walk through practical Docker applications for specific scenarios.
     link: /guides/use-case/
     icon: task
-- title: Deployment and Orchestration
+  - title: Deployment and Orchestration
     description: Deploy and manage Docker containers at scale.
     link: /guides/deployment-orchestration/orchestration/
     icon: workspaces
-
+  resources:
-resources:
+  - title: Educational resources
-- title: Educational resources
     description: Explore diverse Docker training and hands-on experiences.
     link: /guides/resources/
     icon: book
-- title: Contribute to Docker's docs
+  - title: Contribute to Docker's docs
     description: Learn how to help contribute to Docker docs.
     link: /contribute/
     icon: edit
+layout: wide
 ---
 
 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,59 +5,61 @@ 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
+  development:
+  - title: Docker Desktop
     description: Your command center for container development.
     icon: /assets/icons/Whale.svg
     link: /desktop/
-- title: Docker Compose
+  - title: Docker Compose
     description: Define and run multi-container applications.
     icon: /assets/icons/Compose.svg
     link: /compose/
-- title: Docker Build
+  - title: Docker Build
     description: Build and ship any application anywhere.
     icon: build
     link: /build/
-- title: Docker Engine
+  - title: Docker Engine
     description: The industry-leading container runtime.
     icon: developer_board
     link: /engine/
-- title: Docker Extensions
+  - title: Docker Extensions
     description: Customize your Docker Desktop workflow.
     icon: extension
     link: /extensions/
-services:
+  services:
-- title: Docker Hub
+  - title: Docker Hub
     description: Discover, share, and integrate container images
     icon: hub
     link: /docker-hub/
-- title: Docker Scout
+  - title: Docker Scout
     description: Image analysis and policy evaluation.
     icon: /assets/icons/Scout.svg
     link: /scout/
-- title: Trusted content
+  - title: Trusted content
     description: Curated, high-quality content from trusted sources.
     icon: verified
     link: /trusted-content/
-- title: Build Cloud
+  - title: Build Cloud
     description: Build your images faster in the cloud.
     icon: /assets/images/logo-build-cloud.svg
     link: /build-cloud/
-admin:
+  admin:
-- title: Administration
+  - title: Administration
     description: Centralized observability for companies and organizations.
     icon: admin_panel_settings
     link: /admin/
-- title: Security
+  - title: Security
     description: Security guardrails for both administrators and developers.
     icon: lock
     link: /security/
-- title: Billing
+  - title: Billing
     description: Manage billing and payment methods.
     icon: payments
     link: /billing/
-- title: Subscription
+  - title: Subscription
     description: Commercial use licenses for Docker products.
     icon: card_membership
     link: /subscription/

content/reference/_index.md

@@ -1,41 +1,44 @@
 ---
 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:
+  icon: terminal
-- title: Dockerfile
+  notoc: true
+  grid_files:
+  - title: Dockerfile
     description: Defines the contents and startup behavior of a single container.
     icon: edit_document
     link: /reference/dockerfile/
-- title: Compose file
+  - title: Compose file
     description: Defines a multi-container application.
     icon: polyline
     link: /reference/compose-file/
-grid_clis:
+  grid_clis:
-- title: Docker CLI
+  - title: Docker CLI
     description: The main Docker CLI, includes all `docker` commands.
     icon: terminal
     link: /reference/cli/docker/
-- title: Compose CLI
+  - title: Compose CLI
     description: The CLI for Docker Compose, for building and running multi-container
       applications.
     icon: subtitles
     link: /reference/cli/docker/compose/
-- title: Daemon CLI (dockerd)
+  - title: Daemon CLI (dockerd)
     description: Persistent process that manages containers.
     icon: developer_board
     link: /reference/cli/dockerd/
-grid_apis:
+  grid_apis:
-- title: Engine API
+  - 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
+  - title: Docker Hub API
     description: API to interact with Docker Hub.
     icon: communities
     link: /reference/api/hub/latest/
-- title: DVP Data API
+  - title: DVP Data API
     description: API for Docker Verified Publishers to fetch analytics data.
     icon: area_chart
     link: /reference/api/hub/dvp/

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,20 +23,37 @@
           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 }}
               <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 }}">
+                  {{- with .Page.Params.icon }}
+                    <span class="pr-2 icon-sm icon-svg">
+                      {{- partialCached "icon.html" . . -}}
+                    </span>
+                  {{- end }}
+                  {{- .Name }}
+                </a>
               </li>
               {{ end }}
             {{ end }}

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 }}">