Navigation Menu

import {	CircleAlertIcon,	CircleCheckIcon,	CircleDashedIcon,} from "lucide-react";import Link from "next/link";import type * as React from "react";
import {	NavigationMenu,	NavigationMenuContent,	NavigationMenuItem,	NavigationMenuLink,	NavigationMenuList,	NavigationMenuTrigger,	navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu";
const components: { title: string; href: string; description: string }[] = [	{		title: "Alert Dialog",		href: "/docs/components/alert-dialog",		description:			"A modal dialog that interrupts the user with important content and expects a response.",	},	{		title: "Hover Card",		href: "/docs/components/hover-card",		description:			"For sighted users to preview content available behind a link.",	},	{		title: "Progress",		href: "/docs/components/progress",		description:			"Displays an indicator showing the completion progress of a task.",	},	{		title: "Scroll-area",		href: "/docs/components/scroll-area",		description: "Visually or semantically separates content.",	},	{		title: "Tabs",		href: "/docs/components/tabs",		description:			"A set of layered sections of content displayed one at a time.",	},	{		title: "Tooltip",		href: "/docs/components/tooltip",		description:			"A popup that displays information related to an element on hover or focus.",	},];
export function NavigationMenuDemo() {	return (		<NavigationMenu>			<NavigationMenuList>				<NavigationMenuItem>					<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>					<NavigationMenuContent>						<ul className="w-96">							<ListItem href="/docs" title="Introduction">								Re-usable components built with Tailwind CSS.							</ListItem>							<ListItem href="/docs/installation" title="Installation">								How to install dependencies and structure your app.							</ListItem>						</ul>					</NavigationMenuContent>				</NavigationMenuItem>				<NavigationMenuItem className="hidden md:flex">					<NavigationMenuTrigger>Components</NavigationMenuTrigger>					<NavigationMenuContent>						<ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">							{components.map((component) => (								<ListItem									key={component.title}									title={component.title}									href={component.href}								>									{component.description}								</ListItem>							))}						</ul>					</NavigationMenuContent>				</NavigationMenuItem>				<NavigationMenuItem>					<NavigationMenuTrigger>With Icon</NavigationMenuTrigger>					<NavigationMenuContent>						<ul className="grid w-[200px]">							<li>								<NavigationMenuLink									className="flex-row items-center gap-2"									render={<Link href="#" />}								>									<CircleAlertIcon />									Backlog								</NavigationMenuLink>								<NavigationMenuLink									className="flex-row items-center gap-2"									render={<Link href="#" />}								>									<CircleDashedIcon />									To Do								</NavigationMenuLink>								<NavigationMenuLink									className="flex-row items-center gap-2"									render={<Link href="#" />}								>									<CircleCheckIcon />									Done								</NavigationMenuLink>							</li>						</ul>					</NavigationMenuContent>				</NavigationMenuItem>				<NavigationMenuItem>					<NavigationMenuLink						className={navigationMenuTriggerStyle()}						render={<Link href="/docs" />}					>						Docs					</NavigationMenuLink>				</NavigationMenuItem>			</NavigationMenuList>		</NavigationMenu>	);}
function ListItem({	title,	children,	href,	className,	...props}: React.ComponentPropsWithRef<"li"> & { href: string }) {	return (		<li className={className} {...props}>			<NavigationMenuLink render={<Link href={href} />}>				<div className="flex flex-col gap-1 text-sm">					<div className="font-medium leading-none">{title}</div>					<div className="line-clamp-2 text-muted-foreground">{children}</div>				</div>			</NavigationMenuLink>		</li>	);}

import Link from "next/link";import {	NavigationMenu,	NavigationMenuItem,	NavigationMenuLink,	NavigationMenuList,	navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu";
export function NavigationMenuLinkDemo() {	return (		<NavigationMenu>			<NavigationMenuList>				<NavigationMenuItem>					<NavigationMenuLink						className={navigationMenuTriggerStyle()}						render={<Link href="/docs" />}					>						Documentation					</NavigationMenuLink>				</NavigationMenuItem>				<NavigationMenuItem>					<NavigationMenuLink						className={navigationMenuTriggerStyle()}						render={<Link href="/docs/components" />}					>						Components					</NavigationMenuLink>				</NavigationMenuItem>				<NavigationMenuItem>					<NavigationMenuLink						className={navigationMenuTriggerStyle()}						render={<Link href="/docs/rtl" />}					>						RTL					</NavigationMenuLink>				</NavigationMenuItem>			</NavigationMenuList>		</NavigationMenu>	);}

"use client";
import {	CircleAlertIcon,	CircleCheckIcon,	CircleDashedIcon,} from "lucide-react";import Link from "next/link";import type * as React from "react";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	NavigationMenu,	NavigationMenuContent,	NavigationMenuItem,	NavigationMenuLink,	NavigationMenuList,	NavigationMenuTrigger,	navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu";
const translations: Translations = {	en: {		dir: "ltr",		values: {			gettingStarted: "Getting started",			introduction: "Introduction",			introductionDesc: "Re-usable components built with Tailwind CSS.",			installation: "Installation",			installationDesc: "How to install dependencies and structure your app.",			withIcon: "With Icon",			backlog: "Backlog",			toDo: "To Do",			done: "Done",			docs: "Docs",		},	},	ar: {		dir: "rtl",		values: {			gettingStarted: "البدء",			introduction: "مقدمة",			introductionDesc:				"مكونات قابلة لإعادة الاستخدام مبنية باستخدام Tailwind CSS.",			installation: "التثبيت",			installationDesc: "كيفية تثبيت التبعيات وتنظيم تطبيقك.",			withIcon: "مع أيقونة",			backlog: "قائمة الانتظار",			toDo: "المهام",			done: "منجز",			docs: "الوثائق",		},	},	he: {		dir: "rtl",		values: {			gettingStarted: "התחלה",			introduction: "הקדמה",			introductionDesc: "רכיבים לשימוש חוזר שנבנו עם Tailwind CSS.",			installation: "התקנה",			installationDesc: "כיצד להתקין תלויות ולבנות את האפליקציה שלך.",			withIcon: "עם אייקון",			backlog: "רשימת המתנה",			toDo: "לעשות",			done: "הושלם",			docs: "תיעוד",		},	},};
export function NavigationMenuRtl() {	const { dir, t, language } = useTranslation(translations, "ar");
	return (		<NavigationMenu dir={dir} align={dir === "rtl" ? "end" : "start"}>			<NavigationMenuList>				<NavigationMenuItem>					<NavigationMenuTrigger>{t.gettingStarted}</NavigationMenuTrigger>					<NavigationMenuContent						dir={dir}						data-lang={dir === "rtl" ? language : undefined}					>						<ul className="w-96">							<ListItem href="/docs" title={t.introduction}>								{t.introductionDesc}							</ListItem>							<ListItem href="/docs/installation" title={t.installation}>								{t.installationDesc}							</ListItem>						</ul>					</NavigationMenuContent>				</NavigationMenuItem>				<NavigationMenuItem>					<NavigationMenuTrigger>{t.withIcon}</NavigationMenuTrigger>					<NavigationMenuContent						dir={dir}						data-lang={dir === "rtl" ? language : undefined}					>						<ul className="grid w-[200px]">							<li>								<NavigationMenuLink									className="flex-row items-center gap-2"									render={<Link href="#" />}								>									<CircleAlertIcon />									{t.backlog}								</NavigationMenuLink>								<NavigationMenuLink									className="flex-row items-center gap-2"									render={<Link href="#" />}								>									<CircleDashedIcon />									{t.toDo}								</NavigationMenuLink>								<NavigationMenuLink									className="flex-row items-center gap-2"									render={<Link href="#" />}								>									<CircleCheckIcon />									{t.done}								</NavigationMenuLink>							</li>						</ul>					</NavigationMenuContent>				</NavigationMenuItem>				<NavigationMenuItem>					<NavigationMenuLink						className={navigationMenuTriggerStyle()}						data-lang={dir === "rtl" ? language : undefined}						render={<Link href="/docs" />}					>						{t.docs}					</NavigationMenuLink>				</NavigationMenuItem>			</NavigationMenuList>		</NavigationMenu>	);}
function ListItem({	title,	children,	href,	...props}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {	return (		<li {...props}>			<NavigationMenuLink render={<Link href={href} />}>				<div className="flex flex-col gap-1 text-sm">					<div className="font-medium leading-none">{title}</div>					<div className="line-clamp-2 text-muted-foreground">{children}</div>				</div>			</NavigationMenuLink>		</li>	);}