Skip to content
v0.2.7

Drawer

Slide-over panels for detail views, configuration forms, and HTMX-driven workflows that need more room than a modal.

Default Rendered example
Usage Example 
@drawer.Drawer(drawer.Config{
    ID:    "projectDetails",
    Title: "Project details",
    Side:  drawer.SideRight,
    Width: drawer.WidthLG,
}) {
    <div id="projectDetails-body">...</div>
}

Left Side

Set Side: drawer.SideLeft when the panel should enter from the navigation edge.

Left Side Rendered example
Left Side 
@drawer.Drawer(drawer.Config{
    ID:    "filtersDrawer",
    Title: "Filters",
    Side:  drawer.SideLeft,
    Width: drawer.WidthSM,
			}) {
    <div id="filtersDrawer-body">...</div>
}

Top and Bottom

Use SideTop or SideBottom for navigation drawers, command surfaces, and mobile action trays. Height controls the vertical extent.

Top and Bottom Rendered example
Top and Bottom 
@drawer.Drawer(drawer.Config{
    ID:     "mobileNavigation",
    Title:  "Navigation",
    Side:   drawer.SideTop,
    Height: drawer.HeightMD,
}) {
    <nav>...</nav>
}

Persistent Drawer

Set Persistent: true when the drawer hosts an unfinished form or confirmation flow. The close button still works, but backdrop clicks and Escape do not dismiss it.

Persistent Drawer Rendered example
Persistent Drawer 
@drawer.Drawer(drawer.Config{
    ID:         "editProfile",
    Title:      "Edit profile",
    Persistent: true,
}) {
    <form id="editProfile-body">...</form>
}

HTMX Body Target

Give BodyID a stable value so HTMX responses can replace only the drawer body, then open the drawer with a drawer:open event or HX-Trigger header.

HTMX Body Target Rendered example
HTMX Body Target 
@drawer.Drawer(drawer.Config{
    ID:     "orderDrawer",
    Title:  "Order details",
    BodyID: "orderDrawerBody",
}) {
    <div id="orderDrawerBody">Select an order.</div>
}

<button
    hx-get="/orders/42/drawer"
    hx-target="#orderDrawerBody"
    x-on:click="$dispatch('drawer:open', { id: 'orderDrawer' })">
    View order
</button>

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/drawer
Open v0.2.7 API
Modal Spinner