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="#">×</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 -- [email protected]
To unsubscribe send an email to [email protected]
