coulisse v1.0.6
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.
Installation
To install Coulisse, you can use npm:
npm install coulisseSetup
You'll need to init Coulisse after the import of Alpinejs & before Alpine.start() like so:
import Alpine from 'alpinejs'
//...
initCoulisse(settings, items)
//...
Alpine.start()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 |
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:
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 |
Usage
Warning: you'll need a x-data attached on it, or above
<body>
<!-- Place thing wherever you want your menu to be -->
<div x-coulisse></div>
<!-- Toggle menu -->
<div x-coulisse-toggle>Show/Hide</div>
</body>You can use $store.coulisse.showMenu to dislay different text based on menu's state
<div x-data x-coulisse-toggle x-text="$store.coulisse.showMenu ? 'Close' : 'Open'"></div>