Navigation

Posts

Hello from motd.com

Tour

01/06

The Problem

Your content is narrow.
Your screen is wide.

Traditional layouts waste the flanks or stuff every control into a single scrolling column. DCS turns ambient whitespace into two independent UI surfaces — navigation on the left, controls on the right — without stealing pixels from the story.

wastedcontentwasted

navcontentcontrols

The Pattern

One sidebar.
Many panels.
Zero clutter.

Each sidebar holds a horizontal carousel of panels. Chevrons and dots cycle through them without leaving the column. Unlimited surfaces, constant footprint — the one you are reading right now sits inside a panel that lives inside a carousel.

Mobile‑First

100% viewport.
Transform‑based.
Buttery smooth.

Below 1280 px, sidebars live off‑screen at full width. A hamburger reveals them via transform — GPU‑accelerated, no reflow, no drawer library. Tap outside to dismiss.

.sidebar {
  transform: translateX(-100%);
  transition: transform 300ms;
}
.sidebar.open {
  transform: translateX(0);
}

Desktop

Pinned.
Persistent.
Asymmetric by default.

At 1280 px+, sidebars pin as columns. Content receives margin‑inline — it reflows cleanly instead of being overlapped. Each side pins independently, so asymmetric layouts fall out for free.

10–100%

user‑adjustable width per side

Motion

Slide for space.
Fade for focus.

Panels transition by sliding (physical — they move past you) or fading (semantic — they dissolve in place). Toggle live from the Appearance panel on the right and watch the difference between a spatial model and a content‑parity one.

slide

fade

Persistence

Pick it up
where you left it.

Theme, scheme, pin state, active panel — all survive reloads via a single localStorage key. An inline pre‑script paints the correct state before the first frame. Zero flash. Zero dependencies. Zero build step.

themedark

schemeocean

pinLefttrue

panelLeft0

carouselslide

Posts

Hello from motd.com

Appearance

Your content is narrow.Your screen is wide.

One sidebar.Many panels.Zero clutter.

100% viewport.Transform‑based.Buttery smooth.

Pinned.Persistent.Asymmetric by default.

Slide for space.Fade for focus.