usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(landing): add disabled prop support to SubsectionNav 

- Added optional disabled property to NavItem interface
- Disabled items show gray text and cursor-not-allowed
- Desktop: Tooltip on hover shows "Coming soon"
- Mobile: Inline "(Coming soon)" label after item text
- Uses aria-disabled for accessibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Oleg Proskurin 2025-12-31 18:36:29 +07:00
parent 21dfd31338
commit 62594774e3
1 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
apps/landing/src/components/shared/SubsectionNav.tsx
View File

@ -29,6 +29,7 @@ import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
interface NavItem { interface NavItem {
label: string; label: string;
href: string; href: string;
disabled?: boolean;
} }
interface SubsectionNavProps { interface SubsectionNavProps {
@ -61,16 +62,29 @@ export const SubsectionNav = ({ items, currentPath, leftSlot, rightSlot }: Subse
{items.map((item) => { {items.map((item) => {
const active = isActive(item.href); const active = isActive(item.href);
return ( return (
<a <div key={item.href} className="relative group">
key={item.href} <a
href={item.href} href={item.disabled ? undefined : item.href}
className={` aria-disabled={item.disabled}
py-3 text-sm font-medium transition-colors className={`
${active ? 'text-purple-400' : 'text-gray-400 hover:text-white'} py-3 text-sm font-medium transition-colors
`} ${
> item.disabled
{item.label} ? 'text-gray-600 cursor-not-allowed'
</a> : active
? 'text-purple-400'
: 'text-gray-400 hover:text-white'
}
`}
>
{item.label}
</a>
{item.disabled && (
<div className="absolute left-1/2 -translate-x-1/2 top-full mt-1 opacity-0 group-hover:opacity-100 transition-opacity px-2 py-1 bg-slate-800 text-gray-300 text-xs rounded whitespace-nowrap pointer-events-none z-50">
Coming soon
</div>
)}
</div>
); );
})} })}
</div> </div>
@ -160,14 +174,24 @@ export const SubsectionNav = ({ items, currentPath, leftSlot, rightSlot }: Subse
return ( return (
<a <a
key={item.href} key={item.href}
href={item.href} href={item.disabled ? undefined : item.href}
onClick={() => setMobileMenuOpen(false)} aria-disabled={item.disabled}
onClick={item.disabled ? undefined : () => setMobileMenuOpen(false)}
className={` className={`
block px-4 py-3 rounded-lg text-sm font-medium transition-colors block px-4 py-3 rounded-lg text-sm font-medium transition-colors
${active ? 'bg-purple-500/10 text-purple-400' : 'text-gray-400 hover:text-white hover:bg-white/5'} ${
item.disabled
? 'text-gray-600 cursor-not-allowed'
: active
? 'bg-purple-500/10 text-purple-400'
: 'text-gray-400 hover:text-white hover:bg-white/5'
}
`} `}
> >
{item.label} {item.label}
{item.disabled && (
<span className="ml-2 text-xs text-gray-500">(Coming soon)</span>
)}
</a> </a>
); );
})} })}