Spry/demo/Components/NavSidebarComponent.vala

using Spry;

/**
 * NavSidebarComponent - A tree-based navigation sidebar for the documentation site
 * 
 * Features:
 * - Collapsible sections for parent items
 * - Current page highlighting
 * - Automatic expansion of section containing current page
 */
public class NavSidebarComponent : Component {
    
    public string current_path { get; set; default = "/"; }
    
    // Track expanded state for each section
    private bool _components_expanded = false;
    private bool _page_components_expanded = false;
    private bool _static_resources_expanded = false;
    
    public override string markup { get {
        return """
        <aside class="nav-sidebar" sid="sidebar">
            <!-- Home - Single link -->
            <div class="nav-section">
                <a href="/" class="nav-item" sid="home-link">Home</a>
            </div>
            
            <!-- Components Section -->
            <div class="nav-section" sid="components-section">
                <button class="nav-section-header" spry-action=":ToggleComponents" spry-target="components-items">
                    Components
                </button>
                <ul class="nav-items" sid="components-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" sid="page-components-section">
                <button class="nav-section-header" spry-action=":TogglePageComponents" spry-target="page-components-items">
                    Page Components
                </button>
                <ul class="nav-items" sid="page-components-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" sid="static-resources-section">
                <button class="nav-section-header" spry-action=":ToggleStaticResources" spry-target="static-resources-items">
                    Static Resources
                </button>
                <ul class="nav-items" sid="static-resources-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 {
        // Determine which sections should be expanded based on current path
        _components_expanded = current_path.has_prefix("/components");
        _page_components_expanded = current_path.has_prefix("/page-components");
        _static_resources_expanded = current_path.has_prefix("/static-resources");
        
        // Apply expanded state to sections
        update_section_state("components-section", "components-items", _components_expanded);
        update_section_state("page-components-section", "page-components-items", _page_components_expanded);
        update_section_state("static-resources-section", "static-resources-items", _static_resources_expanded);
        
        // Highlight the current page link
        highlight_current_link();
    }
    
    private void update_section_state(string section_sid, string items_sid, bool expanded) {
        var section = this[section_sid];
        var items = this[items_sid];
        
        if (section != null) {
            if (expanded) {
                section.add_class("expanded");
            } else {
                section.remove_class("expanded");
            }
        }
        
        if (items != null) {
            if (expanded) {
                items.remove_attribute("hidden");
            } else {
                items.set_attribute("hidden", "hidden");
            }
        }
    }
    
    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;
        }
    }
    
    public override async void handle_action(string action) throws Error {
        switch (action) {
            case "ToggleComponents":
                _components_expanded = !_components_expanded;
                update_section_state("components-section", "components-items", _components_expanded);
                break;
            case "TogglePageComponents":
                _page_components_expanded = !_page_components_expanded;
                update_section_state("page-components-section", "page-components-items", _page_components_expanded);
                break;
            case "ToggleStaticResources":
                _static_resources_expanded = !_static_resources_expanded;
                update_section_state("static-resources-section", "static-resources-items", _static_resources_expanded);
                break;
        }
    }
}