@knowcode/doc-builder 1.5.1 → 1.5.3

package/.claude/settings.local.json

@@ -23,7 +23,9 @@
       "Bash(npm:*)",
       "Bash(vercel project:*)",
       "Bash(vercel alias:*)",
-      "Bash(find:*)"
+      "Bash(find:*)",
+      "Bash(diff:*)",
+      "Bash(git log:*)"
     ],
     "deny": []
   }

package/CHANGELOG.md

@@ -5,6 +5,39 @@ 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.5.3] - 2025-07-22
+
+### Fixed
+- Fixed mobile menu not being visible when scrolled down by changing sidebar from absolute to fixed positioning
+- Increased sidebar z-index to 1002 to ensure it appears above header and other elements
+- Made floating menu button always visible on mobile (removed scroll-based visibility)
+- Added overlay backdrop when mobile menu is open for better UX
+- Fixed overlay and menu state synchronization across different toggle methods
+
+### Changed
+- Mobile sidebar now uses `position: fixed` instead of `position: absolute`
+- Floating menu button is now always visible on mobile for consistent access
+- Added semi-transparent overlay when mobile menu is open
+- Improved click-outside behavior to properly close menu and overlay
+
+## [1.5.2] - 2025-07-22
+
+### Added
+- Floating menu button for mobile devices that appears when scrolling down
+- Scroll detection to show/hide floating menu button based on scroll position
+- Smooth animations and transitions for floating button appearance
+- Icon changes between hamburger and close based on sidebar state
+
+### Fixed
+- Fixed mobile menu inaccessibility when scrolled down the page
+- Menu toggle button in header was scrolling off-screen, preventing sidebar access
+- Mobile users can now always access the navigation menu regardless of scroll position
+
+### Background
+- Users reported being unable to open the sidebar menu on mobile when scrolled down
+- Implemented floating action button (FAB) pattern common in mobile apps
+- Button appears when user scrolls past the header and disappears when scrolling back up
+
 ## [1.5.1] - 2025-07-21
 
 ### Added

package/README.md

