@knowcode/doc-builder 1.3.4 → 1.3.6

package/CHANGELOG.md

@@ -5,6 +5,44 @@ 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
+- Restored proper header and breadcrumb heights for better visual hierarchy
+- Header height increased from 40px to 56px
+- Breadcrumb height restored from 0px to 40px
+- Removed duplicate "Home" link from sidebar to eliminate confusion
+- Cleaned up orphaned CSS styles for removed sidebar breadcrumbs
+
+### Improved
+- Better spacing and visual weight for header components
+- Cleaner sidebar with single-purpose filter input
+- More professional appearance with proper proportions
+
 ## [1.3.4] - 2025-07-19
 
 ### Fixed

package/assets/css/notion-style.css

@@ -125,8 +125,8 @@
   /* Layout */
   --container-padding-mobile: 20px;
   --container-padding-desktop: 40px;
-  --header-height: 40px;
-  --breadcrumb-height: 0px;
+  --header-height: 56px;
+  --breadcrumb-height: 40px;
   --sidebar-width: 280px;
 }
 
@@ -337,33 +337,6 @@ pre code {
   border-bottom: 1px solid var(--color-border-default);
 }
 
-/* Sidebar Breadcrumbs */
-.sidebar-breadcrumbs {
-  margin-bottom: var(--space-6);
-}
-
-.sidebar-home-link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  border-radius: var(--radius-base);
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.sidebar-home-link:hover {
-  background: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-}
-
-.sidebar-home-link i {
-  font-size: 1rem;
-}
-
 .filter-box {
   position: relative;
 }
@@ -529,11 +502,6 @@ pre code {
   border-bottom: 1px solid var(--color-border-default);
 }
 
-/* Already defined above, but ensure consistency */
-.sidebar-breadcrumbs {
-  margin-bottom: var(--space-6);
-}
-
 .filter-box {
   position: relative;
   display: flex;
@@ -1019,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 */
@@ -1026,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

@@ -44,8 +44,8 @@
   /* Layout */
   --sidebar-width: 280px;
   --content-max-width: 65rem;
-  --header-height: 40px;
-  --breadcrumb-height: 0px;
+  --header-height: 56px;
+  --breadcrumb-height: 40px;
   --banner-offset: 0rem;
   
   /* Transitions */
@@ -865,33 +865,6 @@ em, i {
   z-index: 10;
 }
 
-/* Sidebar Breadcrumbs */
-.sidebar-breadcrumbs {
-  margin-bottom: var(--space-xl);
-}
-
-.sidebar-home-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  color: var(--text-secondary);
-  text-decoration: none;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.sidebar-home-link:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-}
-
-.sidebar-home-link i {
-  font-size: 1rem;
-}
-
 .filter-box {
   position: relative;
   width: 100%;
@@ -979,15 +952,6 @@ em, i {
   background: var(--bg-secondary);
 }
 
-[data-theme="dark"] .sidebar-home-link {
-  color: var(--text-secondary);
-}
-
-[data-theme="dark"] .sidebar-home-link:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
 [data-theme="dark"] .filter-input {
   border-color: rgba(255, 255, 255, 0.1);
   background: var(--bg-tertiary);
@@ -1424,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);
@@ -1529,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) {
@@ -1537,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,15 +141,12 @@ 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">
-                <div class="sidebar-breadcrumbs">
-                    <a href="/index.html" class="sidebar-home-link">
-                        <i class="fas fa-home"></i>
-                        <span>Home</span>
-                    </a>
-                </div>
                 <div class="filter-box">
                     <input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
                     <i class="fas fa-search filter-icon"></i>

package/package.json

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