Skip to main content

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-50 inset-0 hidden bg-slate-900/50 opacity-0 transition-opacity is-open:opacity-100">
</div>

<div class="relative bg-white w-full h-[100px] border-b border-[#e3e3e3]">
   <div id="sidepanel-button-wrapper" class="container flex items-center h-full justify-end">
      <button 
         data-fn-nav-button="sidepanel" 
         class="rounded-full bg-gray-400 h-12 w-12 z-50"  
         type="button" 
         aria-label="Button 1" 
         aria-haspopup="true" 
         aria-expanded="false">
         1
      </button>
  </div>
  <nav data-fn-nav-panel="sidepanel"
      class="py-24 fixed z-50 top-0 right-0 w-1/2 h-full translate-x-full overflow-y-scroll overflow-x-hidden bg-[#e3e3e3]
         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>Close button</button>
   </nav>
</div>