coulisse
v1.0.6
Published
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
Downloads
1
Maintainers
nathanr10Readme
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>