# coulisse

> Create a mobile menu effortlessly with Coulisse, a lightweight Alpine.js plugin. Display your menu anywhere in your code where you want the mobile menu to appear. Coulisse transforms an array of settings and data into a responsive mobile menu, providing s

Latest version **1.0.6** (published 2024-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install coulisse
pnpm add coulisse
yarn add coulisse
bun add coulisse
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2024-04-22 |
| First published | 2024-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Webup |
| Maintainers | nathanr10 |
| Keywords | alpine, plugin, directive, menu, mobile |

## Links

- npm: https://www.npmjs.com/package/coulisse
- Repository: https://github.com/agence-webup/coulisse.git#main
- Homepage: https://github.com/agence-webup/coulisse/tree/main#readme
- Issues: https://github.com/agence-webup/coulisse/issues
- npm.io page: https://npm.io/package/coulisse

## Dependencies (1)

- [alpinejs](https://npm.io/package/alpinejs.md) ^3.13.5

## Recent versions

- 1.0.6 (latest) — 2024-04-22
- 1.0.5 — 2024-04-22
- 1.0.4 — 2024-04-22
- 1.0.3 — 2024-04-17
- 1.0.2 — 2024-02-23
- 1.0.1 — 2024-02-23
- 1.0.0 — 2024-02-23

## README

# Coulisse

Create a mobile menu effortlessly with Coulisse, a lightweight Alpine.js plugin. Display your menu anywhere in your code where you want the mobile menu to appear. Coulisse transforms an array of settings and data into a responsive mobile menu, providing seamless navigation for your web application.
<br /><br />
## Installation
To install Coulisse, you can use npm:

```bash
npm install coulisse
```
<br /><br />
## Setup
You'll need to init Coulisse after the import of Alpinejs & before Alpine.start() like so:
```js
import Alpine from 'alpinejs'

//...

initCoulisse(settings, items)

//...

Alpine.start()
```
<br />
initCoulisse take **two parameters**:

<br />**settings**: which act globally

| settings  | default value | infos |
| ------------- | ------------- | ------------- |
| backgroundColor | '#ffffff' | any color string |
| fontSize  | '1rem'  | 16px, 0.8rem, ... |
| iconScale  | 1 | size multiplier, 1 = 100%, 1.2 = 120% |
| useGPU  | false | boolean |

<br /><br />**items**: which will be your mobile menu. **Items** is an array of object, that can carry inside of himself another Items, recursivly. here goes the following structure:

```js
const items = [
    {
        label: string,
        icon: string, // optional
        // choose between link or items
        link: string,
        items: [
            // same structure as main items
            {
                label: string,
                icon: string, // optional
                class: string, // optional
                // choose between link or items
                link: string,
                items: [
                    // ...
                ]
            }
        ],
    }
]
```

| items  | type | infos |
| ------------- | ------------- | ------------- |
| label | string | required |
| link  | string  | can't be use with items |
| icon  | string | optional |
| items  | false | can't be use with link |
| class  | string | optional |
<br /><br />
## Usage

Warning: you'll need a _**x-data**_ attached on it, or above

```html
<body>
    <!-- Place thing wherever you want your menu to be -->
    <div x-coulisse></div>

    <!-- Toggle menu -->
    <div x-coulisse-toggle>Show/Hide</div>
</body>
```
<br /><br />
You can use _**$store.coulisse.showMenu**_ to dislay different text based on menu's state

```html
    <div x-data x-coulisse-toggle x-text="$store.coulisse.showMenu ? 'Close' : 'Open'"></div>
```

---
_Source: https://npm.io/package/coulisse · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._