chaulmark/chrishaulmark-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add Contact link to header nav that opens ContactModal

Browse source
This commit is contained in:
chaulmark 2026-05-24 10:53:58 -06:00
parent 3040032479
commit 1c7995704d
1 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/layout/Header.tsx
View file

@ -5,10 +5,12 @@ import Link from 'next/link'
import { useState } from 'react' import { useState } from 'react'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { Menu, X } from 'lucide-react' import { Menu, X } from 'lucide-react'
import ContactModal from '../shared/ContactModal'
export default function Header() { export default function Header() {
const pathname = usePathname() const pathname = usePathname()
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const [isContactModalOpen, setIsContactModalOpen] = useState(false)
const isActive = (path: string) => { const isActive = (path: string) => {
return pathname === path return pathname === path
@ -61,13 +63,13 @@ export default function Header() {
<li key={item.path}> <li key={item.path}>
<Link href={item.path} className="relative group"> <Link href={item.path} className="relative group">
<span className={`transition-colors ${ <span className={`transition-colors ${
isActive(item.path) isActive(item.path)
? 'text-blue-600' ? 'text-blue-600'
: 'hover:text-blue-600' : 'hover:text-blue-600'
}`}> }`}>
{item.label} {item.label}
</span> </span>
<motion.div <motion.div
className={`absolute -bottom-1 left-0 h-0.5 bg-gradient-to-r from-blue-600 to-mcdi-maroon transition-all duration-300 ${ className={`absolute -bottom-1 left-0 h-0.5 bg-gradient-to-r from-blue-600 to-mcdi-maroon transition-all duration-300 ${
isActive(item.path) ? 'w-full' : 'w-0 group-hover:w-full' isActive(item.path) ? 'w-full' : 'w-0 group-hover:w-full'
}`} }`}
@ -75,6 +77,12 @@ export default function Header() {
</Link> </Link>
</li> </li>
))} ))}
<li>
<button onClick={() => setIsContactModalOpen(true)} className="relative group">
<span className="transition-colors hover:text-blue-600">Contact</span>
<motion.div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-600 to-mcdi-maroon transition-all duration-300 group-hover:w-full" />
</button>
</li>
</ul> </ul>
</nav> </nav>
@ -95,12 +103,12 @@ export default function Header() {
> >
<ul className="flex flex-col p-4 space-y-4"> <ul className="flex flex-col p-4 space-y-4">
{navItems.map((item) => ( {navItems.map((item) => (
<motion.li <motion.li
key={item.path} key={item.path}
whileHover={{ x: 10 }} whileHover={{ x: 10 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<Link <Link
href={item.path} href={item.path}
className={`block p-2 rounded-lg ${ className={`block p-2 rounded-lg ${
isActive(item.path) isActive(item.path)
@ -113,9 +121,19 @@ export default function Header() {
</Link> </Link>
</motion.li> </motion.li>
))} ))}
<motion.li whileHover={{ x: 10 }} whileTap={{ scale: 0.95 }}>
<button
className="block w-full text-left p-2 rounded-lg hover:bg-gray-50"
onClick={() => { setIsOpen(false); setIsContactModalOpen(true) }}
>
Contact
</button>
</motion.li>
</ul> </ul>
</motion.nav> </motion.nav>
</div> </div>
<ContactModal isOpen={isContactModalOpen} onClose={() => setIsContactModalOpen(false)} />
</motion.header> </motion.header>
) )
} }