@knowcode/doc-builder 1.1.10 → 1.1.12

package/CHANGELOG.md

@@ -5,6 +5,45 @@ 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.1.12] - 2025-07-19
+
+### Fixed (MAJOR)
+- **Fixed sidebar layout** - Navigation now appears as fixed-width left sidebar instead of above content
+- Added proper flexbox container layout with fixed sidebar positioning
+- Navigation is now 280px fixed width on left side with proper scrolling
+- Content area properly offset to account for sidebar width
+
+### Added
+- Container flexbox layout for proper sidebar + content structure
+- Fixed navigation positioning with proper z-index and boundaries
+- Mobile responsive layout - sidebar becomes horizontal bar on mobile
+- Proper scrolling for both navigation and content areas
+
+### Visual Changes
+- Navigation background set to secondary color with right border
+- Content area now takes full remaining width after sidebar
+- Proper spacing and padding for both sidebar and content
+- Mobile layout stacks navigation above content
+
+## [1.1.11] - 2025-07-19
+
+### Fixed (MAJOR)
+- **Fixed navigation completely** - HTML structure now matches JavaScript expectations
+- Replaced incompatible nav-folder structure with nav-section/nav-content structure
+- Navigation now works for both flat and nested folder structures
+- Fixed JavaScript initialization issues with navigation elements
+
+### Changed
+- Complete rewrite of navigation HTML generation to match main.js expectations
+- Updated CSS to work with new nav-section structure
+- Removed conflicting nav-flat classes in favor of universal nav-item approach
+
+### Technical Details
+- HTML now generates `.nav-section` + `.nav-content` instead of `.nav-folder` + `.nav-folder-content`
+- JavaScript can now find and initialize navigation elements properly
+- Collapsible navigation works for nested structures
+- Simple navigation works for flat file structures
+
 ## [1.1.10] - 2025-07-19
 
 ### Fixed

package/assets/css/notion-style.css

@@ -372,13 +372,26 @@ pre code {
   font-size: var(--text-sm);
 }
 
+/* Layout Container */
+.container {
+  display: flex;
+  height: calc(100vh - var(--header-height));
+  overflow: hidden;
+}
+
 /* Navigation */
 .navigation {
+  width: var(--sidebar-width);
+  background: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border-default);
   padding: var(--space-2);
   overflow-y: auto;
   overflow-x: visible;
-  flex: 1;
-  position: relative;
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  height: calc(100vh - var(--header-height));
+  z-index: 100;
   
   /* Scrollbar styling */
   scrollbar-width: thin;
