Sidebar on the right
A sidebar on the right.
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.
- Collapsing the sidebar (off canvas or to an icon rail) has no pattern without script 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
- The sidebar does not collapse (that needs script, and so does the trigger button): it is always expanded on wide screens and stacks below the content on narrow ones. The sidebar trigger at the end of the header is dropped.
- The rail that resizes the sidebar is dropped.
- 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-14.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">
<div class="scr-shell" data-variant="sidebar" data-side="right">
<div class="scr-main">
<header 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="#"
>Build Your Application</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"
>Data Fetching</span>
</li>
</ol>
</nav>
</header>
<main class="scr-content">
<h1 class="scr-sr">Data Fetching</h1>
<div class="scr-stack" aria-hidden="true">
<div class="scr-tiles">
<div class="scr-tile"></div>
<div class="scr-tile"></div>
<div class="scr-tile"></div>
</div>
<div class="scr-tile" data-size="large"></div>
</div>
</main>
</div>
<nav class="scr-sidebar" aria-label="Table of Contents">
<div class="scr-sidebar__content">
<div
class="scr-nav-group"
role="group"
aria-labelledby="sidebar-14-toc-label"
>
<p
class="scr-nav-group__label"
id="sidebar-14-toc-label"
>Table of Contents</p>
<ul class="scr-nav">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label scr-strong">Getting Started</span>
</a>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Installation</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Project Structure</span>
</a>
</li>
</ul>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label scr-strong">Build Your Application</span>
</a>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Routing</span>
</a>
</li>
<li class="scr-nav__item">
<a
class="scr-nav__link"
href="#"
aria-current="page"
>
<span class="scr-nav__label">Data Fetching</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Rendering</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Caching</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Styling</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Optimizing</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Configuring</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Testing</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Authentication</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Deploying</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Upgrading</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Examples</span>
</a>
</li>
</ul>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label scr-strong">API Reference</span>
</a>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Components</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">File Conventions</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Functions</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">next.config.js Options</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">CLI</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Edge Runtime</span>
</a>
</li>
</ul>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label scr-strong">Architecture</span>
</a>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Accessibility</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Fast Refresh</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Next.js Compiler</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Supported Browsers</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Turbopack</span>
</a>
</li>
</ul>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label scr-strong">Community</span>
</a>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Contribution Guide</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>