Drawer

<rhx-button rhx-variant="brand"
            data-rhx-drawer-open="end-drawer">
    Open End Drawer
</rhx-button>

<rhx-drawer id="end-drawer" rhx-label="Notifications">
    <p>You have no new notifications.</p>
    <p>Check back later for updates.</p>
    <rhx-drawer-footer>
        <rhx-button rhx-variant="ghost"
                    data-rhx-drawer-close="end-drawer">
            Close
        </rhx-button>
    </rhx-drawer-footer>
</rhx-drawer>

<rhx-button rhx-variant="outline"
            data-rhx-drawer-open="start-drawer">
    Open Start Drawer
</rhx-button>

<rhx-drawer id="start-drawer" rhx-label="Navigation"
            rhx-placement="start">
    <nav style="display: flex; flex-direction: column; gap: var(--rhx-space-sm);">
        <a href="#">Dashboard</a>
        <a href="#">Settings</a>
        <a href="#">Profile</a>
        <a href="#">Help</a>
    </nav>
</rhx-drawer>

<rhx-button rhx-variant="outline"
            data-rhx-drawer-open="top-drawer">
    Open Top Drawer
</rhx-button>
<rhx-button rhx-variant="outline"
            data-rhx-drawer-open="bottom-drawer">
    Open Bottom Drawer
</rhx-button>

<rhx-drawer id="top-drawer" rhx-label="Alert Banner"
            rhx-placement="top">
    <p>This drawer slides down from the top of the viewport.</p>
</rhx-drawer>

<rhx-drawer id="bottom-drawer" rhx-label="Cookie Consent"
            rhx-placement="bottom">
    <p>We use cookies to improve your experience.</p>
    <rhx-drawer-footer>
        <rhx-button rhx-variant="ghost"
                    data-rhx-drawer-close="bottom-drawer">
            Decline
        </rhx-button>
        <rhx-button rhx-variant="brand"
                    data-rhx-drawer-close="bottom-drawer">
            Accept
        </rhx-button>
    </rhx-drawer-footer>
</rhx-drawer>

<div style="position: relative; height: 300px;
     border: var(--rhx-border-width) solid var(--rhx-color-border);
     border-radius: var(--rhx-radius-md); overflow: hidden;">
    <div style="padding: var(--rhx-space-lg);">
        <rhx-button rhx-variant="outline" rhx-size="small"
                    data-rhx-drawer-open="contained-drawer">
            Toggle Sidebar
        </rhx-button>
        <p>Main content area. The drawer opens within this container.</p>
    </div>

    <rhx-drawer id="contained-drawer" rhx-label="Filters"
                rhx-placement="start" rhx-contained>
        <label><input type="checkbox" /> Active</label>
        <label><input type="checkbox" /> Pending</label>
        <label><input type="checkbox" /> Archived</label>
    </rhx-drawer>
</div>

<rhx-button rhx-variant="brand"
            hx-get="/Docs/Components/Drawer?handler=UserProfile"
            hx-target="#profile-drawer .rhx-drawer__body"
            data-rhx-drawer-open="profile-drawer">
    View Profile
</rhx-button>

<rhx-drawer id="profile-drawer" rhx-label="User Profile">
    <p>Loading...</p>
</rhx-drawer>