{/* Dropdown Menu */}
{isDropdownOpen && (
<>
{/* Backdrop */}
setIsDropdownOpen(false)}
/>
{/* Menu */}
{profileMenuItems.map((item) => (
{
setIsDropdownOpen(false);
onMobileMenuClose();
}}
>
{getProfileIcon(item.icon)}
{item.name}
))}
)}
{/* Profile Button */}
);
}
export default function Layout({ children, user = { email: 'me@randallstillwell.com', role: 'user' }, showSearch = false }) {
const router = useRouter();
const { theme, toggleTheme } = useTheme();
const [searchQuery, setSearchQuery] = useState('');
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const navigation = [
{ name: 'Dashboard', href: '/dashboard', icon: 'grid', active: router.pathname === '/dashboard' },
{ name: 'My Collection', href: '/collections', icon: 'collection', active: router.pathname === '/collections', badge: '247' },
{ name: 'Cards', href: '/cards', icon: 'card', active: router.pathname === '/cards' },
{ name: 'Decks', href: '/decks', icon: 'deck', active: router.pathname === '/decks', badge: '12' },
{ name: 'Analytics', href: '/analytics', icon: 'analytics', active: router.pathname === '/analytics' },
{ name: 'Community', href: '/community', icon: 'community', active: router.pathname === '/community' },
{ name: 'Community Collections', href: '/community/collections', icon: 'community', active: router.pathname === '/community/collections' },
{ name: 'Settings', href: '/settings', icon: 'settings', active: router.pathname === '/settings' },
...(user?.role === 'admin' ? [
{ name: 'Admin Tools', href: '/admin/card-editor', icon: 'admin', active: router.pathname.startsWith('/admin'), badge: 'ADMIN' }
] : [])
];
const bottomNavigation = [
{ name: 'Notifications', href: '/notifications', icon: 'notifications', active: router.pathname === '/notifications' },
{ name: 'Settings', href: '/settings', icon: 'settings', active: router.pathname === '/settings' },
{ name: 'Logout', href: '/logout', icon: 'logout', active: router.pathname === '/logout' }
];
const getIcon = (iconName) => {
const icons = {
grid: (
),
collection: (
),
card: (
),
deck: (
),
analytics: (
),
community: (
),
settings: (
),
logout: (
),
admin: (
),
notifications: (
)
};
return icons[iconName] || icons.grid;
};
return (
{/* Mobile Menu Button */}
{/* Mobile Overlay */}
{isMobileMenuOpen && (
setIsMobileMenuOpen(false)}
/>
)}
{/* Left Sidebar */}
{/* Mobile Close Button */}
{/* Desktop Header */}
{/* Bottom Section */}
{/* Theme Toggle */}
{/* User Profile Dropdown */}
setIsMobileMenuOpen(false)}
/>
{/* Main Content */}
{/* Top Header - Only show search on dashboard */}
{showSearch && (
)}
{/* Page Content */}
{children}
);
}