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

<!-- add another container here for your logo -->
<div class="container fixed inset-x-0 top-0 z-30" id="navbar-hidden">
  <div class=
  "absolute bg-slate-800 rounded-full h-[80px] w-[80px] right-[15px] top-[30px] transition-transform duration-600
  parent-is-open:-translate-y-[110px] parent-is-open:duration-600"
  >
  </div>
</div>

Options