Tailwind CSS bietet auch Hilfsprogramme für Interaktionen und Übergänge, die reibungslose Animationen ermöglichen. Darüber hinaus verbessern die Anpassungsoptionen und die unterstützende Community die Funktionalität und Integration von Flyout-Menüs in ein breiteres Anwendungsökosystem.
Hier ist das GitHub Repo mit dem gesamten Code und darunter der Link zur Beispielwebsite.
Example page hosted on Vercel -> https://nextjs14-contentful-syntax-highlighting.vercel.app/
Verwendeter Stack
Ich werde mit meinem Standard-Stack beginnen:
Next.js 14 als Web-Framework, und ich werde die mitgelieferte Middleware Edge-Funktion verwenden
TailwindCss for Styling
Contentful CMS (Kostenloses Abo)
Vercel für das Hosting
Anpassen der Navigationskomponente für das neue Flyout-Mennü
Wir passen die Datei src/components/header/navbar.component.tsx an und beginnen mit einigen neuen Imports.
import { Popover } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import {
BookmarkSquareIcon,
CalendarDaysIcon,
LifebuoyIcon,
} from "@heroicons/react/24/outline";Wir fahren fort mit einer neuen Konstanten, die in diesem Beispiel statisch ist und in einem nachfolgenden Schritt durch Daten aus Contentful (headless CMS) ersetzt wird.
const resources = [
{
name: "Overview",
description: "Learn how to maximize our platform",
href: "/seo-tools",
icon: BookmarkSquareIcon,
},
{
name: "Slugify",
description: "Get all of your questions answered",
href: "/seo-tools/slugify",
icon: LifebuoyIcon,
},
];Menü für den Desktopbereich
Nun folgt die Integration des Menüs für den Desktop-Breakpoint (Zeilennummer 207).
<Popover className="relative">
<Popover.Button className="border-transparent text-gray-500 dark:text-gray-50 hover:border-gray-300 hover:text-gray-700 inline-flex items-center text-base px-1 pt-1 border-b-2 font-medium">
<span>Seo-Tools</span>
<ChevronDownIcon className="w-5 h-5" aria-hidden="true" />
</Popover.Button>
<Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4 transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in">
<div className="flex-auto w-screen max-w-md overflow-hidden text-sm leading-6 bg-white shadow-lg rounded-3xl ring-1 ring-gray-900/5">
<div className="p-4">
{resources.map((item) => (
<div
key={item.name}
className="relative flex p-4 rounded-lg group gap-x-6 hover:bg-gray-50"
>
<div className="flex items-center justify-center flex-none mt-1 rounded-lg h-11 w-11 bg-gray-50 group-hover:bg-white">
<item.icon
className="w-6 h-6 text-gray-600 group-hover:text-indigo-600"
aria-hidden="true"
/>
</div>
<div>
<a
href={item.href}
className="font-semibold text-gray-900"
>
{item.name}
<span className="absolute inset-0" />
</a>
<p className="mt-1 text-gray-600">
{item.description}
</p>
</div>
</div>
))}
</div>
</div>
</Popover.Panel>
</Popover>Menü für Mobile
Zum Schluss integrieren wir noch das Menü für den Mobilebereich (Breakpoint Mobile Zeilennummer 461)
<Popover className="relative">
<Popover.Button className="border-transparent text-gray-600 dark:text-gray-100 hover:bg-gray-100 dark:hover:text-indigo-700 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
<span>Seo-Tools</span>
<ChevronDownIcon className="w-5 h-5" aria-hidden="true" />
</Popover.Button>
<Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4 transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in">
<div className="flex-auto w-screen max-w-md overflow-hidden text-sm leading-6 bg-white shadow-lg rounded-3xl ring-1 ring-gray-900/5">
<div className="p-4">
{resources.map((item) => (
<div
key={item.name}
className="relative flex p-4 rounded-lg group gap-x-6 hover:bg-gray-50"
>
<div className="flex items-center justify-center flex-none mt-1 rounded-lg h-11 w-11 bg-gray-50 group-hover:bg-white">
<item.icon
className="w-6 h-6 text-gray-600 group-hover:text-indigo-600"
aria-hidden="true"
/>
</div>
<div>
<a
href={item.href}
className="font-semibold text-gray-900"
>
{item.name}
<span className="absolute inset-0" />
</a>
<p className="mt-1 text-gray-600">
{item.description}
</p>
</div>
</div>
))}
</div>
</div>
</Popover.Panel>
</Popover>Endergebnis
Es ist sehr einfach und unkompliziert. In einer nachfolgenden Geschichte werden wir es verbessern und den erforderlichen Menüpunkt mit dem Contentful CMS verbinden, also bleiben Sie dran.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
