Sidebar

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SidebarAtAGlance(Component):
    template = """
      <div class="sidebar-layout">
        <c-CSidebar id="workspace" tag="nav" label="Workspace navigation">
          <c-fill name="header"><strong>Northstar</strong></c-fill>
          <c-fill name="default">
            <c-CList variant="surface">
              <c-CListItem href="#overview" c-current="True">
                <c-fill name="start"><c-CIcon name="home" /></c-fill>
                <c-fill name="default">Overview</c-fill>
              </c-CListItem>
              <c-CListItem href="#projects">
                <c-fill name="start"><c-CIcon name="folder" /></c-fill>
                <c-fill name="default">Projects</c-fill>
              </c-CListItem>
              <c-CListItem href="#reports">
                <c-fill name="start"><c-CIcon name="file" /></c-fill>
                <c-fill name="default">Reports</c-fill>
              </c-CListItem>
            </c-CList>
          </c-fill>
          <c-fill name="footer"><small>ada@example.com</small></c-fill>
        </c-CSidebar>
        <main><h2 id="overview">Overview</h2><p>The primary page remains ordinary application layout.</p></main>
      </div>
    """
    css = """
      :where(.sidebar-layout) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1.5rem;
        min-block-size: 24rem;
      }
      :where(.sidebar-layout main) { padding: 1rem; }
    """


preview = SidebarAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SidebarNavigation(Component):
    template = """
      <c-CSidebar tag="nav" label="Project navigation" c-collapsed="True">
        <c-fill name="header"><span data-citry-sidebar-expanded-only><strong>Atlas</strong></span></c-fill>
        <c-fill name="default">
          <c-CList>
            <c-CListItem href="#activity" c-current="True">
              <c-fill name="start"><c-CIcon name="clock" /></c-fill>
              <c-fill name="default">Activity</c-fill>
            </c-CListItem>
            <c-CListItem href="#members">
              <c-fill name="start"><c-CIcon name="user" /></c-fill>
              <c-fill name="default">Members</c-fill>
            </c-CListItem>
            <c-CListItem href="#settings">
              <c-fill name="start"><c-CIcon name="settings" /></c-fill>
              <c-fill name="default">Settings</c-fill>
            </c-CListItem>
          </c-CList>
        </c-fill>
      </c-CSidebar>
    """


preview = SidebarNavigation()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SidebarCollapseModes(Component):
    template = """
      <div class="sidebar-modes">
        <c-CSidebar label="Rail example" c-collapsed="True" collapsible="rail" size="sm">
          <strong>Rail content remains available.</strong>
        </c-CSidebar>
        <c-CSidebar label="Offcanvas example" c-collapsed="True" collapsible="offcanvas" size="sm">
          <strong>The panel starts hidden.</strong>
        </c-CSidebar>
        <c-CSidebar label="Permanent example" collapsible="none" size="sm">
          <strong>No toggle is rendered.</strong>
        </c-CSidebar>
      </div>
    """
    css = ":where(.sidebar-modes){display:flex;align-items:flex-start;gap:1rem;min-block-size:14rem}"


preview = SidebarCollapseModes()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SidebarControlled(Component):
    template = """
      <section x-data="{
        collapsed:false,
        last:'No request yet',
        change(next){this.last=`Requested ${next ? 'collapse' : 'expand'}`;this.collapsed=next},
      }">
        <p><output x-text="last">No request yet</output></p>
        <c-CSidebar
          label="Controlled navigation"
          $c-props="{collapsed,onCollapsedChange:change}"
        >
          <strong>Controlled Sidebar content</strong>
        </c-CSidebar>
      </section>
    """


preview = SidebarControlled()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SidebarPresentation(Component):
    template = """
      <c-CSidebar
        label="Sticky tools"
        variant="floating"
        size="lg"
        c-sticky="True"
        c-style="{'--cui-sidebar-sticky-offset':'1rem'}"
      >
        <c-fill name="header"><strong>Inspector</strong></c-fill>
        <c-fill name="default">
          <p>Long tool content scrolls independently between fixed regions.</p>
          <p>Keep adding contextual controls here.</p>
        </c-fill>
        <c-fill name="footer"><c-CButton size="sm">Apply</c-CButton></c-fill>
      </c-CSidebar>
    """


preview = SidebarPresentation()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SidebarCustomization(Component):
    template = """
      <c-CSidebar label="Custom navigation" variant="floating" side="inline-end" c-class_="['ocean-sidebar']">
        <c-fill name="toggle"><c-CIcon name="menu" /></c-fill>
        <c-fill name="header"><strong>Ocean lab</strong></c-fill>
        <c-fill name="default"><p>Public variables and parts customize the stable landmark.</p></c-fill>
      </c-CSidebar>
    """
    css = """
      :where(.ocean-sidebar) {
        --cui-sidebar-background: light-dark(#eff8ff, #102a43);
        --cui-sidebar-border-color: light-dark(#84caff, #2e90fa);
        --cui-sidebar-width: 18rem;
      }
    """


preview = SidebarCustomization()
preview  # noqa: B018