fix(docs): responsive docs menu hidden between md-lg widths

modules/blox-tailwind/assets/css/components/sidebar-left.css

@@ -1,15 +1,16 @@
-@media (max-width: 767px) {
+/* Match Tailwind lg (default 1024px): https://tailwindcss.com/docs/screens */
+@media (max-width: 1024px) {
   .hb-sidebar-container {
     @apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain;
     contain: layout style;
-    backface-visibility: hidden;
     transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
+    backface-visibility: hidden;
   }
 }
 
 .hb-sidebar-container {
-  @apply flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start;
+  @apply flex flex-col print:hidden lg:top-16 lg:shrink-0 lg:w-64 lg:self-start;
 
   li > div {
     @apply h-0;

modules/blox-tailwind/assets/js/hb-sidebar.js

@@ -31,12 +31,12 @@ document.addEventListener('DOMContentLoaded', function () {
     // See `hb-nav.js` - it handles the default behavior (irrespective of if sidebar is shown).
 
     // When menu is open, show the navigation sidebar
-    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
-    sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+    sidebarContainer.classList.toggle('max-lg:[transform:translate3d(0,-100%,0)]');
+    sidebarContainer.classList.toggle('max-lg:[transform:translate3d(0,0,0)]');
 
     // When menu is open, prevent body from scrolling
     document.body.classList.toggle('overflow-hidden');
-    document.body.classList.toggle('md:overflow-auto');
+    document.body.classList.toggle('lg:overflow-auto');
   }
 
   menu.addEventListener('click', (e) => {

modules/blox-tailwind/layouts/partials/components/sidebar.html

@@ -2,22 +2,22 @@
 
 {{- $no_sidebar := .no_sidebar | default true -}}
 {{- $pad_sidebar := true -}}
-{{- $sidebar_dynamic_class := cond $no_sidebar (cond $pad_sidebar "md:hidden xl:block" "md:hidden") "md:sticky" -}}
+{{- $sidebar_dynamic_class := cond $no_sidebar (cond $pad_sidebar "lg:hidden xl:block" "lg:hidden") "lg:sticky" -}}
 
 {{- $root_section := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
 {{- $page_url := $context.RelPermalink -}}
 
 {{/* Classes appended to `hb-sidebar-mobile-menu` are modified via sidebar JS, so do not @apply them to `hb-sidebar-mobile-menu` */}}
 <div class="hb-sidebar-mobile-menu fixed inset-0 z-10 bg-white dark:bg-black/80 hidden"></div>
 <!-- Explicit `transform` class as we toggle it in JS -->
-<aside class="hb-sidebar-container max-md:[transform:translate3d(0,-100%,0)] {{ $sidebar_dynamic_class }}">
+<aside class="hb-sidebar-container max-lg:[transform:translate3d(0,-100%,0)] {{ $sidebar_dynamic_class }}">
   <!-- Search bar on small screen -->
-  <div class="px-4 pt-4 md:hidden">
+  <div class="px-4 pt-4 lg:hidden">
     <!-- Currently, use the navbar search button instead -->
     {{/* partial "search.html" */}}
   </div>
-  <div class="hb-scrollbar md:h-[calc(100vh-var(--navbar-height))]">
-    <ul class="flex flex-col gap-1 md:hidden">
+  <div class="hb-scrollbar lg:h-[calc(100vh-var(--navbar-height))]">
+    <ul class="flex flex-col gap-1 lg:hidden">
       <!-- Navigation links -->
       {{ template "menu-links" (dict "context" site.Home "pageURL" $page_url "page" $context "toc" true) -}}
       {{ template "custom-menu-links" }}
@@ -27,7 +27,7 @@
     {{- if $no_sidebar -}}
       <div class="max-xl:hidden h-0 w-64 shrink-0"></div>
     {{- else -}}
-      <ul class="flex flex-col gap-1 max-md:hidden">
+      <ul class="flex flex-col gap-1 max-lg:hidden">
         {{ template "menu-links" (dict "context" $root_section "page" $context  "pageURL" $page_url) }}
         {{ template "custom-menu-links" }}
       </ul>