Spry/demo/Components/NavSidebarComponent.vala

using Spry;

/**
 * NavSidebarComponent - A simple navigation sidebar for the documentation site
 * 
 * Features:
 * - All items always visible (no collapsing)
 * - Current page highlighting
 */
public class NavSidebarComponent : Component {
    
    public string current_path { get; set; default = "/"; }
    
    public override string markup { get {
        return """
        <aside class="nav-sidebar" sid="sidebar" hx-disinherit="*">
            <!-- Home - Single link -->
            <div class="nav-section">
                <a href="/" class="nav-item" sid="home-link">Home</a>
            </div>
            
            <!-- Components Section -->
            <div class="nav-section">
                <h3 class="nav-section-title">Components</h3>
                <ul class="nav-items">
                    <li><a href="/components/overview" class="nav-item" sid="components-overview">Overview</a></li>
                    <li><a href="/components/template-syntax" class="nav-item" sid="components-template-syntax">Template Syntax</a></li>
                    <li><a href="/components/actions" class="nav-item" sid="components-actions">Actions</a></li>
                    <li><a href="/components/outlets" class="nav-item" sid="components-outlets">Outlets</a></li>
                    <li><a href="/components/continuations" class="nav-item" sid="components-continuations">Continuations</a></li>
                </ul>
            </div>
            
            <!-- Page Components Section -->
            <div class="nav-section">
                <h3 class="nav-section-title">Page Components</h3>
                <ul class="nav-items">
                    <li><a href="/page-components/overview" class="nav-item" sid="page-components-overview">Overview</a></li>
                    <li><a href="/page-components/templates" class="nav-item" sid="page-components-templates">Page Templates</a></li>
                </ul>
            </div>
            
            <!-- Static Resources Section -->
            <div class="nav-section">
                <h3 class="nav-section-title">Static Resources</h3>
                <ul class="nav-items">
                    <li><a href="/static-resources/overview" class="nav-item" sid="static-resources-overview">Overview</a></li>
                    <li><a href="/static-resources/spry-mkssr" class="nav-item" sid="static-resources-spry-mkssr">Using spry-mkssr</a></li>
                </ul>
            </div>
        </aside>
        """;
    }}
    
    public override async void prepare() throws Error {
        // Highlight the current page link
        highlight_current_link();
    }
    
    private void highlight_current_link() {
        // Get the sid for the current path and add active class
        string? sid = get_sid_for_path(current_path);
        if (sid != null) {
            var link = this[sid];
            if (link != null) {
                link.add_class("active");
            }
        }
    }
    
    private string? get_sid_for_path(string path) {
        switch (path) {
            case "/": return "home-link";
            case "/components/overview": return "components-overview";
            case "/components/template-syntax": return "components-template-syntax";
            case "/components/actions": return "components-actions";
            case "/components/outlets": return "components-outlets";
            case "/components/continuations": return "components-continuations";
            case "/page-components/overview": return "page-components-overview";
            case "/page-components/templates": return "page-components-templates";
            case "/static-resources/overview": return "static-resources-overview";
            case "/static-resources/spry-mkssr": return "static-resources-spry-mkssr";
            default: return null;
        }
    }
}