ar.azizan
f7a163c4aa
- Introduced a new FeaturedPostsGrid component to display featured posts on the homepage. - Updated the Home component to fetch and render featured posts from the WordPress API. - Changed instances of "بلاگ" to "دانشنامه" across various components for consistent terminology.
112 lines
5.9 KiB
TypeScript
112 lines
5.9 KiB
TypeScript
'use client'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { Logo } from '@/components/logo'
|
|
import { Menu, X } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
import { ThemeToggle } from '@/components/theme-toggle'
|
|
|
|
const menuItems = [
|
|
{ name: 'صفحه اصلی', href: '/' },
|
|
{ name: 'دانشنامه', href: '/blog' },
|
|
{ name: 'راه حلها', href: '/solutions' },
|
|
// { name: 'قیمتگذاری', href: '/pricing' },
|
|
{ name: 'درباره ما', href: '/about' },
|
|
]
|
|
|
|
function isLinkActive(pathname: string, href: string): boolean {
|
|
if (href === '/') return pathname === '/'
|
|
return pathname === href || pathname.startsWith(href + '/')
|
|
}
|
|
|
|
export const HeroHeader = () => {
|
|
const pathname = usePathname()
|
|
const [menuState, setMenuState] = React.useState(false)
|
|
const [isScrolled, setIsScrolled] = React.useState(false)
|
|
|
|
React.useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50)
|
|
}
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
return (
|
|
<header>
|
|
<nav
|
|
data-state={menuState && 'active'}
|
|
className="fixed z-20 w-full px-2">
|
|
<div className={cn('mx-auto mt-2 max-w-6xl px-2 transition-all duration-300 lg:px-2 bg-background/30 backdrop-blur-md rounded-md border border-border/10', isScrolled && 'bg-background/20 max-w-4xl shadow-lg lg:px-5')}>
|
|
<div className="relative flex flex-wrap items-center justify-between gap-2 lg:gap-0">
|
|
<div className="flex w-full justify-between lg:w-auto">
|
|
<Logo />
|
|
<button
|
|
onClick={() => setMenuState(!menuState)}
|
|
aria-label={menuState == true ? 'بستن منو' : 'باز کردن منو'}
|
|
className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden">
|
|
<Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-4 duration-200" />
|
|
<X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-4 -rotate-180 scale-0 opacity-0 duration-200" />
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div className="absolute inset-0 m-auto hidden size-fit lg:flex items-center">
|
|
<ul className="flex gap-2 text-sm">
|
|
{menuItems.map((item, index) => {
|
|
const active = isLinkActive(pathname ?? '', item.href)
|
|
return (
|
|
<li key={index}>
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
'text-muted-foreground hover:text-foreground hover:bg-accent/20 transition-all duration-300 relative group p-2 px-4 rounded-md',
|
|
active && 'text-foreground bg-accent/40'
|
|
)}>
|
|
<span className="relative z-10">{item.name}</span>
|
|
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div className="in-data-[state=active]:block lg:in-data-[state=active]:flex mb-3 hidden w-full flex-wrap items-center justify-end space-y-8 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
|
|
<div className="lg:hidden w-full">
|
|
|
|
<ul className="text-base flex flex-col items-stretch">
|
|
{menuItems.map((item, index) => {
|
|
const active = isLinkActive(pathname ?? '', item.href)
|
|
return (
|
|
<li key={index}>
|
|
<Link
|
|
href={item.href}
|
|
onClick={() => setMenuState(false)}
|
|
className={cn(
|
|
'text-muted-foreground block w-full hover:text-foreground hover:bg-accent/20 transition-all duration-300 relative group p-2 px-4 rounded-md',
|
|
active && 'text-foreground bg-accent/40'
|
|
)}>
|
|
<span className="relative z-10">{item.name}</span>
|
|
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div className={`flex justify-end max-md:absolute top-0.5 left-8 in-data-[state=active]:block`}>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
)
|
|
}
|