null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 Pull Requests Packages Projects Releases Wiki Activity

feat(ui): nav active-state styling for header and mobile nav (batch 0.6.0)

This commit is contained in:
null 2026-05-17 15:15:00 -05:00
parent 0e89bc2c0a
commit c4d40c39ba
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/layout/Header.jsx
View File

@ -124,7 +124,7 @@ const Header = () => {
<ul className="space-y-2">
{serviceLinks.map((service) => (
<li key={service.name}>
<Link to={service.href} onClick={closeMobileMenu} className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0">
<Link to={service.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}>
{service.name}
</Link>
</li>
@ -137,7 +137,7 @@ const Header = () => {
<ul className="space-y-2">
{industryLinks.map((industry) => (
<li key={industry.name}>
<Link to={industry.href} onClick={closeMobileMenu} className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0">
<Link to={industry.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}>
{industry.name}
</Link>
</li>

11
src/components/layout/MobileNav.jsx
View File

@ -1,9 +1,10 @@
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
const MobileNav = () => {
const [isOpen, setIsOpen] = useState(false)
const location = useLocation()
const primaryLinks = [
{ name: 'Home', href: '/' },
@ -33,6 +34,8 @@ const MobileNav = () => {
setIsOpen(false)
}
const isActive = (href) => location.pathname === href
return (
<div className="md:hidden">
<Sheet open={isOpen} onOpenChange={setIsOpen}>
@ -75,7 +78,7 @@ const MobileNav = () => {
<Link
to={link.href}
onClick={closeMobileMenu}
className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2"
className={`block text-base font-medium py-2 transition-colors ${isActive(link.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
>
{link.name}
</Link>
@ -93,7 +96,7 @@ const MobileNav = () => {
<Link
to={service.href}
onClick={closeMobileMenu}
className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
>
{service.name}
</Link>
@ -111,7 +114,7 @@ const MobileNav = () => {
<Link
to={industry.href}
onClick={closeMobileMenu}
className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
>
{industry.name}
</Link>