Layout layoutsidebardashboard

Sidebar Page Layout

Two-column layout with fixed-width sidebar and liquid content.

Usage

Copy the full block below to use this component with its imports.

---
import { SidebarPageLayout } from 'astro-component-kit';
---

<SidebarLayoutWrapper>Content</SidebarLayoutWrapper>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/SidebarPageLayout.astro and paste the following code:

---
---
<div class="side-page">
  <aside class="side-col"><slot name="sidebar" /></aside>
  <main class="main-col"><slot name="main" /></main>
</div>
<style>
  .side-page { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
  .side-col { border-right: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0,0,0,0.1); }
  .main-col { padding: 2rem; }
</style>

Quick Info

Category: Layout
Filename: SidebarPageLayout.astro
Dependencies: None — pure Astro + CSS
Tags: layoutsidebardashboard