9ca343bd01
- Add complete CHORUS accessibility theme system with CSS custom properties - Implement functional visual aid buttons that apply themes globally - Create comprehensive Tailwind utility overrides for all vision types: • Protanopia: Ocean/Sand system for red-blind clarity • Deuteranopia: Purple/Blue enhanced contrast for green-blind • Tritanopia: Red/Warm earth tones for blue-blind users • Achromatopsia: High-contrast grayscale system - Integrate 3D logo material changes with accessibility themes - Add cross-component theme communication via custom events - Implement system-wide color adaptation covering backgrounds, text, borders - Add theme selection indicators with proper contrast rings - Support both light/dark mode variations for all accessibility themes - Maintain CHORUS brand integrity while maximizing visual clarity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
514 lines
30 KiB
TypeScript
514 lines
30 KiB
TypeScript
|
|
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import ThreeLogo from './ThreeLogo';
|
|
import Breadcrumb from './Breadcrumb';
|
|
|
|
// Mobile accordion menu component
|
|
interface MobileAccordionMenuProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
|
const pathname = usePathname();
|
|
const [expandedSections, setExpandedSections] = useState<string[]>(['overview']);
|
|
|
|
// Same navigation structure as Sidebar
|
|
const navCategories = [
|
|
{
|
|
id: 'overview',
|
|
label: 'Overview',
|
|
icon: 'Navigation/House_01',
|
|
items: [
|
|
{ href: '/', section: 'overview', icon: 'Navigation/House_01', label: 'Brand Overview' },
|
|
{ href: '/identity', section: 'identity', icon: 'User/User_01', label: 'Brand Identity' },
|
|
{ href: '/usage', section: 'usage', icon: 'Interface/Book', label: 'Usage Guidelines' },
|
|
]
|
|
},
|
|
{
|
|
id: 'visual-identity',
|
|
label: 'Visual Identity',
|
|
icon: 'Interface/Main_Component',
|
|
items: [
|
|
{ href: '/visual-identity', section: 'visual-identity', icon: 'Interface/Main_Component', label: 'Visual Identity' },
|
|
{ href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
|
|
{ href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
|
|
{ href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
|
|
{ href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
|
|
{ href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
|
|
{ href: '/components', section: 'components', icon: 'Interface/Settings', label: 'Components' },
|
|
{ href: '/motion', section: 'motion', icon: 'Interface/Link', label: 'Motion System' },
|
|
{ href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
|
|
]
|
|
},
|
|
{
|
|
id: 'communications',
|
|
label: 'Communications',
|
|
icon: 'Communication/Chat',
|
|
items: [
|
|
{ href: '/culture', section: 'culture', icon: 'Environment/Bulb', label: 'Culture' },
|
|
{ href: '/communications', section: 'communications', icon: 'Communication/Chat', label: 'Language Support' },
|
|
{ href: '/public-relations', section: 'public-relations', icon: 'Communication/Paper_Plane', label: 'Public Relations' },
|
|
{ href: '/investor-relations', section: 'investor-relations', icon: 'Interface/Chart_Line', label: 'Investor Relations' },
|
|
{ href: '/collaborators', section: 'collaborators', icon: 'User/Users_Group', label: 'Collaborators' },
|
|
{ href: '/social-media', section: 'social-media', icon: 'Communication/Share_iOS_Export', label: 'Social Media' },
|
|
]
|
|
}
|
|
];
|
|
|
|
const toggleSection = (sectionId: string) => {
|
|
setExpandedSections(prev =>
|
|
prev.includes(sectionId)
|
|
? prev.filter(id => id !== sectionId)
|
|
: [sectionId]
|
|
);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
const currentCategory = navCategories.find(category =>
|
|
category.items.some(item => item.href === pathname)
|
|
);
|
|
|
|
if (currentCategory) {
|
|
setExpandedSections([currentCategory.id]);
|
|
}
|
|
}, [pathname]);
|
|
|
|
const isCurrentPage = (href: string) => pathname === href;
|
|
const isCategoryActive = (category: any) =>
|
|
category.items.some((item: any) => item.href === pathname);
|
|
|
|
return (
|
|
|
|
<nav className="p-chorus-md max-h-96 overflow-y-auto">
|
|
{navCategories.map((category) => {
|
|
const isExpanded = expandedSections.includes(category.id);
|
|
const isActive = isCategoryActive(category);
|
|
|
|
return (
|
|
<div key={category.id} className="">
|
|
<button
|
|
onClick={() => toggleSection(category.id)}
|
|
className={`w-full group flex items-center justify-between gap-2 px-chorus-sm py-chorus-xs text-left transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
|
|
isActive
|
|
? 'bg-sand-100 text-mulberry-950 dark:bg-mulberry-800 dark:text-white font-medium'
|
|
: 'text-carbon-700 dark:text-mulberry-300'
|
|
}`}
|
|
aria-expanded={isExpanded}
|
|
>
|
|
<div className="flex items-center gap-2 ">
|
|
<img
|
|
src={`/icons/coolicons.v4.1/coolicons PNG/Black/${category.icon}.png`}
|
|
alt=""
|
|
className="icon h-4 w-4 dark:hidden"
|
|
/>
|
|
<img
|
|
src={`/icons/coolicons.v4.1/coolicons PNG/White/${category.icon}.png`}
|
|
alt=""
|
|
className="icon hidden h-4 w-4 dark:inline-flex"
|
|
/>
|
|
<span className="font-semibold">{category.label}</span>
|
|
</div>
|
|
|
|
<svg
|
|
className={`w-4 h-4 transition-transform duration-300 ${isExpanded ? 'rotate-90' : ''}`}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
|
|
{isExpanded && (
|
|
<div className="ml-6">
|
|
{category.items.map((item) => (
|
|
<Link
|
|
key={item.section}
|
|
href={item.href}
|
|
onClick={onClose}
|
|
className={`p-chorus-sm flex items-center gap-2 px-chorus-sm transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
|
|
isCurrentPage(item.href)
|
|
? 'bg-sand-50 text-mulberry-950 dark:bg-mulberry-900 dark:text-white font-medium border-l-2 border-mulberry-600 dark:border-mulberry-400'
|
|
: 'text-carbon-600 dark:text-mulberry-400'
|
|
}`}
|
|
>
|
|
<img
|
|
src={`/icons/coolicons.v4.1/coolicons PNG/Black/${item.icon}.png`}
|
|
alt=""
|
|
className="icon h-4 w-4 dark:hidden"
|
|
/>
|
|
<img
|
|
src={`/icons/coolicons.v4.1/coolicons PNG/White/${item.icon}.png`}
|
|
alt=""
|
|
className="icon hidden h-4 w-4 dark:inline-flex"
|
|
/>
|
|
<span className="text-sm">{item.label}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
const Header = () => {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [showVisualAid, setShowVisualAid] = useState(false);
|
|
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
|
|
const [accessibilityTheme, setAccessibilityTheme] = useState<string>('default');
|
|
|
|
// Theme toggle functionality
|
|
React.useEffect(() => {
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
setTheme(isDark ? 'dark' : 'light');
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme = theme === 'dark' ? 'light' : 'dark';
|
|
setTheme(newTheme);
|
|
|
|
if (newTheme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
};
|
|
|
|
const applyAccessibilityTheme = (themeType: string) => {
|
|
// Remove existing accessibility themes
|
|
document.documentElement.removeAttribute('data-theme');
|
|
document.documentElement.removeAttribute('data-accessibility');
|
|
|
|
// Apply new theme
|
|
if (themeType !== 'default') {
|
|
document.documentElement.setAttribute('data-theme', themeType);
|
|
document.documentElement.setAttribute('data-accessibility', themeType);
|
|
}
|
|
|
|
setAccessibilityTheme(themeType);
|
|
setShowVisualAid(false); // Close modal after selection
|
|
|
|
// Dispatch custom event to notify ThreeLogo components
|
|
window.dispatchEvent(new CustomEvent('accessibilityThemeChanged', {
|
|
detail: { theme: themeType }
|
|
}));
|
|
};
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-30 bg-white/80 backdrop-blur dark:bg-mulberry-950/80 lg:left-64 shadow-lg">
|
|
<div className="max-w-5xl mx-auto mb-chorus-sm px-chorus-sm">
|
|
<div className="flex items-center justify-between ">
|
|
{/* Mobile layout - hamburger + logo on left, controls on right */}
|
|
<div className="flex items-center justify-between w-full lg:hidden py-chorus-sm">
|
|
<div className="flex items-center gap-chorus-sm">
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
|
|
aria-label="Toggle mobile menu"
|
|
>
|
|
<svg
|
|
className="w-4 h-4 text-carbon-700 dark:text-mulberry-300"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d={mobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div className="flex items-center gap-chorus-xs">
|
|
<ThreeLogo width={32} height={32} />
|
|
<span className="font-logo text-lg">CHORUS</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile controls - theme toggle and visual aid */}
|
|
<div className="flex items-center gap-chorus-xs">
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="p-chorus-sm hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
|
|
aria-label="Toggle theme"
|
|
>
|
|
<img
|
|
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png"
|
|
alt="Switch to Dark Mode"
|
|
className="icon w-4 h-4 dark:hidden"
|
|
/>
|
|
<img
|
|
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png"
|
|
alt="Switch to Light Mode"
|
|
className="icon w-4 h-4 hidden dark:inline-flex"
|
|
/>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setShowVisualAid(true)}
|
|
className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
|
|
aria-label="Visual aid settings"
|
|
>
|
|
<svg className="icon h-4 w-4 text-carbon-700 dark:text-mulberry-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop primary navigation - hidden on mobile */}
|
|
<nav className="primary-nav hidden lg:block">
|
|
<ul className="horizontal-menu">
|
|
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
|
|
<div className="flex items-center gap-2 ml-chorus-sm">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
|
<span>Overview</span>
|
|
</div>
|
|
<ul className="flyout-menu backdrop-blur">
|
|
<li className="item">
|
|
<Link href="/" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Brand Overview</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/identity" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Brand Identity</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/usage" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Book.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Book.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Usage Guidelines</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
|
|
<div className="flex items-center gap-2 ml-chorus-sm">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
|
<span>Visual Identity</span>
|
|
|
|
</div>
|
|
<ul className="flyout-menu backdrop-blur">
|
|
<li className="item">
|
|
<Link href="/visual-identity" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Visual Identity</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/logo" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Logo System</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/typography" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Typography</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/colors" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Swatches_Palette.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Swatches_Palette.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Color Palette</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/iconography" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Iconography</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/accessibility" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Accessibility</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/components" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Components</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/motion" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Motion System</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/implementation" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Implementation</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300">
|
|
<div className="flex items-center gap-2 ml-chorus-sm">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
|
<span>Communications</span>
|
|
|
|
</div>
|
|
<ul className="flyout-menu backdrop-blur">
|
|
<li className="item">
|
|
<Link href="/culture" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Culture</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/communications" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Language Support</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/public-relations" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Public Relations</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/investor-relations" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Chart_Line.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Chart_Line.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Investor Relations</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/collaborators" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Collaborators</span>
|
|
</Link>
|
|
</li>
|
|
<li className="item">
|
|
<Link href="/social-media" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
|
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
|
<span>Social Media</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Breadcrumb - always visible */}
|
|
<div className="max-w-5xl mx-auto px-chorus-lg">
|
|
<Breadcrumb />
|
|
</div>
|
|
|
|
{/* Mobile accordion menu - only visible when hamburger is clicked */}
|
|
{mobileMenuOpen && (
|
|
<div className="lg:hidden bg-white/95 dark:bg-mulberry-950/95 backdrop-blur border-t border-nickel-200 dark:border-mulberry-800">
|
|
<MobileAccordionMenu onClose={() => setMobileMenuOpen(false)} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Visual Aid Modal - fixed for mobile */}
|
|
{showVisualAid && (
|
|
<div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 backdrop-blur-sm p-4 pt-24">
|
|
<div className="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full max-h-[calc(100vh-8rem)] overflow-y-auto p-chorus-lg shadow-xl">
|
|
<div className="flex items-center justify-between mb-chorus-md">
|
|
<h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3>
|
|
<button
|
|
onClick={() => setShowVisualAid(false)}
|
|
className="text-carbon-600 hover:text-carbon-950 dark:text-gray-400 dark:hover:text-white"
|
|
>
|
|
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M18 6L6 18M6 6L18 18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-chorus-md">
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
|
Adjust the visual appearance for different color vision conditions. These settings affect the Möbius ring logo materials while preserving the overall design integrity.
|
|
</p>
|
|
|
|
<div className="space-y-chorus-sm">
|
|
<h4 className="text-h4 text-carbon-950 dark:text-white">Color Vision Support</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">
|
|
8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
|
|
</p>
|
|
<div className="grid grid-cols-1 gap-2">
|
|
<button
|
|
onClick={() => applyAccessibilityTheme('default')}
|
|
className={`p-chorus-sm text-left border-2 border-carbon-300 bg-carbon-50 hover:bg-carbon-100 dark:border-carbon-600 dark:bg-carbon-900 dark:hover:bg-carbon-800 transition-colors ${accessibilityTheme === 'default' ? 'ring-2 ring-carbon-500' : ''}`}
|
|
>
|
|
<strong className="text-carbon-950 dark:text-white">Default Vision</strong><br />
|
|
<small className="text-carbon-700 dark:text-carbon-300">Standard CHORUS 8-color system</small>
|
|
</button>
|
|
<button
|
|
onClick={() => applyAccessibilityTheme('protanopia')}
|
|
className={`p-chorus-sm text-left border-2 border-ocean-400 bg-ocean-50 hover:bg-ocean-100 dark:border-ocean-600 dark:bg-ocean-900 dark:hover:bg-ocean-800 transition-colors ${accessibilityTheme === 'protanopia' ? 'ring-2 ring-ocean-500' : ''}`}
|
|
>
|
|
<strong className="text-ocean-900 dark:text-ocean-100">Protanopia (Red-blind)</strong><br />
|
|
<small className="text-ocean-700 dark:text-ocean-300">Ocean/Sand adaptations</small>
|
|
</button>
|
|
<button
|
|
onClick={() => applyAccessibilityTheme('deuteranopia')}
|
|
className={`p-chorus-sm text-left border-2 border-eucalyptus-400 bg-eucalyptus-50 hover:bg-eucalyptus-100 dark:border-eucalyptus-600 dark:bg-eucalyptus-900 dark:hover:bg-eucalyptus-800 transition-colors ${accessibilityTheme === 'deuteranopia' ? 'ring-2 ring-eucalyptus-500' : ''}`}
|
|
>
|
|
<strong className="text-eucalyptus-900 dark:text-eucalyptus-100">Deuteranopia (Green-blind)</strong><br />
|
|
<small className="text-eucalyptus-700 dark:text-eucalyptus-300">Blue/Yellow enhanced contrast</small>
|
|
</button>
|
|
<button
|
|
onClick={() => applyAccessibilityTheme('tritanopia')}
|
|
className={`p-chorus-sm text-left border-2 border-coral-400 bg-coral-50 hover:bg-coral-100 dark:border-coral-600 dark:bg-coral-900 dark:hover:bg-coral-800 transition-colors ${accessibilityTheme === 'tritanopia' ? 'ring-2 ring-coral-500' : ''}`}
|
|
>
|
|
<strong className="text-coral-900 dark:text-coral-100">Tritanopia (Blue-blind)</strong><br />
|
|
<small className="text-coral-700 dark:text-coral-300">Coral/Eucalyptus substitutions</small>
|
|
</button>
|
|
<button
|
|
onClick={() => applyAccessibilityTheme('achromatopsia')}
|
|
className={`p-chorus-sm text-left border-2 border-nickel-400 bg-nickel-50 hover:bg-nickel-100 dark:border-nickel-600 dark:bg-nickel-900 dark:hover:bg-nickel-800 transition-colors ${accessibilityTheme === 'achromatopsia' ? 'ring-2 ring-nickel-500' : ''}`}
|
|
>
|
|
<strong className="text-nickel-900 dark:text-nickel-100">Achromatopsia (Color blind)</strong><br />
|
|
<small className="text-nickel-700 dark:text-nickel-300">High contrast grayscale only</small>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|