From 0cb6f5ea075f0f220f8acca214686996a1305e95 Mon Sep 17 00:00:00 2001
From: Arthur <arthur.flageul@docker.com>
Date: Thu, 24 Jul 2025 14:58:52 +0200
Subject: [PATCH] css: display main menu on mobile only (#23147)

Display the main menu widget only on smaller widths & touch up
appearance.

<img width="272" height="206" alt="Screenshot 2025-07-24 at 11 02 21"
src="https://github.com/user-attachments/assets/f7ad62cc-b513-4185-8ab7-727cc698fb1b"
/>
---
 layouts/partials/sidebar/mainnav.html  | 6 +++---
 layouts/partials/sidebar/sections.html | 5 +----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/layouts/partials/sidebar/mainnav.html b/layouts/partials/sidebar/mainnav.html
index 6e98c52845..17fb9d2bfd 100644
--- a/layouts/partials/sidebar/mainnav.html
+++ b/layouts/partials/sidebar/mainnav.html
@@ -6,7 +6,7 @@
   */
 -}}
 <!-- Main navigation for the sidebar -->
-<div class="px-4 py-2" x-data="{ expanded: false }">
+<div class="px-2 py-4 md:hidden text-gray-700 dark:text-gray-200 card " x-data="{ expanded: false }">
   <div class="flex w-full items-center justify-between">
     <!-- Current section: use menu, fall back to current section or page -->
     {{- $curr := .FirstSection }}
@@ -31,7 +31,7 @@
     </a>
     <button
       @click="expanded = !expanded"
-      class="rounded-sm hover:bg-gray-300 hover:dark:bg-gray-300"
+      class="rounded-sm hover:bg-gray-200 hover:dark:bg-gray-800"
     >
       <span x-show="! expanded" class="icon-svg">
         {{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}
@@ -58,4 +58,4 @@
     {{ end }}
   </ul>
 </div>
-<hr class="m-2 text-gray-200 dark:text-gray-500" />
+
diff --git a/layouts/partials/sidebar/sections.html b/layouts/partials/sidebar/sections.html
index ff7b3cb0ec..0e4b2b9771 100644
--- a/layouts/partials/sidebar/sections.html
+++ b/layouts/partials/sidebar/sections.html
@@ -8,10 +8,7 @@
   */
 -}}
 <!-- 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>
+<nav class="navbar-font flex flex-col mt-1 mx-1">
   <ul>
     {{ template "renderChildren" .FirstSection }}
   </ul>