Overlays drawerpaneloverlay

Slide-over (Right)

A panel that slides in from the right side of the screen, common for filters or settings.

Filters

×
Category
Price Range
Rating

Usage

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

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

<SideDrawerRight>
  <div class="p-6">
    <h4 class="mb-4">Quick Settings</h4>
    <div class="stack-v gap-2">
      <label>Notifications</label>
      <label>Privacy</label>
      <label>Security</label>
    </div>
  </div>
</SideDrawerRight>
--- import { SideDrawerRight } from 'astro-component-kit'; --- <SideDrawerRight> <div class="p-6"> <h4 class="mb-4">Quick Settings</h4> <div class="stack-v gap-2"> <label>Notifications</label> <label>Privacy</label> <label>Security</label> </div> </div> </SideDrawerRight>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/Slide-over(Right).astro and paste the following code:

astro 
---
---
<div class="drawer-wrap">
  <div class="drawer-overlay"></div>
  <div class="drawer-panel right">
    <div class="drawer-header"><h3>Filters</h3><span>×</span></div>
    <div class="drawer-body"><slot /></div>
  </div>
</div>
<style>
  .drawer-wrap { position: fixed; inset: 0; z-index: 2000; }
  .drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
  .drawer-panel { position: absolute; top: 0; bottom: 0; width: 350px; background: #080b14; border-left: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .drawer-panel.right { right: 0; transform: translateX(0); }
  .drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; color: #fff; }
</style>
--- --- <div class="drawer-wrap"> <div class="drawer-overlay"></div> <div class="drawer-panel right"> <div class="drawer-header"><h3>Filters</h3><span>×</span></div> <div class="drawer-body"><slot /></div> </div> </div> <style> .drawer-wrap { position: fixed; inset: 0; z-index: 2000; } .drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); } .drawer-panel { position: absolute; top: 0; bottom: 0; width: 350px; background: #080b14; border-left: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .drawer-panel.right { right: 0; transform: translateX(0); } .drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; color: #fff; } </style>

Quick Info

Category
Overlays
Filename
Slide-over(Right).astro
Dependencies
None — pure Astro + CSS
Tags
drawerpaneloverlay