@knowcode/doc-builder 1.3.5 → 1.3.6

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to @knowcode/doc-builder will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.6] - 2025-07-19
+
+### Fixed
+- Fixed responsive menu toggle button not being visible on mobile devices
+- Added mobile overlay for sidebar with proper click-to-close functionality
+- Improved sidebar z-index stacking for proper mobile display
+- Added smooth transitions and shadow effects for mobile sidebar
+- Fixed body scroll prevention when mobile menu is open
+- Menu toggle button now shows close icon (X) when menu is open
+- Sidebar properly closes when clicking navigation items on mobile
+- Escape key now properly closes mobile menu and overlay
+
+### Added
+- Semi-transparent overlay background when sidebar is open on mobile
+- Visual feedback for menu toggle button state (hamburger/close icon)
+- Box shadow on mobile sidebar for better depth perception
+- Proper ARIA attributes for accessibility
+
+### Improved
+- Better mobile user experience with standard mobile navigation patterns
+- Consistent behavior across different mobile breakpoints
+- Smoother animations and transitions for mobile menu
+- Applied fixes to both default and notion-style themes
+
 ## [1.3.5] - 2025-07-19
 
 ### Fixed

package/assets/css/notion-style.css

@@ -987,6 +987,43 @@ tr:hover {
   cursor: pointer;
   color: var(--color-text-primary);
   padding: var(--space-2);
+  margin-left: var(--space-2);
+  transition: color var(--duration-fast);
+  z-index: 1001;
+}
+
+.menu-toggle:hover {
+  color: var(--color-accent-blue);
+}
+
+.menu-toggle.active i::before {
+  content: "\f00d"; /* fa-times icon */
+}
+
+/* Mobile Sidebar Overlay */
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-bg-overlay);
+  z-index: 998;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--duration-normal), visibility var(--duration-normal);
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  .sidebar-overlay {
+    display: block;
+  }
+}
+
+.sidebar-overlay.active {
+  opacity: 1;
+  visibility: visible;
 }
 
 /* Responsive Design */
@@ -994,6 +1031,8 @@ tr:hover {
   .sidebar {
     transform: translateX(-100%);
     transition: transform var(--duration-normal) var(--easing-out);
+    z-index: 999;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
   }
   
   .sidebar.open {

package/assets/css/style.css

@@ -1388,12 +1388,18 @@ blockquote {
 @media (max-width: 1024px) {
   .sidebar {
     transform: translateX(-100%);
+    z-index: 999;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
   }
   
   .sidebar.open {
     transform: translateX(0);
   }
   
+  [data-theme="dark"] .sidebar {
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
+  }
+  
   .content {
     margin-left: 0;
     padding: var(--space-xl);
@@ -1493,6 +1499,17 @@ blockquote {
   cursor: pointer;
   color: var(--text-primary);
   padding: var(--space-sm);
+  margin-left: var(--space-sm);
+  transition: color var(--transition-fast);
+  z-index: 1001;
+}
+
+.menu-toggle:hover {
+  color: var(--accent);
+}
+
+.menu-toggle.active i::before {
+  content: "\f00d"; /* fa-times icon */
 }
 
 @media (max-width: 1024px) {
@@ -1501,6 +1518,32 @@ blockquote {
   }
 }
 
+/* Mobile Sidebar Overlay */
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 998;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-base), visibility var(--transition-base);
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  .sidebar-overlay {
+    display: block;
+  }
+}
+
+.sidebar-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
 /* Search Results Dropdown */
 .search-results {
   position: absolute;

package/assets/js/main.js

@@ -511,10 +511,30 @@ function updateThemeIcon(theme) {
 // Mobile Menu Toggle
 const menuToggle = document.getElementById('menu-toggle');
 const sidebar = document.querySelector('.sidebar');
+const sidebarOverlay = document.querySelector('.sidebar-overlay');
 
 if (menuToggle) {
   menuToggle.addEventListener('click', () => {
     sidebar.classList.toggle('open');
+    sidebarOverlay.classList.toggle('active');
+    menuToggle.classList.toggle('active');
+    
+    // Prevent body scroll when menu is open
+    if (sidebar.classList.contains('open')) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+  });
+}
+
+// Close sidebar when clicking overlay
+if (sidebarOverlay) {
+  sidebarOverlay.addEventListener('click', () => {
+    sidebar.classList.remove('open');
+    sidebarOverlay.classList.remove('active');
+    menuToggle.classList.remove('active');
+    document.body.style.overflow = '';
   });
 }
 
@@ -522,14 +542,17 @@ if (menuToggle) {
 // Only close when clicking outside the sidebar or the close button
 document.addEventListener('click', (e) => {
   // Check if we're on mobile
-  if (window.innerWidth <= 768) {
+  if (window.innerWidth <= 1024) {
     const isClickInsideSidebar = sidebar && sidebar.contains(e.target);
     const isMenuToggle = e.target.closest('#menu-toggle');
-    const isNavItem = e.target.closest('.nav-item, .nav-title');
+    const isOverlay = e.target.closest('.sidebar-overlay');
     
-    // Close sidebar only if clicking outside AND not on menu toggle AND not on nav items
-    if (!isClickInsideSidebar && !isMenuToggle && !isNavItem && sidebar?.classList.contains('open')) {
+    // Close sidebar when clicking nav items on mobile
+    if (e.target.closest('.nav-item') && sidebar?.classList.contains('open')) {
       sidebar.classList.remove('open');
+      sidebarOverlay?.classList.remove('active');
+      menuToggle?.classList.remove('active');
+      document.body.style.overflow = '';
     }
   }
 });
@@ -666,6 +689,9 @@ document.addEventListener('keydown', (e) => {
   // Escape to close mobile menu
   if (e.key === 'Escape') {
     sidebar?.classList.remove('open');
+    sidebarOverlay?.classList.remove('active');
+    menuToggle?.classList.remove('active');
+    document.body.style.overflow = '';
   }
 });
 

package/lib/core-builder.js

@@ -141,6 +141,9 @@ function generateHTML(title, content, navigation, currentPath = '', config = {})
     
     <!-- Main Content -->
     <div class="main-wrapper">
+        <!-- Sidebar Overlay -->
+        <div class="sidebar-overlay"></div>
+        
         <!-- Sidebar -->
         <aside class="sidebar">
             <div class="sidebar-header">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowcode/doc-builder",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "Reusable documentation builder for markdown-based sites with Vercel deployment support",
   "main": "index.js",
   "bin": {