Sidebar in a dialog
A sidebar in a dialog.
Preview
Built with
The components this screen renders, through their own templates. Changing one of them, or a token they read, changes this screen.
Design system gaps
What the design system lacks to render the original as it is. The screen fills each gap with native HTML on semantic tokens until a component or a token covers it.
- The settings dialog is a native dialog element shown open, on semantic tokens: there is no Dialog component yet.
- The sidebar navigation (groups, items, sub-items, current item) is native HTML on semantic tokens: there is no Navigation component yet.
Changes from the original
- There is no Dialog component: the settings dialog is shown open on the page, below its "Open Dialog" button, as a non-modal native dialog. The button opens nothing and the dialog has no close button (both need the Dialog component or script).
- On narrow screens the dialog's sidebar stacks above its content (the original hides it).
- The dialog shows three of the original's ten empty panels and does not scroll.
- Rebuilt as static HTML with the design system's component templates; every color, type style, radius, border and spacing comes from its tokens.
- The original visual design (Tailwind classes, the Geist font) is not reused.
- Lucide and Tabler icons are remapped to Material Symbols; brand logos (Apple, Google, GitHub, Meta) are dropped, the buttons keep their text.
- Placeholder images are drawn with semantic tokens.
- No script: behaviour that needs JavaScript (collapsing the sidebar, toasts, drag and drop, client-side tables) is dropped or simplified, and each screen says so.
Code
The HTML the screen renders, from apps/docs/screens/shadcn-ui/sidebar-13.screen.mjs, with the stylesheets of @quantum-ds/tokens, the reference implementation (packages/components/src/) and apps/docs/screens/screens.css.
HTML
<div class="scr-viewport">
<div class="scr-screen scr-dialog-stage">
<button
type="button"
class="ds-button"
data-emphasis="accent"
data-intent="neutral"
data-size="small"
>
<span
class="ds-button__label"
data-part="label"
>Open Dialog</span>
</button>
<dialog
class="scr-dialog"
open
aria-labelledby="sidebar-13-title"
aria-describedby="sidebar-13-description"
>
<h2 class="scr-sr" id="sidebar-13-title">Settings</h2>
<p
class="scr-sr"
id="sidebar-13-description"
>Customize your settings here.</p>
<div class="scr-shell" data-variant="sidebar" data-side="left">
<nav class="scr-sidebar" aria-label="Settings">
<div class="scr-sidebar__content">
<div class="scr-nav-group">
<ul class="scr-nav">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>notifications</span>
<span class="scr-nav__label">Notifications</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>menu</span>
<span class="scr-nav__label">Navigation</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>home</span>
<span class="scr-nav__label">Home</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>brush</span>
<span class="scr-nav__label">Appearance</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#" aria-current="page">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chat</span>
<span class="scr-nav__label">Messages & media</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>language</span>
<span class="scr-nav__label">Language & region</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>keyboard</span>
<span class="scr-nav__label">Accessibility</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>check</span>
<span class="scr-nav__label">Mark as read</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>videocam</span>
<span class="scr-nav__label">Audio & video</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>link</span>
<span class="scr-nav__label">Connected accounts</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>lock</span>
<span class="scr-nav__label">Privacy & visibility</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>settings</span>
<span class="scr-nav__label">Advanced</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="scr-main">
<div class="scr-header">
<nav
class="ds-breadcrumb"
aria-label="Breadcrumb"
data-size="small"
>
<ol class="ds-breadcrumb__list" data-part="list">
<li class="ds-breadcrumb__item" data-part="item">
<a
class="ds-breadcrumb__link"
data-part="link"
href="#"
>Settings</a>
<span
class="ds-breadcrumb__separator"
data-part="separator"
aria-hidden="true"
>chevron_right</span>
</li>
<li class="ds-breadcrumb__item" data-part="item">
<span
class="ds-breadcrumb__link"
data-part="link"
aria-current="page"
>Messages & media</span>
</li>
</ol>
</nav>
</div>
<div class="scr-content" aria-hidden="true">
<div class="scr-tile"></div>
<div class="scr-tile"></div>
<div class="scr-tile"></div>
</div>
</div>
</div>
</dialog>
</div>
</div>