@@ -531,9 +544,10 @@ pre code {
 .content {
   flex: 1;
   margin-left: var(--sidebar-width);
-  padding: var(--space-10) var(--space-8);
-  max-width: calc(65rem + var(--space-8) * 2);
-  transition: margin-left var(--duration-normal);
+  padding: var(--space-6) var(--space-8);
+  overflow-y: auto;
+  height: calc(100vh - var(--header-height));
+  max-width: none;
 }
 
 .content-inner {
@@ -1459,18 +1473,35 @@ tr:hover {
   [data-tooltip]::after {
     display: none;
   }
+  
+  .container {
+    flex-direction: column;
+  }
+  
+  .navigation {
+    position: relative;
+    width: 100%;
+    height: auto;
+    max-height: 200px;
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border-default);
+  }
+  
+  .content {
+    margin-left: 0;
+    height: auto;
+    min-height: calc(100vh - var(--header-height) - 200px);
+  }
 }
 
-/* Navigation: Flat vs Collapsible */
-.nav-flat .nav-folder-toggle {
-  display: none;
-}
-
-.nav-flat li {
+/* Navigation: Enhanced for all structures */
+.nav-item {
   margin-bottom: var(--space-0-5);
 }
 
-.nav-flat .nav-link {
+.nav-item .nav-link {
   display: block;
   padding: var(--space-1) var(--space-2);
   color: var(--color-text-secondary);
@@ -1481,13 +1512,32 @@ tr:hover {
   font-weight: 400;
 }
 
-.nav-flat .nav-link:hover {
+.nav-item .nav-link:hover {
   background: var(--color-bg-hover);
   color: var(--color-text-primary);
 }
 
-.nav-flat .nav-link.active {
+.nav-item.active .nav-link,
+.nav-item .nav-link.active {
   background: var(--color-accent-blue-bg);
   color: var(--color-accent-blue);
   font-weight: 500;
+}
+
+/* Ensure nav sections are visible and functional */
+.nav-section {
+  margin-bottom: var(--space-1);
+}
+
+.nav-content {
+  padding-left: var(--space-2);
+}
+
+/* Override any conflicting styles */
+.navigation .nav-section .nav-content {
+  display: block;
+}
+
+.navigation .nav-section .nav-content.collapsed {
+  display: none;
 }

package/lib/core-builder.js

@@ -166,60 +166,71 @@ function buildNavigationStructure(files, currentFile) {
     current.files.push(file);
   });
   
-  // Generate HTML
-  const generateNavHTML = (node, path = '') => {
-    let html = '';
+  // Check if this is a flat structure
+  const hasFolders = Object.keys(tree.folders).length > 0;
+  
+  if (!hasFolders) {
+    // Generate simple flat navigation that matches what JavaScript expects
+    let html = '<div class="nav-section">';
+    html += '<div class="nav-content">';
     
-    // Add files
-    node.files.forEach(file => {
+    tree.files.forEach(file => {
       const isActive = file.urlPath === currentFile;
       const href = file.urlPath.replace(/\\/g, '/');
-      html += `<li class="${isActive ? 'active' : ''}">
+      html += `<div class="nav-item ${isActive ? 'active' : ''}">
         <a href="${href}" class="nav-link ${isActive ? 'active' : ''}">
-          ${file.displayName}
+          <span class="nav-text">${file.displayName}</span>
         </a>
-      </li>`;
+      </div>`;
     });
     
-    // Add folders
-    Object.entries(node.folders).forEach(([folderName, folderNode]) => {
-      const folderPath = path ? `${path}/${folderName}` : folderName;
-      const hasActiveChild = checkActiveChild(folderNode, currentFile);
+    html += '</div></div>';
+    return html;
+  } else {
+    // Generate collapsible navigation for folder structures
+    const generateNavHTML = (node, path = '', level = 0) => {
+      let html = '';
       
-      html += `<li class="nav-folder ${hasActiveChild ? 'active' : ''}">
-        <button class="nav-folder-toggle ${hasActiveChild ? 'active' : ''}" data-folder="${folderPath}">
-          <i class="fas fa-chevron-${hasActiveChild ? 'down' : 'right'}"></i>
-          ${folderName}
-        </button>
-        <ul class="nav-folder-content ${hasActiveChild ? 'active' : ''}">
-          ${generateNavHTML(folderNode, folderPath)}
-        </ul>
-      </li>`;
-    });
+      // Add folders as sections
+      Object.entries(node.folders).forEach(([folderName, folderNode]) => {
+        const folderPath = path ? `${path}/${folderName}` : folderName;
+        const hasActiveChild = checkActiveChild(folderNode, currentFile);
+        const sectionId = `nav-${folderPath.replace(/\//g, '-')}`;
+        
+        html += `<div class="nav-section ${hasActiveChild ? 'expanded' : ''}">
+          <div class="nav-title collapsible ${hasActiveChild ? 'expanded' : ''}" data-target="${sectionId}">
+            <i class="fas fa-chevron-${hasActiveChild ? 'down' : 'right'}"></i>
+            <span class="nav-text">${folderName}</span>
+          </div>
+          <div class="nav-content ${hasActiveChild ? '' : 'collapsed'}" id="${sectionId}">
+            ${generateNavHTML(folderNode, folderPath, level + 1)}
+          </div>
+        </div>`;
+      });
+      
+      // Add files
+      node.files.forEach(file => {
+        const isActive = file.urlPath === currentFile;
+        const href = file.urlPath.replace(/\\/g, '/');
+        html += `<div class="nav-item ${isActive ? 'active' : ''}">
+          <a href="${href}" class="nav-link ${isActive ? 'active' : ''}">
+            <span class="nav-text">${file.displayName}</span>
+          </a>
+        </div>`;
+      });
+      
+      return html;
+    };
     
-    return html;
-  };
-  
-  const checkActiveChild = (node, currentFile) => {
-    // Check files
-    if (node.files.some(f => f.urlPath === currentFile)) return true;
+    const checkActiveChild = (node, currentFile) => {
+      // Check files
+      if (node.files.some(f => f.urlPath === currentFile)) return true;
+      
+      // Check folders recursively
+      return Object.values(node.folders).some(folder => checkActiveChild(folder, currentFile));
+    };
     
-    // Check folders recursively
-    return Object.values(node.folders).some(folder => checkActiveChild(folder, currentFile));
-  };
-  
-  const navHTML = generateNavHTML(tree);
-  
-  // If there are no folders (flat structure), wrap in a simple nav-list
-  // If there are folders, use collapsible navigation
-  const hasFolders = Object.keys(tree.folders).length > 0;
-  
-  if (!hasFolders) {
-    // Simple flat navigation
-    return `<ul class="nav-list nav-flat">${navHTML}</ul>`;
-  } else {
-    // Collapsible navigation with folders
-    return `<ul class="nav-list nav-collapsible">${navHTML}</ul>`;
+    return generateNavHTML(tree);
   }
 }
 

package/package.json

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