Sidebar-System – So funktioniert's

Plain Text Kopieren

scripts/
└── generate-navigation.js     → Generiert Sidebar-HTML

assets/
├── css/
│   └── sidebar.css            → Styling beider Sidebars
└── js/
    ├── sidebar.js             → Öffnen/Schließen, Event-Handling
    ├── scroll-spy.js          → Active-Link beim Scrollen
    └── main.js                → Header, Footer, Theme Toggle

JavaScript Kopieren

function addIdsToHeadingsAndGenerateSidebar(html) {
    const dom = new JSDOM(html);
    const doc = dom.window.document;
    
    // 1. Finde alle h2 und h3 Überschriften
    const headings = doc.querySelectorAll('h2, h3');
    
    const anchors = [];
    const usedIds = new Set();
    
    headings.forEach(heading => {
        // Überspringe Überschriften mit class="no-toc"
        if (heading.classList.contains('no-toc')) return;
        
        let id = heading.id;
        
        // 2. Generiere ID aus dem Text
        if (!id) {
            id = heading.textContent.trim().toLowerCase()
                .replace(/[äöüÄÖÜß]/g, match => {
                    const map = { 'ä': 'ae', 'ö': 'oe', 'ü': 'ue' };
                    return map[match];
                })
                .replace(/[^\w\s-]/g, '')
                .replace(/\s+/g, '-');
            
            // 3. Vermeide Duplikate
            let finalId = id;
            let counter = 1;
            while (usedIds.has(finalId)) {
                finalId = `${id}-${counter}`;
                counter++;
            }
            
            // 4. Füge ID zum Heading hinzu!
            heading.id = finalId;
            id = finalId;
        }
        
        usedIds.add(id);
        
        // 5. Erstelle Sidebar-Link
        const level = heading.tagName === 'H2' ? 'toc-level-1' : 'toc-level-2';
        anchors.push(
            `<li class="${level}"><a href="#${id}">${heading.textContent.trim()}</a></li>`
        );
    });
    
    return {
        html: dom.serialize(),  // HTML mit IDs!
        anchors: anchors.join('\n')
    };
}

HTML Kopieren

<aside class="tutorial-sidebar" id="tutorialSidebar">
    <div class="sidebar-header">
        <h3 class="sidebar-title no-toc">Auf dieser Seite</h3>
        <button class="sidebar-close" id="sidebarClose">×</button>
    </div>

    <nav class="sidebar-toc">
        <ul class="toc-list">
            <!-- Sidebar-Anchor-Start -->
            <li class="toc-level-1"><a href="#was-ist-css">Was ist CSS?</a></li>
            <li class="toc-level-1"><a href="#selektoren">Selektoren</a></li>
            <li class="toc-level-2"><a href="#element-selektor">Element-Selektor</a></li>
            <li class="toc-level-2"><a href="#class-selektor">Class-Selektor</a></li>
            <!-- Sidebar-Anchor-End -->
        </ul>
    </nav>
</aside>

JavaScript Kopieren

document.addEventListener('DOMContentLoaded', () => {
    const sidebar = document.getElementById('tutorialSidebar');
    const sidebarToggle = document.getElementById('sidebarToggle');
    const sidebarClose = document.getElementById('sidebarClose');
    const overlay = document.createElement('div');
    overlay.className = 'sidebar-overlay';
    document.body.appendChild(overlay);

    // Öffne Sidebar
    function openSidebar() {
        sidebar.classList.add('is-open');
        overlay.classList.add('is-visible');
        document.body.style.overflow = 'hidden'; // Verhindert Scrollen
    }

    // Schließe Sidebar
    function closeSidebar() {
        sidebar.classList.remove('is-open');
        overlay.classList.remove('is-visible');
        document.body.style.overflow = '';
    }

    // Event Listeners
    sidebarToggle.addEventListener('click', openSidebar);
    sidebarClose.addEventListener('click', closeSidebar);
    overlay.addEventListener('click', closeSidebar);
    
    // ESC-Taste
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeSidebar();
    });
    
    // Schließe bei Klick auf TOC-Link
    const tocLinks = document.querySelectorAll('.toc-link');
    tocLinks.forEach(link => {
        link.addEventListener('click', closeSidebar);
    });
});

JavaScript Kopieren

tocLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // Verhindere Standard-Sprung
        
        const targetId = this.getAttribute('href'); // z.B. "#was-ist-css"
        const targetSection = document.querySelector(targetId);
        
        if (targetSection) {
            const headerOffset = 100; // 100px Abstand von oben
            const elementPosition = targetSection.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
        }
    });
});

JavaScript Kopieren

class ScrollSpy {
    constructor() {
        this.tocLinks = document.querySelectorAll('.toc-list a');
        this.headings = [];
        this.currentActive = null;
        this.ticking = false;
        
        this.init();
    }
    
    init() {
        if (this.tocLinks.length === 0) return;
        
        // 1. Sammle alle Überschriften mit IDs
        this.tocLinks.forEach(link => {
            const id = link.getAttribute('href').substring(1); // Entferne #
            const heading = document.getElementById(id);
            
            if (heading) {
                this.headings.push({
                    id: id,
                    element: heading,
                    link: link
                });
            }
        });
        
        // 2. Event Listeners
        window.addEventListener('scroll', () => this.onScroll(), { passive: true });
        
        // 3. Initial Check
        this.updateActiveLink();
    }
    
