Skip to main content
ST FN

Navigation drawer

Le Side-Panel utilise le même componennt SlidingNav que la mega-nav. Les mêmes options sont donc disponibles.

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>