dmc-pip-drawer 0.1.0
Glass morphism Drawer + ScrollArea component for Dash Mantine Components
License: MIT
Requires Python: >=3.8
Keywords: dash, plotly, mantine, drawer, scrollarea, glass-morphism

# dmc-pip-drawer

A glass morphism Drawer + ScrollArea component for [Dash Mantine Components](https://www.dash-mantine-components.com/).

[![PyPI version](https://img.shields.io/pypi/v/dmc-pip-drawer.svg)](https://pypi.org/project/dmc-pip-drawer/)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## Features

- **Single-scroll-overlay pattern** — no double scrollbars
- **Glass morphism scrollbar** — Apple-inspired frosted glass effect
- **Controllable glass opacity** — `glass_opacity` prop (0.0 transparent → 1.0 opaque)
- **Dark mode support** — automatic adaptation
- **Mobile-first** — bottom drawer, responsive scrollbar sizing
- **Zero JS** — pure Python composition, no build step

## Installation

```bash
pip install dmc-pip-drawer
```

## Quick Start

```python
from dash import Dash, callback, Output, Input
import dash_mantine_components as dmc
from dmc_pip_drawer import PipDrawer

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    children=[
        dmc.Button("Open Drawer", id="open-btn"),
        PipDrawer(
            id="my-drawer",
            title="My Panel",
            glass_opacity=0.85,
            children=[
                dmc.Text("Hello from PipDrawer!"),
                # Add enough content to scroll...
            ],
        ),
    ]
)

@callback(
    Output("my-drawer", "opened"),
    Input("open-btn", "n_clicks"),
    prevent_initial_call=True,
)
def open_drawer(n):
    return True

if __name__ == "__main__":
    app.run(debug=True)
```

**Note:** Copy `pip_drawer.css` to your `assets/` folder, or it ships automatically when installed via pip.

## API

```python
PipDrawer(
    id="drawer-id",           # Required — used in callbacks
    children=None,             # Content inside the ScrollArea
    title="Panel Title",       # Drawer header
    opened=False,              # Controlled via callback
    position="bottom",         # "bottom", "top", "left", "right"
    size="92%",                # Max height/width
    scroll_type="auto",        # ScrollArea type
    className="",              # Additional CSS classes
    padding="md",              # Content padding (Mantine spacing)
    glass_opacity=0.85,        # Glass background opacity (0.0–1.0)
    **drawer_props             # Passthrough to dmc.Drawer
)
```

### `glass_opacity`

Controls the translucency of the drawer's frosted glass background.

| Value | Effect |
|-------|--------|
| `0.0` | Fully transparent — content behind is fully visible |
| `0.5` | Semi-transparent — balanced glass effect |
| `0.85` | Default — subtle translucency with strong frosted glass |
| `1.0` | Fully opaque — no see-through |

Works in both light and dark mode automatically.

## CSS

The package includes `pip_drawer.css` with:

1. **Single-scroll-overlay** — structural CSS for the Drawer
2. **Glass morphism scrollbar** — styled track + thumb with backdrop-filter
3. **Dark mode** — adapted colors via `[data-mantine-color-scheme="dark"]`
4. **Responsive sizing** — mobile, desktop, large screen, touch device breakpoints
5. **Reduced motion** — respects `prefers-reduced-motion`

## Links

- [pip-install-python](https://pip-install-python.com)
- [Plotly Pro](https://plotly.pro)
- [GitHub](https://github.com/pip-install-python/dmc-pip-drawer)
- [PyPI](https://pypi.org/project/dmc-pip-drawer/)

## License

MIT License - Copyright (c) 2025 Pip Install Python LLC

See [LICENSE](LICENSE) for details.