    onScroll() {
        // Throttling für Performance
        if (!this.ticking) {
            window.requestAnimationFrame(() => {
                this.updateActiveLink();
                this.ticking = false;
            });
            this.ticking = true;
        }
    }
    
    updateActiveLink() {
        const scrollPosition = window.scrollY + 100; // 100px Offset
        let activeHeading = null;
        
        // Finde die Überschrift, die gerade sichtbar ist
        for (let i = 0; i < this.headings.length; i++) {
            const heading = this.headings[i];
            const headingTop = heading.element.offsetTop;
            
            if (scrollPosition >= headingTop) {
                activeHeading = heading;
            } else {
                break;
            }
        }
        
        // Wenn ganz unten, nimm die letzte Überschrift
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 10) {
            activeHeading = this.headings[this.headings.length - 1];
        }
        
        // Update nur wenn sich was geändert hat
        if (activeHeading && activeHeading !== this.currentActive) {
            this.setActiveLink(activeHeading);
        }
    }
    
    setActiveLink(activeHeading) {
        // Entferne .active von allen Links
        this.tocLinks.forEach(link => link.classList.remove('active'));
        
        // Setze .active auf den aktiven Link
        if (activeHeading && activeHeading.link) {
            activeHeading.link.classList.add('active');
            this.currentActive = activeHeading;
        }
    }
}

// Initialisiere ScrollSpy
new ScrollSpy();

JavaScript Kopieren

// Link: <a href="#was-ist-css">Was ist CSS?</a>
// Heading: <h2 id="was-ist-css">Was ist CSS?</h2>
// Gespeichert als:
{
    id: 'was-ist-css',
    element: <h2> Element,
    link: <a> Element
}

JavaScript Kopieren

onScroll() {
    if (!this.ticking) {
        window.requestAnimationFrame(() => {
            this.updateActiveLink();
            this.ticking = false;
        });
        this.ticking = true;
    }
}

CSS Kopieren

.toc-list a {
    color: var(--text-secondary);
}

.toc-list a.active {
    color: var(--accent-blue);
    font-weight: 600;
    border-left: 3px solid var(--accent-blue);
}

JavaScript Kopieren

// Wenn ganz unten
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 10) {
    activeHeading = this.headings[this.headings.length - 1];
}

JavaScript Kopieren

function generateSidebarNavList(filePath) {
    // 1. Finde die Unterkategorie
    const subcategory = getSubcategoryFromPath(filePath);
    // z.B. "tutorials/css/css-basics"
    
    // 2. Hole die Tutorial-Liste aus TUTORIAL_ORDER
    const tutorials = getOrderedTutorials(subcategory);
    
    // 3. Finde die aktuelle URL
    const currentUrl = getRelativeUrl(filePath);
    
    // 4. Erstelle HTML für jedes Tutorial
    return tutorials.map(tutorial => {
        const isActive = tutorial.url === currentUrl;
        const activeClass = isActive ? ' class="active"' : '';
        return `<li><a href="${tutorial.url}"${activeClass}>${tutorial.title}</a></li>`;
    }).join('\n');
}

HTML Kopieren

<aside class="tutorial-related">
    <div class="sidebar-header">
        <h3 class="sidebar-title no-toc">Tutorials</h3>
        <button class="sidebar-close" id="tutorialNavClose">×</button>
    </div>

    <div class="sidebar-nav">
        <ul class="sidebar-nav-list">
            <li><a href="/tutorials/css/css-basics/css-einbinden.html">CSS einbinden</a></li>
            <li><a href="/tutorials/css/css-basics/css-selektoren.html" class="active">CSS Selektoren</a></li>
            <li><a href="/tutorials/css/css-basics/css-box-model.html">CSS Box Model</a></li>
        </ul>
    </div>
</aside>

JavaScript Kopieren

const tutorialRelated = document.querySelector('.tutorial-related');
const tutorialNavToggle = document.getElementById('tutorialNavToggle');

function openTutorialNav() {
    tutorialRelated.classList.add('is-open');
    overlay.classList.add('is-visible');
    document.body.style.overflow = 'hidden';
}

function closeTutorialNav() {
    tutorialRelated.classList.remove('is-open');
    overlay.classList.remove('is-visible');
    document.body.style.overflow = '';
}

tutorialNavToggle.addEventListener('click', openTutorialNav);

CSS Kopieren

.tutorial-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    
    /* Sidebar ist standardmäßig versteckt */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}

CSS Kopieren

.tutorial-sidebar.is-open {
    transform: translateX(0); /* Schiebt Sidebar ins Sichtfeld */
}

CSS Kopieren

/* Desktop: Sidebars dauerhaft sichtbar */
@media (min-width: 1200px) {
    .tutorial-sidebar {
        transform: translateX(0);
        position: sticky; /* Statt fixed */
        top: 100px;
    }
    
    .sidebar-toggle {
        display: none; /* Buttons ausblenden */
    }
}

HTML Kopieren

<h3 class="no-toc">Diese Überschrift erscheint nicht in der Sidebar</h3>