Navigation Menu

templ NavigationMenuDemo() {
	@ui.NavigationMenu("", nil) {
		@ui.NavigationMenuList("", nil) {
			<li class="relative" x-data="{ open: false }" x-on:keydown.esc.window="open = false">
				<button
					type="button"
					aria-haspopup="true"
					x-bind:aria-expanded="open"
					x-bind:data-state="open ? 'open' : 'closed'"
					class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none data-[state=open]:bg-accent/50"
					x-on:click="open = !open"
					x-on:mouseenter="open = true"
					x-on:mouseleave="open = false"
				>
					Getting started
					<svg class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
				</button>
				<div
					class="absolute left-0 top-full z-50 mt-1.5 w-[400px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg"
					x-show="open"
					x-transition
					x-cloak
					x-on:mouseenter="open = true"
					x-on:mouseleave="open = false"
					x-on:mousedown.outside="open = false"
				>
					<ul class="grid gap-3 p-4 md:grid-cols-2">
						<li class="row-span-3">
							<a href="#" class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md hover:bg-accent">
								<div class="mb-2 mt-4 text-lg font-medium">shadcn-templ</div>
								<p class="text-sm leading-tight text-muted-foreground">Beautifully designed components built with Templ and Alpine.js.</p>
							</a>
						</li>
						@navMenuListItem("Introduction", "Re-usable components built using Templ and Alpine.js.", "#")
						@navMenuListItem("Installation", "How to install dependencies and structure your app.", "#")
						@navMenuListItem("Typography", "Styles for headings, paragraphs, lists...etc", "#")
					</ul>
				</div>
			</li>
			<li class="relative" x-data="{ open: false }" x-on:keydown.esc.window="open = false">
				<button
					type="button"
					aria-haspopup="true"
					x-bind:aria-expanded="open"
					x-bind:data-state="open ? 'open' : 'closed'"
					class="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none data-[state=open]:bg-accent/50"
					x-on:click="open = !open"
					x-on:mouseenter="open = true"
					x-on:mouseleave="open = false"
				>
					Components
					<svg class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
				</button>
				<div
					class="absolute left-0 top-full z-50 mt-1.5 w-[500px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg"
					x-show="open"
					x-transition
					x-cloak
					x-on:mouseenter="open = true"
					x-on:mouseleave="open = false"
					x-on:mousedown.outside="open = false"
				>
					<ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
						@navMenuListItem("Alert Dialog", "A modal dialog that interrupts the user.", "#")
						@navMenuListItem("Hover Card", "For sighted users to preview content available behind a link.", "#")
						@navMenuListItem("Progress", "Displays an indicator showing the completion progress.", "#")
						@navMenuListItem("Scroll-area", "Visually or semantically separates content.", "#")
						@navMenuListItem("Tabs", "A set of layered sections of content.", "#")
						@navMenuListItem("Tooltip", "A popup that displays info when element receives focus.", "#")
					</ul>
				</div>
			</li>
			<li>
				<a
					href="#"
					class="inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none"
				>
					Documentation
				</a>
			</li>
		}
	}
}