Sidebar
1024px 이상에서 떠 있는 Glass 사이드바와 최근 연 기록.
- 출시 화면에서 사용
개요
미리보기
예시
상태
펼침
접힘
오늘 선택
이렇게 · 이렇게 하지 않기
- 이렇게 탭 막대와 같은 세 목적지를 같은 순서로 둔다.
- 이렇게 최근 연 기록은 5개까지이고 사용자가 연 순서만 따른다.
- 이렇게 접어도 아이콘마다 이름이 남는다.
- 이렇게 하지 않기 폭을 애니메이션하지 않는다. hover로 펼치지 않는다. 스프링 없음.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
collapsed? | boolean | false | 처음 접힌 상태(아이콘 레일). 1024–1279에서만 쓴다. |
active? | 'today' | 'records' | 'you' | records | 지금 목적지. 선택 캡슐 + aria-current="page". |
recent? | readonly { id, title, href }[] | — | 최근 연 기록. 연 순서대로 최대 5개. 비면 섹션 숨김. 미리보기는 5개. |
hrefs? | Record<'today' | 'records' | 'you', string> | — | 목적지. 기본 /today, /records, /you(TabBar와 같음). |
onCollapsedChange?: (collapsed) => void | — | — | 접기 버튼을 눌렀을 때 호출된다. 레이아웃(내용 열 폭)은 소비자가 즉시 바꾼다. |
ref | — | — | ref는 <nav>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-label(기본 “주요”) 등 네이티브 nav 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: Tab: 접기 버튼(aria-expanded, aria-controls) → 링크 3개 → 최근 연 기록.
- 접을 때 초점이 사라질 항목(최근 연 기록) 안에 있었으면 접기 버튼으로 옮긴다.
- 접힌 상태에서도 링크 이름은 VisuallyHidden으로 남는다.
- 접기는 폭이 아니라 Glass 판의 translateX(move)다. 동작 줄이기면 즉시. forced-colors에서 선택은 Highlight 테두리.