侧栏 Sidebar

<div style="display:flex;height:420px;border:1px solid var(--line)">
<aside class="xxd-sidebar" data-xxd-sidebar id="sb1" style="--sidebar-w:232px">
  <div class="xxd-sidebar__head"><span class="xxd-logo"><span class="xxd-logo__mark"></span><span data-sidebar-hide>小小东</span></span></div>
  <nav class="xxd-sidebar__body">
    <div class="xxd-sidebar__group">
      <div class="xxd-sidebar__label">内容</div>
      <a class="xxd-sidebar__item" href="#" aria-current="page"><i data-xxd-icon="House" data-size="18"></i><span>首页</span></a>
      <a class="xxd-sidebar__item" href="#"><i data-xxd-icon="Bookmark" data-size="18"></i><span>收藏</span><span class="xxd-badge">12</span></a>
      <button class="xxd-sidebar__item" aria-expanded="true" data-sidebar-sub="sb1-sub"><i data-xxd-icon="Folder" data-size="18"></i><span>风格库</span></button>
      <div class="xxd-sidebar__sub" id="sb1-sub">
        <a class="xxd-sidebar__item" href="#"><span>海报</span></a>
        <a class="xxd-sidebar__item" href="#"><span>封面</span></a>
      </div>
    </div>
    <div class="xxd-sidebar__group">
      <div class="xxd-sidebar__label">账号</div>
      <a class="xxd-sidebar__item" href="#"><i data-xxd-icon="Settings" data-size="18"></i><span>设置</span></a>
    </div>
  </nav>
  <div class="xxd-sidebar__foot"><button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" data-xxd-sidebar-toggle="sb1" aria-label="折叠侧栏"><i data-xxd-icon="PanelsTopLeft" data-size="16"></i></button></div>
  <div class="xxd-sidebar__resize" data-sidebar-resize></div>
</aside>
<main style="flex:1;min-width:0;padding:16px" class="xxd-muted">内容区</main>
</div>

export function SidebarDemo() {
  return (
    <div style={{ height: 320, display: "flex", border: "1px solid var(--line)" }}>
      <Sidebar.Provider contained defaultOpen className="h-full min-h-0!">
        <Sidebar>
          <Sidebar.Content>
            <Sidebar.Group>
              <Sidebar.GroupLabel>内容</Sidebar.GroupLabel>
              <Sidebar.Menu>
                <Sidebar.MenuButton icon={(p: object) => <Icon name="House" {...p} />} active>
                  首页
                </Sidebar.MenuButton>
                <Sidebar.MenuButton icon={(p: object) => <Icon name="Bookmark" {...p} />}>收藏</Sidebar.MenuButton>
              </Sidebar.Menu>
            </Sidebar.Group>
          </Sidebar.Content>
        </Sidebar>
      </Sidebar.Provider>
    </div>
  );
}