{#- chirp-ui: Sidebar component Vertical sidebar navigation for dashboards and admin panels. Boosted links use the shell outlet contract: target #main, swap innerHTML, and select #page-content so full-page GET responses only replace the page outlet inside the persistent shell. Active state: use match= for automatic path comparison (requires current_path in template context), or active= for explicit control. match="exact" — active when current_path == href match="prefix" — active when current_path starts with href (or equals it) active=true — always active (explicit override) Badge state: badge_label gives a richer accessible label for visible counts. badge_expected reserves count space, and badge_loading renders a pending count without layout shift. Named slots: header, footer, default (nav content). Usage: from "chirpui/sidebar.html" import sidebar, sidebar_link, sidebar_section, shell_brand_link, shell_boosted_link call sidebar() {% slot header %}
My App
{% end %} call sidebar_section("Main") sidebar_link("/", "Home", match="exact") sidebar_link("/dashboard", "Dashboard", match="prefix") sidebar_link("/admin", "Admin", active=is_admin) end {% slot footer %}v1.0{% end %} end -#} {% from "chirpui/shell_frame.html" import shell_outlet_attrs %} {% def sidebar(cls="", current_path="") %} {# @provides _nav_current_path — consumed by: sidebar_link #} {% provide _nav_current_path = current_path %} {% set _responsive_dropdowns = cls and "chirpui-sidebar--responsive-dropdowns" in cls %} {% end %} {% end %} {% def sidebar_section(title="", collapsible=false, cls="") %} {% if collapsible %}
{{ title }}
{% else %}
{% if title %}{{ title }}{% end %}
{% end %} {% end %} {% def sidebar_link(href, label, icon="", active=false, match="", boost=true, cls="", badge=none, badge_label=none, badge_expected=false, badge_loading=false) %} {# @consumes _nav_current_path from: sidebar — falls back to "" #} {% set _cp = (consume("_nav_current_path", "") or (current_path | default(""))) if match else "" %} {% set _active = active if not match else ((_cp == href) if match == "exact" else (_cp == href or _cp.startswith(href ~ "/")) if match == "prefix" else active) %} {% set _badge_expected = badge_expected or badge_loading %} {% if icon %}{{ icon | icon }}{% end %}{{ label }}{% if badge is not none or _badge_expected %}{% end %} {% end %} {# Topbar brand — same shell outlet contract as sidebar_link. #} {# Do not use inside app_shell brand_slot: app_shell already wraps the slot in one . #} {% def shell_brand_link(href="/", cls="", boost=true) %} {% slot %} {% end %} {# In-page boosted nav (buttons, evolution links) — same shell outlet contract. #} {% def shell_boosted_link(href, cls="", boost=true) %} {% slot %} {% end %} {% def sidebar_toggle(cls="") %} {% end %}