Sidebar in a popover
A sidebar in a popover.
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.
- Collapsible groups are native details elements on semantic tokens: there is no Disclosure component yet.
- Menus whose trigger is a whole row (team, version or user switcher) use the Dropdown next to the row: its trigger is a Button with a text label, it cannot hold an avatar or two lines.
- Per-item action menus are Dropdowns with a visible "More" label: the Dropdown has no icon-only trigger.
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 above the content on narrow ones. The sidebar trigger and its separator are dropped.
- The rail that resizes the sidebar is dropped.
- The favorites list shows the first six of its ten items.
- Workspaces are disclosure summaries that open their pages: the original makes each workspace a link with a separate toggle, and an "add page" button with no action, which is dropped.
- The "More" items that close the favorites and workspaces lists are links (the original has buttons with no action).
- The page actions popover (a sidebar menu inside a popover) is a Dropdown with the same groups of actions. It is closed until opened: the original opens it on load with script.
- The star button has an accessible name, "Add to favorites" (the original has none).
- 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-10.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="left">
<nav class="scr-sidebar" aria-label="Main">
<div class="scr-sidebar__header">
<div class="scr-identity">
<span class="scr-tile-mark">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>keyboard_command_key</span>
</span>
<span class="scr-identity__text">
<span class="scr-identity__title">Acme Inc</span>
</span>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-10-teams-trigger"
popovertarget="sidebar-10-teams"
>
<span
class="ds-button__label"
data-part="label"
>Teams</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-teams"
popover
aria-labelledby="sidebar-10-teams-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-teams"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>keyboard_command_key</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Acme Inc (⌘1)</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-teams"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>graphic_eq</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Acme Corp. (⌘2)</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-teams"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>keyboard_command_key</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Evil Corp. (⌘3)</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-teams"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>add</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Add team</span>
</button>
</li>
</ul>
</div>
</div>
</div>
<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"
>search</span>
<span class="scr-nav__label">Search</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"
>auto_awesome</span>
<span class="scr-nav__label">Ask AI</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"
>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"
>inbox</span>
<span class="scr-nav__label">Inbox</span>
</a>
</li>
</ul>
</div>
</div>
<div class="scr-sidebar__content">
<div
class="scr-nav-group"
role="group"
aria-labelledby="sidebar-10-favorites-label"
>
<p
class="scr-nav-group__label"
id="sidebar-10-favorites-label"
>Favorites</p>
<ul class="scr-nav">
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">📊</span>
<span class="scr-nav__label">Project Management & Task Tracking</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-10-favorite-0-trigger"
popovertarget="sidebar-10-favorite-0"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-favorite-0"
popover
aria-labelledby="sidebar-10-favorite-0-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>bookmark_remove</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Remove from Favorites</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>link</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Copy Link</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>open_in_new</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open in New Tab</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🍳</span>
<span class="scr-nav__label">Family Recipe Collection & Meal Planning</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-10-favorite-1-trigger"
popovertarget="sidebar-10-favorite-1"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-favorite-1"
popover
aria-labelledby="sidebar-10-favorite-1-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>bookmark_remove</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Remove from Favorites</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>link</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Copy Link</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>open_in_new</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open in New Tab</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">💪</span>
<span class="scr-nav__label">Fitness Tracker & Workout Routines</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-10-favorite-2-trigger"
popovertarget="sidebar-10-favorite-2"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-favorite-2"
popover
aria-labelledby="sidebar-10-favorite-2-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>bookmark_remove</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Remove from Favorites</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>link</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Copy Link</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>open_in_new</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open in New Tab</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">📚</span>
<span class="scr-nav__label">Book Notes & Reading List</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-10-favorite-3-trigger"
popovertarget="sidebar-10-favorite-3"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-favorite-3"
popover
aria-labelledby="sidebar-10-favorite-3-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-3"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>bookmark_remove</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Remove from Favorites</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-3"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>link</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Copy Link</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-3"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>open_in_new</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open in New Tab</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-3"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🌱</span>
<span class="scr-nav__label">Sustainable Gardening Tips & Plant Care</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-10-favorite-4-trigger"
popovertarget="sidebar-10-favorite-4"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-favorite-4"
popover
aria-labelledby="sidebar-10-favorite-4-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-4"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>bookmark_remove</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Remove from Favorites</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-4"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>link</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Copy Link</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-4"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>open_in_new</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open in New Tab</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-4"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🗣️</span>
<span class="scr-nav__label">Language Learning Progress & Resources</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-10-favorite-5-trigger"
popovertarget="sidebar-10-favorite-5"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-favorite-5"
popover
aria-labelledby="sidebar-10-favorite-5-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-5"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>bookmark_remove</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Remove from Favorites</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-5"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>link</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Copy Link</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-5"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>open_in_new</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Open in New Tab</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-favorite-5"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</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"
>more_horiz</span>
<span class="scr-nav__label">More</span>
</a>
</li>
</ul>
</div>
<div
class="scr-nav-group"
role="group"
aria-labelledby="sidebar-10-workspaces-label"
>
<p
class="scr-nav-group__label"
id="sidebar-10-workspaces-label"
>Workspaces</p>
<ul class="scr-nav">
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span aria-hidden="true">🏠</span>
<span class="scr-nav__label">Personal Life Management</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">📔</span>
<span class="scr-nav__label">Daily Journal & Reflection</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🍏</span>
<span class="scr-nav__label">Health & Wellness Tracker</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🌟</span>
<span class="scr-nav__label">Personal Growth & Learning Goals</span>
</a>
</li>
</ul>
</details>
</li>
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span aria-hidden="true">💼</span>
<span class="scr-nav__label">Professional Development</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🎯</span>
<span class="scr-nav__label">Career Objectives & Milestones</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🧠</span>
<span class="scr-nav__label">Skill Acquisition & Training Log</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🤝</span>
<span class="scr-nav__label">Networking Contacts & Events</span>
</a>
</li>
</ul>
</details>
</li>
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span aria-hidden="true">🎨</span>
<span class="scr-nav__label">Creative Projects</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">✍️</span>
<span class="scr-nav__label">Writing Ideas & Story Outlines</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🖼️</span>
<span class="scr-nav__label">Art & Design Portfolio</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🎵</span>
<span class="scr-nav__label">Music Composition & Practice Log</span>
</a>
</li>
</ul>
</details>
</li>
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span aria-hidden="true">🏡</span>
<span class="scr-nav__label">Home Management</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">💰</span>
<span class="scr-nav__label">Household Budget & Expense Tracking</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🔧</span>
<span class="scr-nav__label">Home Maintenance Schedule & Tasks</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">📅</span>
<span class="scr-nav__label">Family Calendar & Event Planning</span>
</a>
</li>
</ul>
</details>
</li>
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span aria-hidden="true">🧳</span>
<span class="scr-nav__label">Travel & Adventure</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🗺️</span>
<span class="scr-nav__label">Trip Planning & Itineraries</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">🌎</span>
<span class="scr-nav__label">Travel Bucket List & Inspiration</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span aria-hidden="true">📸</span>
<span class="scr-nav__label">Travel Journal & Photo Gallery</span>
</a>
</li>
</ul>
</details>
</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"
>more_horiz</span>
<span class="scr-nav__label">More</span>
</a>
</li>
</ul>
</div>
</div>
<div class="scr-sidebar__footer">
<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"
>calendar_today</span>
<span class="scr-nav__label">Calendar</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"
>tune</span>
<span class="scr-nav__label">Settings</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"
>widgets</span>
<span class="scr-nav__label">Templates</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"
>delete</span>
<span class="scr-nav__label">Trash</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"
>help</span>
<span class="scr-nav__label">Help</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<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">
<span
class="ds-breadcrumb__link"
data-part="link"
aria-current="page"
>Project Management & Task Tracking</span>
</li>
</ol>
</nav>
<div class="scr-header__end">
<span class="scr-muted scr-strong">Edit Oct 08</span>
<button
type="button"
class="ds-icon-button"
data-emphasis="ghost"
data-intent="neutral"
data-size="small"
aria-label="Add to favorites"
>
<span
class="ds-icon-button__icon"
data-part="icon"
aria-hidden="true"
>star</span>
</button>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="small"
data-part="trigger"
id="sidebar-10-actions-trigger"
popovertarget="sidebar-10-actions"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-10-actions"
popover
aria-labelledby="sidebar-10-actions-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>tune</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Customize Page</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>description</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Turn into wiki</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>link</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Copy Link</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>content_copy</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Duplicate</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>redo</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Move to</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Move to Trash</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>undo</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Undo</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>show_chart</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>View analytics</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>view_agenda</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Version History</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Show delete pages</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>notifications</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Notifications</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>arrow_upward</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Import</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-10-actions"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>arrow_downward</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Export</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</header>
<main class="scr-content">
<h1 class="scr-sr">Project Management & Task Tracking</h1>
<div class="scr-stack scr-column" aria-hidden="true">
<div class="scr-tile" data-size="row"></div>
<div class="scr-tile" data-size="large"></div>
</div>
</main>
</div>
</div>
</div>
</div>