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,8 +2,10 @@
 title: Get started
 keywords: Docker, get started
 description: Get started with Docker
-notoc: true
 layout: wide
+params:
+  icon: download
+  notoc: true
   get-started:
   - title: Get Docker
     description: Choose the best installation path for your setup.

content/guides/_index.md

@@ -2,8 +2,9 @@
 title: Guides
 keywords: Docker guides
 description: Explore the Docker guides
+params:
+  icon: developer_guide
   notoc: true
-layout: wide
   dive-deeper:
   - title: Language-specific guides
     description: Learn how to containerize, develop, and test language-specific apps using Docker.
@@ -17,7 +18,6 @@ dive-deeper:
     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.
@@ -27,6 +27,7 @@ resources:
     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,6 +5,8 @@ keywords: docker, docs, manuals, products, user guides, how-to
 # hard-code the URL of this page
 url: /manuals/
 layout: wide
+params:
+  icon: description
   notoc: true
   development:
   - title: Docker Desktop

content/reference/_index.md

@@ -1,7 +1,10 @@
 ---
 title: Reference documentation
+linkTitle: Reference
 layout: wide
 description: Find reference documentation for the Docker platform’s various APIs, CLIs, and file formats
+params:
+  icon: terminal
   notoc: true
   grid_files:
   - title: Dockerfile

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