Skip to main content
ST FN

Mega-Nav

Ce component peut être utilisé pour créer un seul ou plusieurs panneaux de navigation.

Demo

Cliquez sur les différents boutons dans la navbar pour tester cet élément.

Installation

Importez dans votre projet

import { SlidingNav } from "@overdog/fn"

Créez une instance et initialisez-la

Le Sélecteur de l'instance doit wrapper le ou les boutons qui ouvrent votre (vos) navs. Si vous avez seulement un bouton, le sélecteur doit quand même être un parent du bouton.

new SlidingNav("#nav-buttons-group", {
   // your options here
}).init()

Ajoutez les variants Tailwind dans la section plugins de votre fichier de config

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("nav-open-1", "[data-fn-nav-open='1'] &")
         addVariant("nav-open-2", "[data-fn-nav-open='2'] &") // only if needed
         addVariant("nav-open-3", "[data-fn-nav-open='3'] &") // only if needed
         addVariant("nav-open-sidepanel", "[data-fn-nav-open='sidepanel'] &") // only if needed
      })
   ]
}

Vous avez seulement besoin d'ajouter les variants que vous utilisez. Modifier selon vos besoins.

Body scroll lock

Pour un effet "body lock" qui empêche le scroll lors de l'ouverture d'un menu, ajoutez un ou plusieurs variants de cette manière. 

addVariant("body-nav-open-1", "&[data-fn-nav-open='1']")
addVariant("body-nav-open-2", "&[data-fn-nav-open='2']") // another example
// add a variant for all the nav that needed to lock the scroll on body

Ajoutez ensuite sur votre body la classe désirée. Vous pouvez également ajouter un préfix de breakpoint.

<body class="body-nav-open-1:overflow-hidden body-nav-open-2:overflow-hidden">
Le lock du scroll sur le body est géré par élément afin de permettre de modifier le comportement selon le breakpoint et/ou selon le panneau de navigation. Par exemple, un panneau peut être pleine hauteur avec le lock du scroll et un autre, seulement 40vh avec le scroll disponible.

Twig template Code

<div class="relative w-full h-16 z-40 bg-blue-500">
  <div id="nav-buttons-group" class="container flex items-center gap-4 h-full justify-end z-50 text-6">
    	<button data-fn-nav-button="1" class="rounded-full bg-white h-10 w-10"  type="button" aria-label="Button 1" aria-haspopup="true" aria-expanded="false">1</button>
    	<button data-fn-nav-button="2" class="rounded-full bg-white h-10 w-10"  type="button" aria-label="Button 2" aria-haspopup="true" aria-expanded="false">2</button>
    	<button data-fn-nav-button="3" class="rounded-full bg-white h-10 w-10"  type="button" aria-label="Button 3" aria-haspopup="true" aria-expanded="false">3</button>
  </div>
  <nav 
      data-fn-nav-panel="1"
      class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#2B3D4F]
         nav-open-1:translate-y-0 nav-open-1:transition-transform nav-open-1:duration-300 nav-open-1:ease-nav-in"
   >
   </nav>
   <nav 
      data-fn-nav-panel="2"
      class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#f1f1f1]
         nav-open-2:translate-y-0 nav-open-2:transition-transform nav-open-2:duration-300 nav-open-2:ease-nav-in"
   >
   </nav>
   <nav 
      data-fn-nav-panel="3"
      class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#e3e3e3]
         nav-open-3:translate-y-0 nav-open-3:transition-transform nav-open-3:duration-300 nav-open-3:ease-nav-in"
   >
   </nav>
</div>

Options