navbar

1"use client"
2 
3import { ThemeToggle } from "@/components/nui/theme-provider"
4import {
5  Drawer,
6  DrawerContent,
7  DrawerDescription,
8  DrawerHeader,
9  DrawerTitle,
10  DrawerTrigger,
11} from "@/components/ui/drawer"
12import { cn } from "@/lib/utils"
13import {
14  RiArrowLeftLongLine,
15  RiArrowUpSLine,
16  RiBrushAiLine,
17  RiCodeAiFill,
18  RiCodeAiLine,
19  RiGithubFill,
20  RiLinkedinBoxFill,
21  RiMenu4Fill,
22  RiTwitterXFill,
23} from "@remixicon/react"
24import Link from "next/link"
25import { usePathname } from "next/navigation"
26import { FC, useState } from "react"
27 
28const doesPathMatchHref = (pathname: string, href: string): boolean => {
29  const cleanedPathname = pathname.split(/[?#]/)[0]
30 
31  if (href === "/") {
32    return (
33      cleanedPathname === "/" ||
34      pathname.startsWith("/#") ||
35      pathname.startsWith("/?")
36    )
37  }
38 
39  if (href === cleanedPathname) {
40    return true
41  }
42 
43  if (href === "/ui") {
44    return (
45      cleanedPathname === "/ui" ||
46      pathname.startsWith("/ui#") ||
47      pathname.startsWith("/ui?")
48    )
49  }
50 
51  const regex = new RegExp(`^${href}/[^/]+.*$`)
52  return regex.test(cleanedPathname)
53}
54 
55const navItems = [
56  { name: "home", href: "/" },
57  { name: "blogs", href: "/blogs" },
58  { name: "projects", href: "/projects" },
59  { name: "contact", href: "/contact" },
60]
61 
62const uiNavItems = [
63  { name: "home", href: "/ui" },
64  { name: "docs", href: "/ui/docs" },
65  { name: "components", href: "/ui/components" },
66  { name: "blocks", href: "/ui/blocks" },
67]
68 
69const socialLinks = [
70  { href: "https://github.com/nrjdalal", icon: RiGithubFill },
71  { href: "https://www.linkedin.com/in/nrjdalal", icon: RiLinkedinBoxFill },
72  { href: "https://x.com/nrjdalal_com", icon: RiTwitterXFill },
73]
74 
75interface NavigationLinksProps {
76  items: { name: string; href: string }[]
77  hoveredItem: string | null
78  setHoveredItem: (item: string | null) => void
79  pathname: string
80}
81 
82const NavigationLinks: FC<NavigationLinksProps> = ({
83  items,
84  hoveredItem,
85  setHoveredItem,
86  pathname,
87}) => {
88  const [open, setOpen] = useState(false)
89 
90  return (
91    <>
92      <div className="text-muted-foreground hidden cursor-pointer items-center divide-x font-medium lg:flex">
93        {items.map((item) => (
94          <Link
95            key={item.name}
96            href={item.href}
97            className={cn(
98              "group relative flex h-full items-center px-7.5",
99              doesPathMatchHref(pathname, item.href)
100                ? "text-foreground"
101                : "hover:text-foreground",
102// … truncated