Skip to main content

Navbar Hidden

Une navbar hide and show utilisant requestAnimationFrame

Installation

Importez la fonction dans votre projet

import { Navbar } from "@overdog/fn"

Créez et initialisez une instance - exemple

new Navbar("#navbar-hidden", {
   scrollTopDistance: 20,
   behavior: "hidden"
}).init()

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

Note : si vous utilisez plusieurs éléments de Overdog FN qui nécessitent les mêmes variants, vous les ajoutez seulement une fois.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")
      })
   ]
}

Twig template Code

<div  
   id="navbar-hidden" 
   class="fixed w-full h-[60px] z-30 top-0 border-b bg-white border-slate 
   transition-transform duration-600
   is-open:-translate-y-[60px] is-open:duration-600">
</div>

Options