Side-Panel
Demo
Cliquez sur le bouton dans la navbar pour ouvrir le side panel.
Installation
Comportement
- Un data attribut est ajouté à la balise
body
pour chaque navigation ouverte, donc vous pouvez styliser différemment n'importe quel élément du DOM (par exemple, un bouton de style hamburger devient un x) - N'oubliez pas d'ajouter le variant correspondant dans votre fichier de config Tailwind CSS. Voir Installation pour un exemple.
Importez la fonction dans votre projet
import { SlidingNav } from "@overdog/fn"
// side-panel use the sliding nav (only style changes)
Créez et initialisez une instance
Le Sélecteur de l'instance doit wrapper le bouton qui ouvrent votre nav.
new SlidingNav("#sidepanel-button-wrapper", {
overlaySelector: "#overlay"
}).init()
Twig template Code
{# optionnal overlay - place it before the closing body tag #}
<div
id="overlay"
data-fn-overlay
class="fixed z-40 inset-0 hidden bg-gray-700/50 opacity-0 transition-opacity is-open:opacity-100">
</div>
<div class="relative w-full h-16 bg-blue-500">
<div id="sidepanel-button-wrapper" class="container flex items-center h-full justify-end text-6">
<button
data-fn-nav-button="sidepanel"
class="rounded-full bg-white h-10 w-10 z-50"
type="button"
aria-label="Button 1"
aria-haspopup="true"
aria-expanded="false">
1
</button>
</div>
<nav data-fn-nav-panel="sidepanel"
class="p-8 fixed z-50 top-0 right-0 w-1/2 h-full translate-x-full overflow-y-scroll overflow-x-hidden bg-gray-200
nav-open-sidepanel:-translate-x-0 nav-open-sidepanel:transition-transform nav-open-sidepanel:duration-300 nav-open-sidepanel:ease-nav-in"
>
<button data-fn-nav-close class="rounded-full bg-blue-500 px-4 py-1.5 text-5 text-white">Close me</button>
</nav>
</div>