[FFmpeg-devel] [PATCH v2 1/2] web: replace mobile sidebar with bottom drawer

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

On mobile (<768px), the sidebar now opens as a bottom drawer (33vh) instead of pushing page content right and causing horizontal scroll overflow.

Closes via X button, hamburger toggle, Escape key, or clicking outside on page.

Users can now close the sidebar without scrolling to the top of the page to reach the hamburger icon.

Includes branded header with centered logo and accessible close button.

Desktop sidebar unchanged.
---
 htdocs/css/simple-sidebar.css | 98 ++++++++++++++++++++++++++++++++---
 src/template_footer2          | 29 +++++++++--
 src/template_head2            |  7 +++
 3 files changed, 123 insertions(+), 11 deletions(-)

diff --git a/htdocs/css/simple-sidebar.css b/htdocs/css/simple-sidebar.css
index 71a8a39..a19c2f1 100644
--- a/htdocs/css/simple-sidebar.css
+++ b/htdocs/css/simple-sidebar.css
@@ -89,6 +89,10 @@
   padding: 20px;
 }
 
+.drawer-header {
+  display: none;
+}
+
 @media (max-width:767px) {
 
 #wrapper {
@@ -97,23 +101,101 @@
 
 #sidebar-wrapper {
   left: 0;
-}
-
-#wrapper.active {
-  position: relative;
-  left: 200px;
+  right: 0;
+  bottom: 0;
+  top: auto;
+  width: 100%;
+  height: 33.33vh;
+  margin-left: 0;
+  text-align: center;
+  transform: translateY(100%);
+  transition: transform 0.4s ease;
 }
 
 #wrapper.active #sidebar-wrapper {
-  left: 200px;
-  width: 200px;
-  transition: all 0.4s ease 0s;
+  transform: translateY(0);
 }
 
 #menu-toggle {
   display: inline-block;
 }
 
+.drawer-header {
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 1001;
+  height: 44px;
+  background-color: inherit;
+}
+
+.drawer-brand {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #999;
+  text-decoration: none;
+  font-size: 18px;
+  white-space: nowrap;
+}
+
+.drawer-brand img {
+  vertical-align: text-top;
+  opacity: 0.6;
+  margin-right: 8px;
+}
+
+.drawer-brand:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+.drawer-brand:hover img {
+  opacity: 1;
+}
+
+#drawer-close-btn {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+  font-size: 20px;
+  text-decoration: none;
+  padding: 4px 8px;
+  line-height: 1;
+}
+
+#drawer-close-btn:hover,
+#drawer-close-btn:focus {
+  color: #fff;
+}
+
+.sidebar-nav {
+  position: static;
+  width: auto;
+  display: inline-block;
+  text-align: left;
+  padding-bottom: 40px;
+}
+
+.sidebar-nav li {
+  text-indent: 0;
+}
+
+.sidebar-nav li a span {
+  margin-left: 10px !important;
+}
+
+.sidebar-nav li ul li {
+  padding-left: 20px;
+}
+
+.sidebar-nav > .sidebar-brand {
+  display: none;
+}
+
 .inset {
   padding: 15px;
 }
diff --git a/src/template_footer2 b/src/template_footer2
index 735d540..c074b81 100644
--- a/src/template_footer2
+++ b/src/template_footer2
@@ -1,9 +1,32 @@
     <!-- Custom JavaScript for the Menu Toggle -->
     <script>
-      $("#menu-toggle").click(function(e) {
+      (function($) {
+        var $wrapper = $("#wrapper");
+
+        $("#menu-toggle").click(function(e) {
+          e.preventDefault();
+          $wrapper.toggleClass("active");
+        });
+
+        $("#drawer-close-btn").click(function(e) {
           e.preventDefault();
-          $("#wrapper").toggleClass("active");
-      });
+          $wrapper.removeClass("active");
+        });
+
+        $(document).keyup(function(e) {
+          if (e.keyCode === 27) {
+            $wrapper.removeClass("active");
+          }
+        });
+
+        $(document).click(function(e) {
+          if (!$wrapper.hasClass("active")) return;
+          var $target = $(e.target);
+          if ($target.closest("#sidebar-wrapper").length) return;
+          if ($target.closest("#menu-toggle").length) return;
+          $wrapper.removeClass("active");
+        });
+      })(jQuery);
     </script>
 
   </body>
diff --git a/src/template_head2 b/src/template_head2
index 4f61b62..48e205a 100644
--- a/src/template_head2
+++ b/src/template_head2
@@ -12,6 +12,13 @@
     <div id="wrapper">
 
       <nav id="sidebar-wrapper">
+        <div class="drawer-header">
+          <a class="drawer-brand" href=".">
+            <img src="img/ffmpeg3d_white_20.png" alt="" />
+            FFmpeg
+          </a>
+          <a href="#" id="drawer-close-btn" role="button" aria-label="Close navigation menu">&times;</a>
+        </div>
         <ul class="sidebar-nav">
           <li class="sidebar-brand"><a href=".">
               <img src="img/ffmpeg3d_white_20.png" alt="FFmpeg" />
-- 
2.51.0

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