feat(layout): implement responsive layout system with navigation
- Add comprehensive layout system (AppLayout, Header, Sidebar, MainContainer) - Implement responsive navigation with mobile-friendly collapsing sidebar - Add theme toggle component with smooth transitions - Include proper ARIA labels and keyboard navigation - Support authentication state in navigation Layout system provides consistent structure across all pages with theme-aware styling and accessibility compliance. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
226
reactrebuild0825/src/components/layout/Header.tsx
Normal file
226
reactrebuild0825/src/components/layout/Header.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Menu, ChevronRight, Settings, LogOut, Sun, Moon } from 'lucide-react';
|
||||
|
||||
import { useAuth } from '../../hooks/useAuth';
|
||||
import { useTheme } from '../../hooks/useTheme';
|
||||
import { Button } from '../ui/Button';
|
||||
|
||||
export interface HeaderProps {
|
||||
onToggleSidebar: () => void;
|
||||
}
|
||||
|
||||
export function Header({ onToggleSidebar }: HeaderProps) {
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const { user, logout, isLoading } = useAuth();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const userMenuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close user menu when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
|
||||
setUserMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Close user menu on escape
|
||||
useEffect(() => {
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && userMenuOpen) {
|
||||
setUserMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
return () => document.removeEventListener('keydown', handleEscape);
|
||||
}, [userMenuOpen]);
|
||||
|
||||
// Generate breadcrumbs from current path
|
||||
const generateBreadcrumbs = () => {
|
||||
const pathSegments = location.pathname.split('/').filter(Boolean);
|
||||
|
||||
if (pathSegments.length === 0) {
|
||||
return [{ label: 'Dashboard', path: '/' }];
|
||||
}
|
||||
|
||||
const breadcrumbs = [{ label: 'Dashboard', path: '/' }];
|
||||
|
||||
pathSegments.forEach((segment, index) => {
|
||||
const path = `/${ pathSegments.slice(0, index + 1).join('/')}`;
|
||||
const label = segment.charAt(0).toUpperCase() + segment.slice(1);
|
||||
breadcrumbs.push({ label, path });
|
||||
});
|
||||
|
||||
return breadcrumbs;
|
||||
};
|
||||
|
||||
const breadcrumbs = generateBreadcrumbs();
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
setUserMenuOpen(false);
|
||||
await logout();
|
||||
navigate('/login');
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error);
|
||||
// Force navigation to login even if logout fails
|
||||
navigate('/login');
|
||||
}
|
||||
};
|
||||
|
||||
const getInitials = (name: string) => name
|
||||
.split(' ')
|
||||
.map(part => part.charAt(0).toUpperCase())
|
||||
.join('')
|
||||
.slice(0, 2);
|
||||
|
||||
return (
|
||||
<div className="h-16 border-b border-slate-200 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md">
|
||||
<div className="h-full px-4 lg:px-6 flex items-center justify-between">
|
||||
{/* Left section: Mobile menu button + Breadcrumbs */}
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Mobile menu button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onToggleSidebar}
|
||||
className="lg:hidden"
|
||||
aria-label="Toggle sidebar"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav aria-label="Breadcrumb" className="hidden sm:flex">
|
||||
<ol className="flex items-center space-x-2 text-sm">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<li key={crumb.path} className="flex items-center">
|
||||
{index > 0 && (
|
||||
<ChevronRight className="h-4 w-4 text-slate-400 mx-2" aria-hidden="true" />
|
||||
)}
|
||||
{index === breadcrumbs.length - 1 ? (
|
||||
<span className="text-slate-900 dark:text-slate-100 font-medium">
|
||||
{crumb.label}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
to={crumb.path}
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100
|
||||
transition-colors duration-200"
|
||||
>
|
||||
{crumb.label}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Right section: Theme toggle + User menu */}
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Theme toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleTheme}
|
||||
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100"
|
||||
>
|
||||
{theme === 'light' ? (
|
||||
<Moon className="h-5 w-5" />
|
||||
) : (
|
||||
<Sun className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* User menu */}
|
||||
{user && (
|
||||
<div className="relative" ref={userMenuRef}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setUserMenuOpen(!userMenuOpen)}
|
||||
aria-expanded={userMenuOpen}
|
||||
aria-haspopup="true"
|
||||
className="flex items-center space-x-2 text-slate-600 dark:text-slate-400
|
||||
hover:text-slate-900 dark:hover:text-slate-100"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{user.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
className="h-8 w-8 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-8 w-8 rounded-full bg-gradient-to-br from-gold-400 to-gold-600
|
||||
flex items-center justify-center text-white text-sm font-medium">
|
||||
{getInitials(user.name)}
|
||||
</div>
|
||||
)}
|
||||
<span className="hidden sm:block text-sm font-medium">
|
||||
{user.name}
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
{/* User dropdown menu */}
|
||||
{userMenuOpen && (
|
||||
<div className="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-lg
|
||||
shadow-lg border border-slate-200 dark:border-slate-700 py-1 z-50">
|
||||
<div className="px-4 py-3 border-b border-slate-200 dark:border-slate-700">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{user.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400">
|
||||
{user.email}
|
||||
</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
|
||||
bg-gold-100 dark:bg-gold-900 text-gold-800 dark:text-gold-200">
|
||||
{user.role}
|
||||
</span>
|
||||
<span className="ml-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
{user.organization.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to="/settings"
|
||||
className="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300
|
||||
hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200"
|
||||
onClick={() => setUserMenuOpen(false)}
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-3" />
|
||||
Account Settings
|
||||
</Link>
|
||||
|
||||
<button
|
||||
className="w-full flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300
|
||||
hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200
|
||||
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={handleLogout}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-3" />
|
||||
{isLoading ? 'Signing out...' : 'Sign out'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user