From cc97ab060097e2bce7c106fe1c4a14c05255eac0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sun, 21 Jan 2024 13:39:15 +0100
Subject: [PATCH] menu: use --MENU-WIDTH-S to adjust mobile flyout #761

---
 exampleSite/content/basics/customization/_index.en.md | 3 ++-
 exampleSite/content/basics/migration/_index.en.md     | 2 ++
 static/css/theme.css                                  | 7 +++++--
 static/css/variant-internal.css                       | 1 +
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md
index 4f6a602649..cae1274d98 100644
--- a/exampleSite/content/basics/customization/_index.en.md
+++ b/exampleSite/content/basics/customization/_index.en.md
@@ -129,10 +129,11 @@ The menu width adjusts automatically for different screen sizes.
 
 The values for the screen width breakpoints aren't configurable.
 
-If you want to adjust the menu width you can define the following CSS variables in your `custom-header.html`. Note that `--MENU-WIDTH-S` doesn't exist as the menu is always hidden for small screen sizes.
+If you want to adjust the menu width you can define the following CSS variables in your `custom-header.html`. Note that `--MENU-WIDTH-S` applies to the menu flyout width in mobile mode for small screen sizes.
 
 ````css
 :root {
+    --MENU-WIDTH-S: 14.375rem;
     --MENU-WIDTH-M: 14.375rem;
     --MENU-WIDTH-L: 18.75rem;
 }
diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 5024726543..e3a4e5e8ef 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -36,6 +36,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} On taxonomy and term pages you can now use prev/next navigation as within the normal page structure.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} In additiion to the existing [menu width customization](basics/customization#change-the-menu-width), it is now alsow possible to set the width of the menu flyout for for small screen sizes with the `--MENU-WIDTH-S` CSS property.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Improvements for accessibility when tabbing thru the page for images, links and tab handles.
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The themes [config](basics/configuration) and [frontmatter](cont/frontmatter) options received a comprehensive documentation update. In addition the theme switched from `config.toml` to `hugo.toml`.
diff --git a/static/css/theme.css b/static/css/theme.css
index 5e47fd126b..77b32dfb77 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1158,7 +1158,10 @@ html[dir="rtl"] .topbar-button-next i {
 @media screen and (max-width: 47.999rem) {
     /* we don't support sidebar flyout in mobile */
     .mobile-support #R-sidebar {
-        inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-M) );
+        inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-S) );
+        min-width: var(--INTERNAL-MENU-WIDTH-S);
+        max-width: var(--INTERNAL-MENU-WIDTH-S);
+        width: var(--INTERNAL-MENU-WIDTH-S);
     }
     .mobile-support #navshow{
         display: inline;
@@ -1179,7 +1182,7 @@ html[dir="rtl"] .topbar-button-next i {
         z-index: 90;
     }
     .mobile-support.sidebar-flyout #R-body {
-        margin-inline-start: var(--INTERNAL-MENU-WIDTH-M);
+        margin-inline-start: var(--INTERNAL-MENU-WIDTH-S);
         overflow: hidden;
     }
     .mobile-support.sidebar-flyout #R-body-overlay{
diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css
index 9bd7600a29..cea4eb4031 100644
--- a/static/css/variant-internal.css
+++ b/static/css/variant-internal.css
@@ -109,6 +109,7 @@
     --INTERNAL-PRINT-OPENAPI-theme: var(--PRINT-OPENAPI-theme, var(--PRINT-SWAGGER-theme, light));
     --INTERNAL-PRINT-OPENAPI-CODE-theme: var(--PRINT-OPENAPI-CODE-theme, idea);
 
+    --INTERNAL-MENU-WIDTH-S: var(--MENU-WIDTH-S, 14.375rem);
     --INTERNAL-MENU-WIDTH-M: var(--MENU-WIDTH-M, 14.375rem);
     --INTERNAL-MENU-WIDTH-L: var(--MENU-WIDTH-L, 18.75rem);
 }