@@ -139,14 +139,6 @@ module.exports = {
 };
 ```
 
-## Presets
-
-Use the `notion-inspired` preset for a clean, modern documentation style:
-
-```bash
-npx @knowcode/doc-builder build --preset notion-inspired
-```
-
 ## Commands
 
 ### set-production-url

package/assets/css/notion-style.css

@@ -954,19 +954,39 @@ tr:hover {
   
   /* Hide sidebar on mobile */
   .sidebar {
-    position: absolute;
+    position: fixed;
     top: calc(var(--header-height) + var(--breadcrumb-height));
     left: 0;
     height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
-    z-index: 999;
+    z-index: 1002; /* Above header and floating button */
     transform: translateX(-100%);
     transition: transform var(--duration-normal) var(--easing-out);
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); /* Add shadow for depth */
   }
   
   .sidebar.open {
     transform: translateX(0);
   }
   
+  /* Mobile menu overlay */
+  .sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1001; /* Below sidebar but above content */
+    opacity: 0;
+    transition: opacity var(--duration-normal);
+  }
+  
+  .sidebar-overlay.active {
+    display: block;
+    opacity: 1;
+  }
+  
   .main-wrapper {
     margin-left: 0;
     margin-top: var(--header-height); /* Only account for fixed header on mobile */
@@ -1578,6 +1598,62 @@ tr:hover {
 
 /* Remove custom positioning variables - tooltips always go right */
 
+/* Floating Menu Button */
+.floating-menu-toggle {
+  position: fixed;
+  bottom: var(--space-6);
+  right: var(--space-6);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--color-accent-blue);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  cursor: pointer;
+  z-index: 1001; /* Above sidebar */
+  opacity: 0;
+  transform: scale(0.8) translateY(20px);
+  transition: all var(--duration-normal) var(--easing-out);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.floating-menu-toggle.visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.floating-menu-toggle:hover {
+  transform: scale(1.1) translateY(0);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+.floating-menu-toggle:active {
+  transform: scale(0.95) translateY(0);
+}
+
+.floating-menu-toggle i {
+  transition: transform var(--duration-fast) var(--easing-out);
+}
+
+.floating-menu-toggle:hover i {
+  transform: rotate(90deg);
+}
+
+/* Dark mode styles for floating button */
+.dark-mode .floating-menu-toggle {
+  background: var(--color-accent-blue);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode .floating-menu-toggle:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
 /* Mobile adjustments */
 @media (max-width: 768px) {
   /* Disable tooltips on mobile to prevent overlap issues */

package/assets/js/main.js

@@ -512,12 +512,112 @@ function updateThemeIcon(theme) {
 const menuToggle = document.getElementById('menu-toggle');
 const sidebar = document.querySelector('.sidebar');
 
+// Create overlay element for mobile
+let overlay = document.querySelector('.sidebar-overlay');
+if (!overlay && window.innerWidth <= 768) {
+  overlay = document.createElement('div');
+  overlay.className = 'sidebar-overlay';
+  document.body.appendChild(overlay);
+}
+
 if (menuToggle) {
   menuToggle.addEventListener('click', () => {
     sidebar.classList.toggle('open');
+    if (overlay) {
+      overlay.classList.toggle('active');
+    }
+  });
+}
+
+// Close menu when clicking overlay
+if (overlay) {
+  overlay.addEventListener('click', () => {
+    sidebar.classList.remove('open');
+    overlay.classList.remove('active');
   });
 }
 
+// Floating Menu Button for Mobile
+function initFloatingMenuButton() {
+  // Only initialize on mobile
+  if (window.innerWidth > 768) return;
+  
+  // Check if button already exists
+  if (document.getElementById('floating-menu-toggle')) return;
+  
+  // Create floating button
+  const floatingButton = document.createElement('button');
+  floatingButton.id = 'floating-menu-toggle';
+  floatingButton.className = 'floating-menu-toggle';
+  floatingButton.setAttribute('aria-label', 'Toggle menu');
+  floatingButton.innerHTML = '<i class="fas fa-bars"></i>';
+  floatingButton.style.display = 'flex'; // Always visible on mobile
+  floatingButton.classList.add('visible'); // Start visible
+  
+  // Add to body
+  document.body.appendChild(floatingButton);
+  
+  // Toggle sidebar on click
+  floatingButton.addEventListener('click', () => {
+    sidebar.classList.toggle('open');
+    
+    // Handle overlay
+    let overlay = document.querySelector('.sidebar-overlay');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.className = 'sidebar-overlay';
+      document.body.appendChild(overlay);
+      
+      // Add overlay click handler
+      overlay.addEventListener('click', () => {
+        sidebar.classList.remove('open');
+        overlay.classList.remove('active');
+        floatingButton.querySelector('i').className = 'fas fa-bars';
+      });
+    }
+    
+    if (overlay) {
+      overlay.classList.toggle('active');
+    }
+    
+    // Update icon based on state
+    const icon = floatingButton.querySelector('i');
+    if (sidebar.classList.contains('open')) {
+      icon.className = 'fas fa-times';
+    } else {
+      icon.className = 'fas fa-bars';
+    }
+  });
+  
+  // Remove scroll-based visibility - button is always visible on mobile
+  
+  // Update icon when sidebar state changes from other sources
+  const observer = new MutationObserver(() => {
+    const icon = floatingButton.querySelector('i');
+    if (sidebar.classList.contains('open')) {
+      icon.className = 'fas fa-times';
+    } else {
+      icon.className = 'fas fa-bars';
+    }
+  });
+  
+  observer.observe(sidebar, {
+    attributes: true,
+    attributeFilter: ['class']
+  });
+}
+
+// Initialize floating button on load and resize
+document.addEventListener('DOMContentLoaded', initFloatingMenuButton);
+window.addEventListener('resize', () => {
+  const existingButton = document.getElementById('floating-menu-toggle');
+  if (window.innerWidth > 768 && existingButton) {
+    existingButton.remove();
+  } else if (window.innerWidth <= 768 && !existingButton) {
+    initFloatingMenuButton();
+  }
+});
+
 // Prevent sidebar from closing when clicking nav items
 // Only close when clicking outside the sidebar or the close button
 document.addEventListener('click', (e) => {
@@ -525,11 +625,21 @@ document.addEventListener('click', (e) => {
   if (window.innerWidth <= 768) {
     const isClickInsideSidebar = sidebar && sidebar.contains(e.target);
     const isMenuToggle = e.target.closest('#menu-toggle');
+    const isFloatingButton = e.target.closest('#floating-menu-toggle');
     const isNavItem = e.target.closest('.nav-item, .nav-title');
+    const overlay = document.querySelector('.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')) {
+    if (!isClickInsideSidebar && !isMenuToggle && !isFloatingButton && !isNavItem && sidebar?.classList.contains('open')) {
       sidebar.classList.remove('open');
+      if (overlay) {
+        overlay.classList.remove('active');
+      }
+      // Update floating button icon if it exists
+      const floatingBtn = document.getElementById('floating-menu-toggle');
+      if (floatingBtn) {
+        floatingBtn.querySelector('i').className = 'fas fa-bars';
+      }
     }
   }
 });

package/html/README.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.468Z",
-  "dateModified": "2025-07-21T20:39:06.468Z",
+  "datePublished": "2025-07-22T06:01:14.255Z",
+  "dateModified": "2025-07-22T06:01:14.255Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/README.html"
@@ -92,7 +92,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.2">Last updated: Jul 22, 2025, 06:01 AM UTC</span>
                 </div>
                 
                 
@@ -142,7 +142,6 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item active" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
         <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
         <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
@@ -152,6 +151,7 @@
         </a>
         <div class="nav-content" id="nav-guides-1">
         <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
+        <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>

package/html/claude-workflow-guide.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.478Z",
-  "dateModified": "2025-07-21T20:39:06.478Z",
+  "datePublished": "2025-07-21T20:43:20.146Z",
+  "dateModified": "2025-07-21T20:43:20.146Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/claude-workflow-guide.html"
@@ -92,7 +92,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 21, 2025, 08:43 PM UTC</span>
                 </div>
                 
                 

package/html/css/notion-style.css

@@ -1578,6 +1578,62 @@ tr:hover {
 
 /* Remove custom positioning variables - tooltips always go right */
 
+/* Floating Menu Button */
+.floating-menu-toggle {
+  position: fixed;
+  bottom: var(--space-6);
+  right: var(--space-6);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--color-accent-blue);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  cursor: pointer;
+  z-index: 1001; /* Above sidebar */
+  opacity: 0;
+  transform: scale(0.8) translateY(20px);
+  transition: all var(--duration-normal) var(--easing-out);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.floating-menu-toggle.visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.floating-menu-toggle:hover {
+  transform: scale(1.1) translateY(0);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+.floating-menu-toggle:active {
+  transform: scale(0.95) translateY(0);
+}
+
+.floating-menu-toggle i {
+  transition: transform var(--duration-fast) var(--easing-out);
+}
+
+.floating-menu-toggle:hover i {
+  transform: rotate(90deg);
+}
+
+/* Dark mode styles for floating button */
+.dark-mode .floating-menu-toggle {
+  background: var(--color-accent-blue);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode .floating-menu-toggle:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
 /* Mobile adjustments */
 @media (max-width: 768px) {
   /* Disable tooltips on mobile to prevent overlap issues */

package/html/documentation-index.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.481Z",
-  "dateModified": "2025-07-21T20:39:06.481Z",
+  "datePublished": "2025-07-22T06:01:14.265Z",
+  "dateModified": "2025-07-22T06:01:14.265Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/documentation-index.html"
@@ -92,7 +92,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.2">Last updated: Jul 22, 2025, 06:01 AM UTC</span>
                 </div>
                 
                 
@@ -142,7 +142,6 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/documentation-index.html" class="nav-item active" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
         <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
         <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
@@ -152,6 +151,7 @@
         </a>
         <div class="nav-content collapsed" id="nav-guides-1">
         <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
+        <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>

package/html/guides/authentication-guide.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.483Z",
-  "dateModified": "2025-07-21T20:39:06.483Z",
+  "datePublished": "2025-07-22T06:01:14.269Z",
+  "dateModified": "2025-07-22T06:01:14.269Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
@@ -98,7 +98,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.2">Last updated: Jul 22, 2025, 06:01 AM UTC</span>
                 </div>
                 
                 
@@ -148,7 +148,6 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
         <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
         <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
@@ -158,6 +157,7 @@
         </a>
         <div class="nav-content" id="nav-guides-1">
         <a href="/guides/authentication-guide.html" class="nav-item active" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
+        <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>