[FFmpeg-devel] [PATCH] prevent sidebar from causing horizontal page scroll on mobile

[Rito Rhymes via ffmpeg-devel <ffmpeg-devel@ffmpeg.org>]

When the sidebar is opened on mobile devices, it currently pushes the page content to the right, expanding the entire page width and causing horizontal scroll.

Horizontal page scrolling on mobile can be disorienting for users, impede a11y and lead to unpredictable browser behaviors.

This patch modifies the sidebar behavior on mobile to position it over / occluding the left side of the page, instead of pushing the content aside.

Additionally, because the sidebar now directly occludes page content and the hamburger icon:
- an additional overlay element covers the content to enforce separation and focus
- a close button is added to the sidebar (on mobile only) for clear dismissal

Tapping the overlay or the close button will close the sidebar and remove the overlay.

---
 htdocs/css/simple-sidebar.css | 56 ++++++++++++++++++++++++++++++-----
 src/template_footer2          | 12 +++++++-
 src/template_head2            |  3 ++
 3 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/htdocs/css/simple-sidebar.css b/htdocs/css/simple-sidebar.css
index 71a8a39..d0d6306 100644
--- a/htdocs/css/simple-sidebar.css
+++ b/htdocs/css/simple-sidebar.css
@@ -89,6 +89,15 @@
   padding: 20px;
 }
 
+/* Overlay and close button - hidden on desktop */
+.sidebar-overlay {
+  display: none;
+}
+
+.sidebar-close {
+  display: none;
+}
+
 @media (max-width:767px) {
 
 #wrapper {
@@ -97,17 +106,50 @@
 
 #sidebar-wrapper {
   left: 0;
+  margin-left: 0;
+  height: 100vh;
+  transform: translateX(-200px);
+  transition: transform 0.3s ease;
+  z-index: 1001;
 }
 
-#wrapper.active {
-  position: relative;
-  left: 200px;
+#wrapper.active #sidebar-wrapper {
+  transform: translateX(0);
 }
 
-#wrapper.active #sidebar-wrapper {
-  left: 200px;
-  width: 200px;
-  transition: all 0.4s ease 0s;
+.sidebar-close {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #999;
+  font-size: 24px;
+  text-decoration: none;
+  z-index: 1001;
+  line-height: 1;
+  padding: 20px;
+}
+
+.sidebar-close:hover,
+.sidebar-close:active,
+.sidebar-close:focus {
+  color: #fff;
+  text-decoration: none;
+}
+
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+#wrapper.active .sidebar-overlay {
+  display: block;
 }
 
 #menu-toggle {
diff --git a/src/template_footer2 b/src/template_footer2
index 735d540..958b963 100644
--- a/src/template_footer2
+++ b/src/template_footer2
@@ -1,8 +1,18 @@
     <!-- Custom JavaScript for the Menu Toggle -->
     <script>
+      function openSidebar() {
+          $("#wrapper").addClass("active");
+      }
+      function closeSidebar() {
+          $("#wrapper").removeClass("active");
+      }
       $("#menu-toggle").click(function(e) {
           e.preventDefault();
-          $("#wrapper").toggleClass("active");
+          openSidebar();
+      });
+      $(".sidebar-close, .sidebar-overlay").click(function(e) {
+          e.preventDefault();
+          closeSidebar();
       });
     </script>
 
diff --git a/src/template_head2 b/src/template_head2
index 4f61b62..8277e3f 100644
--- a/src/template_head2
+++ b/src/template_head2
@@ -12,6 +12,7 @@
     <div id="wrapper">
 
       <nav id="sidebar-wrapper">
+        <a class="sidebar-close" href="#">&times;</a>
         <ul class="sidebar-nav">
           <li class="sidebar-brand"><a href=".">
               <img src="img/ffmpeg3d_white_20.png" alt="FFmpeg" />
@@ -54,6 +55,8 @@
         </ul>
       </nav>
 
+      <div class="sidebar-overlay"></div>
+
       <div id="page-content-wrapper">
         <header class="content-header">
           <h1>
-- 
2.51.0

_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org