{/* 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 [isCommunityExpanded, setIsCommunityExpanded] = useState(
router.pathname.startsWith('/community')
);
// Auto-expand Community section when navigating to community pages
useEffect(() => {
if (router.pathname.startsWith('/community')) {
setIsCommunityExpanded(true);
}
}, [router.pathname]);
// Navigation structure for authenticated users
const authenticatedNavigation = user ? [
{ name: 'Activity', href: '/activity', icon: 'activity', active: router.pathname === '/activity', isPlaceholder: true }
] : [];
// My Collection section (only for authenticated users)
const myCollectionNavigation = user ? {
name: 'My Collection',
href: '/dashboard', // My Collection itself links to dashboard
icon: 'collection',
active: router.pathname === '/dashboard' || router.pathname === '/collections' || router.pathname === '/my-cards' || router.pathname === '/decks' || router.pathname === '/analytics',
expanded: true, // Always expanded for now
items: [
{ name: 'Collections', href: '/collections', active: router.pathname === '/collections' },
{ name: 'Cards', href: '/my-cards', active: router.pathname === '/my-cards' },
{ name: 'Decks', href: '/decks', active: router.pathname === '/decks' },
{ name: 'Analytics', href: '/analytics', active: router.pathname === '/analytics', isPlaceholder: true }
]
} : null;
// Always visible navigation (public + authenticated)
const publicNavigation = [
{ name: 'Cards', href: '/cards', icon: 'card', active: router.pathname === '/cards' },
{ name: 'Scanner', href: '/scanner', icon: 'scanner', active: router.pathname === '/scanner' },
{ name: 'Deck Builder', href: '/deck-builder', icon: 'deck', active: router.pathname === '/deck-builder', isPlaceholder: true }
];
// Admin navigation (only for admin users)
const adminNavigation = (user?.role === 'admin') ? [
{ name: 'Admin Tools', href: '/admin/card-editor', icon: 'admin', active: router.pathname.startsWith('/admin'), badge: 'ADMIN' }
] : [];
const communityNavigation = {
name: 'Community',
icon: 'community',
active: router.pathname.startsWith('/community'),
expanded: isCommunityExpanded,
items: [
{ name: 'Collections', href: '/community/collections', active: router.pathname === '/community/collections' },
{ name: 'Decks', href: '/community/decks', active: router.pathname === '/community/decks' },
{ name: 'Forums', href: '/community/forums', active: router.pathname === '/community/forums' }
]
};
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: (
),
activity: (
),
scanner: (
)
};
return icons[iconName] || icons.grid;
};
return (
{/* Mobile Navigation - Only show on mobile */}
setIsMobileMenuOpen(true)}
/>
{/* Mobile Overlay */}
{isMobileMenuOpen && (
setIsMobileMenuOpen(false)}
/>
)}
{/* Mobile Menu Drawer - Only visible when menu is open */}
{/* Mobile Header with Close Button */}
{/* Mobile Navigation Content - Same as desktop but in mobile drawer */}
{/* Bottom Section */}
{/* Admin Navigation (if admin user) */}
{adminNavigation.map((item) => (
setIsMobileMenuOpen(false)}
>
{getIcon(item.icon)}
{item.name}
{item.badge && (
{item.badge}
)}
))}
{/* User Profile Dropdown */}
setIsMobileMenuOpen(false)}
/>
{/* Icon Buttons Row - Support and Dark Mode */}
{/* Support Icon Button */}
{/* Theme Toggle Icon Button */}
{/* Main Content */}
{/* Top Header - Only show search on dashboard */}
{showSearch && (
)}
{/* Page Content */}
{children}