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"> <ul className="space-y-2">
{serviceLinks.map((service) => ( {serviceLinks.map((service) => (
<li key={service.name}> <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} {service.name}
</Link> </Link>
</li> </li>
@ -137,7 +137,7 @@ const Header = () => {
<ul className="space-y-2"> <ul className="space-y-2">
{industryLinks.map((industry) => ( {industryLinks.map((industry) => (
<li key={industry.name}> <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} {industry.name}
</Link> </Link>
</li> </li>

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

@ -1,9 +1,10 @@
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet' import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
import { useState } from 'react' import { useState } from 'react'
import { Link } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
const MobileNav = () => { const MobileNav = () => {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const location = useLocation()
const primaryLinks = [ const primaryLinks = [
{ name: 'Home', href: '/' }, { name: 'Home', href: '/' },
@ -33,6 +34,8 @@ const MobileNav = () => {
setIsOpen(false) setIsOpen(false)
} }
const isActive = (href) => location.pathname === href
return ( return (
<div className="md:hidden"> <div className="md:hidden">
<Sheet open={isOpen} onOpenChange={setIsOpen}> <Sheet open={isOpen} onOpenChange={setIsOpen}>
@ -75,7 +78,7 @@ const MobileNav = () => {
<Link <Link
to={link.href} to={link.href}
onClick={closeMobileMenu} 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.name}
</Link> </Link>
@ -93,7 +96,7 @@ const MobileNav = () => {
<Link <Link
to={service.href} to={service.href}
onClick={closeMobileMenu} 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} {service.name}
</Link> </Link>
@ -111,7 +114,7 @@ const MobileNav = () => {
<Link <Link
to={industry.href} to={industry.href}
onClick={closeMobileMenu} 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} {industry.name}
</Link> </Link>