fix(documentation): add sidebar template with table of contents, remove version picker

+++

title = "Appendix"

render = false

[extra]

hide_from_toc = true

+++

{# Sidebar with Table of Contents for Docs Mode #}

<aside id="sidebar" class="sidebar" role="complementary" aria-labelledby="sidebar-title">

    {# Resize handle (desktop only) #}

    <div class="sidebar__resize-handle" aria-hidden="true" title="Drag to resize sidebar width"></div>

    <div class="sidebar__header">

        <span id="sidebar-title" class="sidebar__title">Table of contents</span>

        <button class="sidebar__close" type="button" aria-label="Close sidebar" title="Close">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

                <path d="M18 6 6 18"/>

                <path d="m6 6 12 12"/>

            </svg>

        </button>

    </div>

    <nav class="sidebar__content" aria-label="Documentation navigation">

        <div class="toc">

            {# Get the root section for docs #}

            {% set root_section = get_section(path="_index.md") %}

            {% if root_section %}

            <div class="toc__section">

                <ol class="toc__list toc__list--numbered" start="0">

                    {% for pg in root_section.pages %}

                    {% if pg.extra.hide_from_toc is not defined or not pg.extra.hide_from_toc %}

                    <li class="toc__item">

                        <a href="{{ pg.permalink | safe }}" class="toc__link {% if current_path is defined and current_path == pg.path %}active{% endif %}">

                            <span class="toc__number">{{ loop.index0 }}.</span>

                            {{ pg.title }}

                        </a>

                    </li>

                    {% endif %}

                    {% endfor %}

                </ol>

            </div>

            {# Subsections - Zola automatically sorts section.subsections by weight #}

            {% if root_section.subsections %}

            {% for subsection_path in root_section.subsections %}

            {% set subsection = get_section(path=subsection_path) %}

            {% if subsection.extra.hide_from_toc is not defined or not subsection.extra.hide_from_toc %}

            <div class="toc__section">

                <a href="{{ subsection.permalink | safe }}" class="toc__section-title {% if current_path is defined and current_path == subsection.path %}active{% endif %}">{{ subsection.title }}</a>

                <ul class="toc__list">

                    {% for pg in subsection.pages %}

                    <li class="toc__item">

                        <a href="{{ pg.permalink | safe }}" class="toc__link {% if current_path is defined and current_path == pg.path %}active{% endif %}">

                            {{ pg.title }}

                        </a>

                    </li>

                    {% endfor %}

                </ul>

            </div>

            {% endif %}

            {% endfor %}

            {% endif %}

            {% endif %}

        </div>

    </nav>

    <div class="sidebar__footer">

        {# Mobile-only actions (hidden on desktop where they're in header) #}

        <div class="sidebar__actions-mobile">

            {# Version picker #}

            {% if config.extra.versions is defined %}

            <div class="sidebar__action">

                <span class="sidebar__action-label">Version</span>

                <div class="sidebar__version">

                    <span class="sidebar__version-current">v{{ config.extra.versions.current }}</span>

                    {% for v in config.extra.versions.list %}

                    {% if v.version != config.extra.versions.current %}

                    <a href="{{ v.url | safe }}" class="sidebar__version-link">v{{ v.version }}</a>

                    {% endif %}

                    {% endfor %}

                </div>

            </div>

            {% endif %}

            {# Theme toggle #}

            {% if config.extra.show_theme_toggle | default(value=true) %}

            <div class="sidebar__action">

                <span class="sidebar__action-label">Theme</span>

                {% include "partials/theme-toggle.html" %}

            </div>

            {% endif %}

            {# GitHub link #}

            {% if config.extra.github %}

            <a href="{{ config.extra.github }}" class="sidebar__github" target="_blank" rel="noopener noreferrer" aria-label="View project on GitHub (opens in new tab)">

                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

                    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>

                    <path d="M9 18c-4.51 2-5-2-7-2"/>

                </svg>

                <span>View on GitHub</span>

            </a>

            {% endif %}

        </div>

        {# Print button #}

        <a href="{{ get_url(path='print') | safe }}?auto=true" class="print-button" target="_blank" rel="noopener" aria-label="Print all documentation pages (opens print dialog)">

            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

                <polyline points="6 9 6 2 18 2 18 9"/>

                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>

                <rect width="12" height="8" x="6" y="14"/>

            </svg>

            <span>Print all pages</span>

        </a>

    </div>

</aside>

gitlab = "https://gitlab.worldteacher.dev/WorldTeacher/booklore-koreader-plugin"

show_theme_toggle = true

# Optional: version picker

# Note: url values are emitted verbatim as href — they must include the full subpath from base_url.

[extra.versions]

current = "3.3.1"

list = [

    { version = "3.3.1", url = "/worldteacher/booklore-koreader-plugin/", label = "latest" },

]