When we set out to build andal.io — a digital home for 4,000 years of Tamil heritage — we faced a problem that no existing UX pattern fully solved: how do you make a vast amount of rich, meaningful content available to a visitor without forcing them to scroll away from the page they are already reading?
The answer we arrived at, after many iterations, is what we now call the Sidebar-to-Modal pattern. This article explains what it is, why it works, and how it came to be.
The Problem: Content Richness vs. Viewport Scarcity
The Aandaal Project covers an enormous canvas — the Thiruppavai poetry of Aandaal, the proposed Aandaal Lake development near Chennai, heritage temples, the Guru Seva Network, blockchain donations, cultural tourism, and much more. A traditional approach would spread this across dozens of pages connected by navigation menus, forcing visitors to lose their reading context every time they explore a new topic.
Single-page designs solve the navigation problem but create a scrolling problem — visitors have to scroll through hundreds of viewport-heights of content to discover what interests them. On mobile, this becomes particularly frustrating.
The Solution: Three Surfaces, One Content Source
The Sidebar-to-Modal pattern uses a single HTML source — a hidden div called andal-sidebar-inner — to power three distinct surfaces simultaneously:
1. The Desktop Sidebar
On screens wider than 1,050px, a fixed right sidebar displays a vertical stack of image cards. Each card shows a thumbnail image and a title. The sidebar scrolls independently of the main content and is always visible, creating a persistent discovery surface that the visitor can browse at any moment without losing their reading position.
2. The Mobile Drawer
On smaller screens, the sidebar is hidden and replaced by a pull tab on the right edge — a small red button marked PROJECT. Tapping it slides open a full-height drawer from the right, revealing the same card collection. The drawer clones the sidebar content dynamically via JavaScript, so there is no duplication in the HTML source. Closing the drawer returns the visitor exactly where they were.
3. The Expand Modal
Every card in both the sidebar and the drawer carries an expand icon (⛶). Tapping or clicking it opens a full-screen modal showing the card's full-resolution image and its complete descriptive text — readable at a comfortable font size, on a rich dark background. The modal works identically on desktop and mobile. When it opens, the sidebar and all floating UI elements are hidden automatically, giving the visitor undivided focus.
@media (min-width:1050px) { #andal-right-sidebar { display: block; } }
@media (max-width:1049px) { #andal-drawer-tab { display: flex; } }
#sc-modal-overlay { display: none; /* shown by JS on expand */ }
Why This Is Different From Existing Patterns
| Pattern | Always Visible | Works on Mobile | Rich Content | No Scroll Required |
|---|---|---|---|---|
| Navigation sidebar | ✅ | ❌ (hidden) | ❌ (links only) | ✅ |
| Accordion / dropdown | ❌ | ✅ | ✅ | ❌ (requires scroll) |
| Modal dialog | ❌ | ✅ | ✅ | ✅ |
| News right rail | ✅ | ❌ | ❌ (teasers only) | ✅ |
| Sidebar-to-Modal | ✅ | ✅ (drawer) | ✅ (full modal) | ✅ |
The key distinction is that the Sidebar-to-Modal pattern is the only approach that satisfies all four criteria simultaneously. Navigation sidebars are always visible but carry no content. Accordions carry content but require scrolling. Modals are rich but have no persistent trigger surface. The Sidebar-to-Modal pattern combines a persistent trigger surface (sidebar/drawer) with a rich content destination (modal), bridging these traditionally separate UX paradigms.
The Technical Architecture
The elegance of the implementation lies in a single HTML source powering all three surfaces. The sidebar inner div is cloned into the drawer using JavaScript's innerHTML. Element IDs are prefixed with mob- to avoid conflicts. The expand buttons use HTML5 data- attributes to carry their content, which means the text and image URL survive the cloning operation without any escaping or re-parsing issues.
Lazy loading is applied to all card images — they are stored as data-src attributes and only swapped to src when the sidebar or drawer enters the viewport. This means nine card images add zero weight to the initial page load, contributing to the site's PageSpeed score of 82 on desktop.
Lessons for Content-Rich Cultural Websites
The Sidebar-to-Modal pattern emerged from a specific constraint: we had too much meaningful content and too little screen space. But the underlying principle applies to any website where the depth of content matters as much as its breadth.
Heritage sites, museums, educational platforms, and storytelling projects all face the same tension. Their content deserves to be read slowly and fully — not skimmed in a dropdown or abandoned mid-scroll. A persistent discovery surface that respects the visitor's current reading position, while offering a rich full-screen expansion on demand, is a natural fit for any content-first web experience.
We are releasing the pattern openly. If you build something with it, we would love to hear about it.
Try It Yourself
Visit andal.io on desktop to see the sidebar in action, or on mobile to experience the drawer and the expand modals. The full source is visible in the page HTML — no framework, no library, plain JavaScript and CSS.