Top Navigation 5 – Minimal center-aligned links with inline auth

1"use client";
2 
3import { useRef, useState } from "react";
4 
5import { cn } from "@/lib/utils";
6import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
7import { useClickOutside } from "@/hooks/use-click-outside";
8import { useIsMobile } from "@/hooks/use-mobile";
9import { Button } from "@/components/ui/button";
10import {
11  NavigationMenu,
12  NavigationMenuItem,
13  NavigationMenuLink,
14  NavigationMenuList,
15  navigationMenuTriggerStyle,
16} from "@/components/ui/navigation-menu";
17import {
18  MobileNavigationMenu,
19  MobileNavigationMenuItem,
20  MobileNavigationMenuLink,
21  MobileNavigationMenuList,
22  mobileNavigationMenuTriggerStyle,
23} from "@/components/shadcncraft/pro-marketing/mobile-navigation-menu";
24import { PlaceholderLogo } from "@/components/shadcncraft/pro-marketing/placeholder-logo";
25 
26// Defaults to Tailwind's md: breakpoint.
27// Change to 1024 + use lg: classes for 1024px breakpoint or whatever breakpoint you want to use
28const MOBILE_BREAKPOINT = 768;
29 
30export function TopNavigation5() {
31  const [isMenuOpen, setIsMenuOpen] = useState(false);
32  const toggleMenu = () => setIsMenuOpen((prev) => !prev);
33 
34  const navigationContainerRef = useRef<HTMLDivElement>(null);
35  const isMobile = useIsMobile(MOBILE_BREAKPOINT);
36 
37  useClickOutside(navigationContainerRef, () => {
38    if (isMobile && isMenuOpen) {
39      setIsMenuOpen(false);
40    }
41  });
42 
43  return (
44    // To make this a sticky navigation, you can add `sticky top-0 z-50` classes to the parent div
45    <div
46      className="w-full bg-background py-3.5 transition-all ease-in-out"
47      role="navigation"
48      aria-label="Website top navigation"
49      ref={navigationContainerRef}
50    >
51      <div className="relative mx-auto flex max-w-7xl flex-col justify-between px-6 md:flex-row lg:gap-10 lg:px-10">
52        {/* Logo and Toggle Mobile Nav Button */}
53        <div className="flex items-center justify-between">
54          {/* Replace with actual logo */}
55          <a href="/" aria-label="Go to home page">
56            <PlaceholderLogo />
57          </a>
58 
59          {/* Toggle Mobile Nav Button - Visible on screen sizes < 768px */}
60          <Button
61            variant="ghost"
62            size="icon"
63            className="md:hidden"
64            onClick={toggleMenu}
65            aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
66          >
67            {isMenuOpen ? (
68              <IconPlaceholder
69                lucide="X"
70                tabler="IconX"
71// … truncated