AI 사이드바 생성기.

Create a fixed 240px sidebar for an app shell: logo at the top, then icon-and-label rows for Dashboard, Analytics, Content and Settings, with Analytics and Content expanding into two or three nested sub-items behind a chevron that rotates 90 degrees when open. Mark the active route with aria-current="page", a left accent bar and a tinted row background, and auto-expand the section containing it on load. Persist expanded sections in localStorage. Pin a user block with avatar, name and workspace to the bottom with margin-top auto. Below 1024px, hide the sidebar off-canvas and open it as a drawer from a header toggle.

Create a collapsible sidebar that toggles between a 64px icon rail and a 240px expanded panel, animating the width over 200ms with a transform-friendly transition and no layout thrash on the main content. In the collapsed state, center each icon, hide the labels, and show the label as a tooltip on hover and on keyboard focus so the icons are not guesswork. Keep the toggle button at the bottom of the rail with aria-expanded and a chevron that mirrors direction. Persist the collapsed state in localStorage and honour it during server rendering so the panel does not flash open on load.

Create a documentation sidebar showing a full table of contents: six collapsible guide groups with four to eight page links each, the current page marked with aria-current="page", and beneath it an on-page heading list tracked by an IntersectionObserver so the visible section highlights as the reader scrolls. Give the sidebar its own overflow-y-auto scroll container with the header height subtracted from its max height, and scroll the active item into view on load using scrollIntoView with block: nearest so the page itself does not jump. Below 1024px, move the whole tree into a drawer.

Create a faceted filter sidebar for a product listing page: collapsible groups for Category with checkboxes and result counts, Price as a dual-handle range with numeric inputs, Brand as a searchable checkbox list capped at six visible items behind a Show all toggle, plus Rating and In stock. Reflect every applied filter in the URL query string so the filtered view is refreshable and shareable, and show applied filters as removable chips at the top with a Clear all. Announce the updated result count through an aria-live="polite" region. Below 1024px, present the whole panel as a bottom sheet behind a Filters button showing the active count.

Create a sticky right-hand sidebar for a long article: an On this page heading list built from the h2 and h3 elements with the current section highlighted by an IntersectionObserver, a reading-time estimate, a vertical share row, and a three-item related-posts list at the bottom. Use position: sticky with a top offset equal to the header height, and make sure no ancestor of the sidebar sets overflow to hidden or auto, since that silently breaks sticky. Hide the rail entirely below 1280px and render the heading list as a collapsed details element above the article body instead.

Create a three-level sidebar tree for a CMS: a filter input at the top that matches labels at any depth and auto-expands the branches containing a match, then top-level sections each holding groups which hold page links. Indent each level by 12px with a hairline guide line rather than more padding, so depth stays readable at 240px. Support full keyboard traversal with arrow keys — down and up between visible rows, right to expand, left to collapse or move to the parent — and give each expandable row aria-expanded. Keep the active branch expanded across navigations.