App MySidebar Layout
The foundational layout for every SaaS application, admin panel, and dashboard. A fixed-width sidebar on the left, a fluid content area on the right, often with a top bar and nested inner grids. sdfsdfs
1. Full App Shell
The outer shell of a typical SaaS app. The grid has 2 columns (sidebar + content) and 2 rows (top bar + main). The sidebar and top bar are sticky; the content area scrolls.
CSS
.app-shell {
display: grid;
height: 100vh;
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"topbar topbar"
"sidebar content";
}
.topbar { grid-area: topbar; position: sticky; top: 0; }
.sidebar { grid-area: sidebar; overflow-y: auto; }
.content { grid-area: content; overflow-y: auto; }2. Collapsible MySidebar (mini vs full)
A classic pattern: sidebar collapses to icon-only mode. Since it's defined in grid-template-columns, you just change one value and the content area expands automatically.
CSS
.app-shell {
grid-template-columns: 260px 1fr; /* full */
}
.app-shell.collapsed {
grid-template-columns: 52px 1fr; /* mini */
}
/* Content expands automatically — no extra CSS! */
/* Animate the transition: */
.app-shell {
transition: grid-template-columns 0.25s ease;
}3. Right MySidebar / Contextual Panel
Some apps have a details panel on the right that opens when an item is selected. The main content shrinks to make room — all handled by changing one column definition.
CSS
.layout {
display: grid;
grid-template-columns: 1fr; /* no panel */
transition: grid-template-columns 0.2s;
}
.layout.panel-open {
grid-template-columns: 1fr 280px; /* panel open */
}
.panel {
overflow: hidden;
/* panel slides in automatically */
}4. tri-Panel Layout (nav + content + details)
Some complex apps have three panels: navigation on the left, content list in the middle, and detail view on the right. This famous pattern (used by email clients like Gmail) is trivial with Grid.
CSS
/* Classic tri-panel (Gmail style) */
.mail-app {
display: grid;
grid-template-columns: 200px 300px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"topbar topbar topbar"
"nav list detail";
height: 100vh;
}
.nav { grid-area: nav; overflow-y: auto; }
.list { grid-area: list; overflow-y: auto; }
.detail { grid-area: detail; overflow-y: auto; }