menu: use --MENU-WIDTH-S to adjust mobile flyout #761

McShelby · Jan 21, 2024 · cc97ab0 · cc97ab0
1 parent df39abc
commit cc97ab0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
 }