🚀 Implement Mobile-First Navigation System
✅ Features Implemented: • Mobile bottom navigation bar (Cards, Decks, Dashboard, Community, More) • Raised primary Dashboard button with gradient styling • Slide-out drawer menu from 'More' button • Responsive layout: mobile bottom nav + desktop sidebar • Backdrop blur effects and safe area support 🎯 Navigation Structure: • Cards - Browse trading cards • Decks - Manage decks • Dashboard - Primary home button (raised/prominent) • Community - Social features • More - Full menu drawer with all options 📱 Responsive Design: • Mobile (<768px): Bottom nav + drawer menu • Desktop (≥768px): Traditional left sidebar • Content padding adjustments for mobile nav • Touch-friendly sizing and animations 🔧 Technical Changes: • Created MobileNavigation.js component • Completely rewrote Layout.js with mobile-first approach • Added NavigationContent shared component • Enhanced CSS with mobile-specific styles • Proper accessibility and keyboard support Ready for mobile testing! 🔥📱✨
This commit is contained in:
Randall Stillwell
parent
061fb90b0a
commit
442e906a79
4 changed files with 1327 additions and 352 deletions
|
|
@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
|
|||
import { useRouter } from 'next/router';
|
||||
import Link from 'next/link';
|
||||
import { useTheme } from '../lib/theme-context';
|
||||
import MobileNavigation from './MobileNavigation';
|
||||
|
||||
// User Profile Dropdown Component
|
||||
function UserProfileDropdown({ user, onMobileMenuClose }) {
|
||||
|
|
@ -122,11 +123,8 @@ function UserProfileDropdown({ user, onMobileMenuClose }) {
|
|||
);
|
||||
}
|
||||
|
||||
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);
|
||||
// Navigation Content Component - Shared between desktop and mobile
|
||||
function NavigationContent({ user, router, onItemClick }) {
|
||||
const [isCommunityExpanded, setIsCommunityExpanded] = useState(
|
||||
router.pathname.startsWith('/community')
|
||||
);
|
||||
|
|
@ -146,10 +144,10 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
// My Collection section (only for authenticated users)
|
||||
const myCollectionNavigation = user ? {
|
||||
name: 'My Collection',
|
||||
href: '/dashboard', // My Collection itself links to dashboard
|
||||
href: '/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
|
||||
expanded: true,
|
||||
items: [
|
||||
{ name: 'Collections', href: '/collections', active: router.pathname === '/collections' },
|
||||
{ name: 'Cards', href: '/my-cards', active: router.pathname === '/my-cards' },
|
||||
|
|
@ -182,12 +180,6 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
]
|
||||
};
|
||||
|
||||
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: (
|
||||
|
|
@ -257,42 +249,346 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
return icons[iconName] || icons.grid;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Authenticated User Navigation - Activity */}
|
||||
{authenticatedNavigation.map((item) => (
|
||||
<div key={item.name}>
|
||||
{item.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-3 rounded-2xl opacity-50 cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* My Collection Section (only for authenticated users) */}
|
||||
{myCollectionNavigation && (
|
||||
<div className="space-y-1">
|
||||
{/* My Collection Header - Clickable */}
|
||||
<Link href={myCollectionNavigation.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${router.pathname === '/dashboard'
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: router.pathname === '/dashboard' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: router.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(myCollectionNavigation.icon)}</span>
|
||||
<span className="font-medium">{myCollectionNavigation.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* My Collection Sub-items */}
|
||||
{myCollectionNavigation.expanded && (
|
||||
<div className="ml-4 space-y-1 border-l-2 pl-4" style={{ borderColor: 'var(--border)' }}>
|
||||
{myCollectionNavigation.items.map((subItem) => (
|
||||
<div key={subItem.name}>
|
||||
{subItem.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-2 rounded-xl opacity-50 cursor-not-allowed text-sm"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={subItem.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center px-4 py-2 rounded-xl
|
||||
transition-all duration-200 cursor-pointer text-sm
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${subItem.active
|
||||
? 'shadow-md nav-item-active'
|
||||
: 'hover:shadow-sm nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: subItem.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: subItem.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Separator */}
|
||||
<div className="border-t pt-2 mt-4" style={{ borderColor: 'var(--border)' }}></div>
|
||||
|
||||
{/* Public Navigation (always visible) */}
|
||||
{publicNavigation.map((item) => (
|
||||
<div key={item.name}>
|
||||
{item.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-3 rounded-2xl opacity-50 cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Community Section with Sub-items */}
|
||||
<div className="space-y-1">
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${communityNavigation.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: communityNavigation.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: communityNavigation.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsCommunityExpanded(!isCommunityExpanded)}
|
||||
role="menuitem"
|
||||
aria-expanded={isCommunityExpanded}
|
||||
aria-haspopup="menu"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setIsCommunityExpanded(!isCommunityExpanded);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(communityNavigation.icon)}</span>
|
||||
<span className="font-medium">{communityNavigation.name}</span>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform duration-200 ${isCommunityExpanded ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Community Sub-items */}
|
||||
{isCommunityExpanded && (
|
||||
<div className="ml-4 space-y-1 border-l-2 pl-4" style={{ borderColor: 'var(--border)' }}>
|
||||
{communityNavigation.items.map((subItem) => (
|
||||
<Link key={subItem.name} href={subItem.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center px-4 py-2 rounded-xl
|
||||
transition-all duration-200 cursor-pointer text-sm
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${subItem.active
|
||||
? 'shadow-md nav-item-active'
|
||||
: 'hover:shadow-sm nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: subItem.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: subItem.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={onItemClick}
|
||||
role="menuitem"
|
||||
aria-current={subItem.active ? 'page' : undefined}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onItemClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Admin Navigation (if admin user) */}
|
||||
{adminNavigation.map((item) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
{item.badge && (
|
||||
<span
|
||||
className="px-2 py-1 text-xs rounded-full font-medium"
|
||||
style={{
|
||||
backgroundColor: item.badge === 'ADMIN' ? 'var(--accent-ember)' : 'var(--accent-flame)',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(true)}
|
||||
className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-secondary)',
|
||||
color: 'var(--text-primary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-primary)'
|
||||
}}
|
||||
aria-label="Open navigation menu"
|
||||
aria-expanded={isMobileMenuOpen}
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* Mobile Navigation - Bottom bar for mobile */}
|
||||
<MobileNavigation
|
||||
user={user}
|
||||
onMenuOpen={() => setIsMobileMenuOpen(true)}
|
||||
/>
|
||||
|
||||
{/* Mobile Overlay */}
|
||||
{isMobileMenuOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-40"
|
||||
className="md:hidden fixed inset-0 bg-black bg-opacity-50 z-40"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Left Sidebar */}
|
||||
{/* Mobile Menu Drawer - Slides in from left when "More" is tapped */}
|
||||
<div className={`
|
||||
fixed lg:static inset-y-0 left-0 z-50 w-64 shadow-lg transform transition-transform duration-300 ease-in-out
|
||||
${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
|
||||
md:hidden fixed inset-y-0 left-0 z-50 w-64 shadow-lg transform transition-transform duration-300 ease-in-out
|
||||
${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
`} style={{ backgroundColor: 'var(--bg-secondary)', borderRight: '1px solid var(--border)' }}>
|
||||
<div className="p-4 h-full flex flex-col">
|
||||
{/* Mobile Close Button */}
|
||||
<div className="lg:hidden flex justify-between items-center mb-4">
|
||||
{/* Mobile Header with Close Button */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 logo-container mr-3">
|
||||
<span className="text-white font-bold text-sm">DH</span>
|
||||
|
|
@ -314,324 +610,18 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Desktop Header */}
|
||||
<div className="hidden lg:flex items-center mb-8">
|
||||
<div className="w-10 h-10 logo-container mr-3">
|
||||
<span className="text-white font-bold text-sm">DH</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>Deck Hearth</h1>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-2 flex-1" role="navigation" aria-label="Main navigation">
|
||||
{/* Authenticated User Navigation - Activity */}
|
||||
{authenticatedNavigation.map((item) => (
|
||||
<div key={item.name}>
|
||||
{item.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-3 rounded-2xl opacity-50 cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* My Collection Section (only for authenticated users) */}
|
||||
{myCollectionNavigation && (
|
||||
<div className="space-y-1">
|
||||
{/* My Collection Header - Clickable */}
|
||||
<Link href={myCollectionNavigation.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${router.pathname === '/dashboard'
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: router.pathname === '/dashboard' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: router.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(myCollectionNavigation.icon)}</span>
|
||||
<span className="font-medium">{myCollectionNavigation.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* My Collection Sub-items */}
|
||||
{myCollectionNavigation.expanded && (
|
||||
<div className="ml-4 space-y-1 border-l-2 pl-4" style={{ borderColor: 'var(--border)' }}>
|
||||
{myCollectionNavigation.items.map((subItem) => (
|
||||
<div key={subItem.name}>
|
||||
{subItem.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-2 rounded-xl opacity-50 cursor-not-allowed text-sm"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={subItem.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center px-4 py-2 rounded-xl
|
||||
transition-all duration-200 cursor-pointer text-sm
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${subItem.active
|
||||
? 'shadow-md nav-item-active'
|
||||
: 'hover:shadow-sm nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: subItem.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: subItem.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Separator */}
|
||||
<div className="border-t pt-2 mt-4" style={{ borderColor: 'var(--border)' }}></div>
|
||||
|
||||
{/* Public Navigation (always visible) */}
|
||||
{publicNavigation.map((item) => (
|
||||
<div key={item.name}>
|
||||
{item.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-3 rounded-2xl opacity-50 cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Community Section with Sub-items */}
|
||||
<div className="space-y-1">
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${communityNavigation.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: communityNavigation.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: communityNavigation.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsCommunityExpanded(!isCommunityExpanded)}
|
||||
role="menuitem"
|
||||
aria-expanded={isCommunityExpanded}
|
||||
aria-haspopup="menu"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setIsCommunityExpanded(!isCommunityExpanded);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(communityNavigation.icon)}</span>
|
||||
<span className="font-medium">{communityNavigation.name}</span>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform duration-200 ${isCommunityExpanded ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Community Sub-items */}
|
||||
{isCommunityExpanded && (
|
||||
<div className="ml-4 space-y-1 border-l-2 pl-4" style={{ borderColor: 'var(--border)' }}>
|
||||
{communityNavigation.items.map((subItem) => (
|
||||
<Link key={subItem.name} href={subItem.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center px-4 py-2 rounded-xl
|
||||
transition-all duration-200 cursor-pointer text-sm
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${subItem.active
|
||||
? 'shadow-md nav-item-active'
|
||||
: 'hover:shadow-sm nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: subItem.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: subItem.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
role="menuitem"
|
||||
aria-current={subItem.active ? 'page' : undefined}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setIsMobileMenuOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Mobile Navigation Content */}
|
||||
<nav className="space-y-2 flex-1" role="navigation" aria-label="Mobile navigation">
|
||||
<NavigationContent
|
||||
user={user}
|
||||
router={router}
|
||||
onItemClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
</nav>
|
||||
|
||||
{/* Bottom Section */}
|
||||
{/* Mobile Bottom Section */}
|
||||
<div className="mt-auto space-y-2">
|
||||
{/* Admin Navigation (if admin user) */}
|
||||
{adminNavigation.map((item) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
{item.badge && (
|
||||
<span
|
||||
className="px-2 py-1 text-xs rounded-full font-medium"
|
||||
style={{
|
||||
backgroundColor: item.badge === 'ADMIN' ? 'var(--accent-ember)' : 'var(--accent-flame)',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* User Profile Dropdown */}
|
||||
<UserProfileDropdown
|
||||
user={user}
|
||||
|
|
@ -688,8 +678,85 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Sidebar - Hidden on mobile */}
|
||||
<div className="hidden md:flex md:static inset-y-0 left-0 w-64 shadow-lg" style={{ backgroundColor: 'var(--bg-secondary)', borderRight: '1px solid var(--border)' }}>
|
||||
<div className="p-4 h-full flex flex-col w-full">
|
||||
{/* Desktop Header */}
|
||||
<div className="flex items-center mb-8">
|
||||
<div className="w-10 h-10 logo-container mr-3">
|
||||
<span className="text-white font-bold text-sm">DH</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>Deck Hearth</h1>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation Content */}
|
||||
<nav className="space-y-2 flex-1" role="navigation" aria-label="Main navigation">
|
||||
<NavigationContent
|
||||
user={user}
|
||||
router={router}
|
||||
onItemClick={() => {}}
|
||||
/>
|
||||
</nav>
|
||||
|
||||
{/* Desktop Bottom Section */}
|
||||
<div className="mt-auto space-y-2">
|
||||
{/* User Profile Dropdown */}
|
||||
<UserProfileDropdown
|
||||
user={user}
|
||||
onMobileMenuClose={() => {}}
|
||||
/>
|
||||
|
||||
{/* Icon Buttons Row - Support and Dark Mode */}
|
||||
<div className="flex justify-center space-x-4 pt-2">
|
||||
{/* Support Icon Button */}
|
||||
<Link href="/support">
|
||||
<button
|
||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md cursor-pointer nav-item-hover focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
aria-label="Support"
|
||||
title="Support"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
{/* Theme Toggle Icon Button */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 nav-item-hover"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||
>
|
||||
{theme === 'light' ? (
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col lg:ml-0">
|
||||
<div className="flex-1 flex flex-col pb-16 md:pb-0">
|
||||
{/* Top Header - Only show search on dashboard */}
|
||||
{showSearch && (
|
||||
<header className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
|
||||
|
|
@ -724,4 +791,4 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
709
components/Layout.js.backup
Normal file
709
components/Layout.js.backup
Normal file
|
|
@ -0,0 +1,709 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Link from 'next/link';
|
||||
import { useTheme } from '../lib/theme-context';
|
||||
import MobileNavigation from './MobileNavigation';
|
||||
|
||||
// User Profile Dropdown Component
|
||||
function UserProfileDropdown({ user, onMobileMenuClose }) {
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
const profileMenuItems = [
|
||||
{ name: 'Profile', href: '/profile', icon: 'user' },
|
||||
{ name: 'Settings', href: '/settings', icon: 'settings' },
|
||||
...(user?.role === 'admin' ? [
|
||||
{ name: 'Admin Panel', href: '/admin', icon: 'admin' }
|
||||
] : []),
|
||||
{ name: 'Logout', href: '/logout', icon: 'logout', isLogout: true }
|
||||
];
|
||||
|
||||
const getProfileIcon = (iconName) => {
|
||||
const icons = {
|
||||
user: (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
),
|
||||
settings: (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
admin: (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
),
|
||||
logout: (
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
)
|
||||
};
|
||||
return icons[iconName] || icons.user;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Dropdown Menu */}
|
||||
{isDropdownOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setIsDropdownOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Menu */}
|
||||
<div className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border z-20" style={{ backgroundColor: 'var(--bg-primary)', borderColor: 'var(--border)' }}>
|
||||
<div className="py-2">
|
||||
{profileMenuItems.map((item) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
flex items-center px-4 py-3 text-sm transition-all duration-200 cursor-pointer
|
||||
hover:bg-gray-50 dark:hover:bg-gray-700
|
||||
${item.isLogout ? 'text-red-600 dark:text-red-400' : ''}
|
||||
`}
|
||||
style={{
|
||||
color: item.isLogout ? 'var(--accent-ember)' : 'var(--text-primary)'
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsDropdownOpen(false);
|
||||
onMobileMenuClose();
|
||||
}}
|
||||
>
|
||||
<span className="mr-3" aria-hidden="true">{getProfileIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Profile Button */}
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="w-full flex items-center px-4 py-3 rounded-2xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 nav-item-hover"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
aria-expanded={isDropdownOpen}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<div className="h-8 w-8 logo-container mr-3">
|
||||
<span className="text-white text-xs font-medium">
|
||||
{user?.email?.charAt(0).toUpperCase() || 'G'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
|
||||
{user?.email || 'Guest'}
|
||||
</p>
|
||||
<p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||
{user?.role || 'visitor'}
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
),
|
||||
collection: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
),
|
||||
card: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
),
|
||||
deck: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
),
|
||||
analytics: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
),
|
||||
community: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||
</svg>
|
||||
),
|
||||
settings: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
logout: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
),
|
||||
admin: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
notifications: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5v-5zM4.5 19.5L9 15m0 0l-4.5-4.5M9 15v5" />
|
||||
</svg>
|
||||
),
|
||||
activity: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
),
|
||||
scanner: (
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
)
|
||||
};
|
||||
return icons[iconName] || icons.grid;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
|
||||
{/* Mobile Navigation - Only show on mobile */}
|
||||
<MobileNavigation
|
||||
user={user}
|
||||
onMenuOpen={() => setIsMobileMenuOpen(true)}
|
||||
/>
|
||||
|
||||
{/* Mobile Overlay */}
|
||||
{isMobileMenuOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-40"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Drawer - Only visible when menu is open */}
|
||||
<div className={`
|
||||
md:hidden fixed inset-y-0 left-0 z-50 w-64 shadow-lg transform transition-transform duration-300 ease-in-out
|
||||
${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
`} style={{ backgroundColor: 'var(--bg-secondary)', borderRight: '1px solid var(--border)' }}>
|
||||
<div className="p-4 h-full flex flex-col">
|
||||
{/* Mobile Header with Close Button */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 logo-container mr-3">
|
||||
<span className="text-white font-bold text-sm">DH</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>Deck Hearth</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
style={{
|
||||
color: 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
aria-label="Close navigation menu"
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation Content - Same as desktop but in mobile drawer */}
|
||||
<nav className="space-y-2 flex-1" role="navigation" aria-label="Mobile navigation">
|
||||
{/* Authenticated User Navigation - Activity */}
|
||||
{authenticatedNavigation.map((item) => (
|
||||
<div key={item.name}>
|
||||
{item.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-3 rounded-2xl opacity-50 cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* My Collection Section (only for authenticated users) */}
|
||||
{myCollectionNavigation && (
|
||||
<div className="space-y-1">
|
||||
{/* My Collection Header - Clickable */}
|
||||
<Link href={myCollectionNavigation.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${router.pathname === '/dashboard'
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: router.pathname === '/dashboard' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: router.pathname === '/dashboard' ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(myCollectionNavigation.icon)}</span>
|
||||
<span className="font-medium">{myCollectionNavigation.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* My Collection Sub-items */}
|
||||
{myCollectionNavigation.expanded && (
|
||||
<div className="ml-4 space-y-1 border-l-2 pl-4" style={{ borderColor: 'var(--border)' }}>
|
||||
{myCollectionNavigation.items.map((subItem) => (
|
||||
<div key={subItem.name}>
|
||||
{subItem.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-2 rounded-xl opacity-50 cursor-not-allowed text-sm"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={subItem.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center px-4 py-2 rounded-xl
|
||||
transition-all duration-200 cursor-pointer text-sm
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${subItem.active
|
||||
? 'shadow-md nav-item-active'
|
||||
: 'hover:shadow-sm nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: subItem.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: subItem.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Separator */}
|
||||
<div className="border-t pt-2 mt-4" style={{ borderColor: 'var(--border)' }}></div>
|
||||
|
||||
{/* Public Navigation (always visible) */}
|
||||
{publicNavigation.map((item) => (
|
||||
<div key={item.name}>
|
||||
{item.isPlaceholder ? (
|
||||
<div
|
||||
className="nav-item flex items-center justify-between px-4 py-3 rounded-2xl opacity-50 cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-1 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}>
|
||||
Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Community Section with Sub-items */}
|
||||
<div className="space-y-1">
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${communityNavigation.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: communityNavigation.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: communityNavigation.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsCommunityExpanded(!isCommunityExpanded)}
|
||||
role="menuitem"
|
||||
aria-expanded={isCommunityExpanded}
|
||||
aria-haspopup="menu"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setIsCommunityExpanded(!isCommunityExpanded);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(communityNavigation.icon)}</span>
|
||||
<span className="font-medium">{communityNavigation.name}</span>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform duration-200 ${isCommunityExpanded ? 'rotate-90' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Community Sub-items */}
|
||||
{isCommunityExpanded && (
|
||||
<div className="ml-4 space-y-1 border-l-2 pl-4" style={{ borderColor: 'var(--border)' }}>
|
||||
{communityNavigation.items.map((subItem) => (
|
||||
<Link key={subItem.name} href={subItem.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center px-4 py-2 rounded-xl
|
||||
transition-all duration-200 cursor-pointer text-sm
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${subItem.active
|
||||
? 'shadow-md nav-item-active'
|
||||
: 'hover:shadow-sm nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: subItem.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: subItem.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
role="menuitem"
|
||||
aria-current={subItem.active ? 'page' : undefined}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setIsMobileMenuOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="font-medium">{subItem.name}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="mt-auto space-y-2">
|
||||
{/* Admin Navigation (if admin user) */}
|
||||
{adminNavigation.map((item) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<div
|
||||
className={`
|
||||
nav-item flex items-center justify-between px-4 py-3 rounded-2xl
|
||||
transition-all duration-200 cursor-pointer
|
||||
focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2
|
||||
${item.active
|
||||
? 'shadow-lg nav-item-active'
|
||||
: 'hover:shadow-md nav-item-hover'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3" aria-hidden="true">{getIcon(item.icon)}</span>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
{item.badge && (
|
||||
<span
|
||||
className="px-2 py-1 text-xs rounded-full font-medium"
|
||||
style={{
|
||||
backgroundColor: item.badge === 'ADMIN' ? 'var(--accent-ember)' : 'var(--accent-flame)',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* User Profile Dropdown */}
|
||||
<UserProfileDropdown
|
||||
user={user}
|
||||
onMobileMenuClose={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Icon Buttons Row - Support and Dark Mode */}
|
||||
<div className="flex justify-center space-x-4 pt-2">
|
||||
{/* Support Icon Button */}
|
||||
<Link href="/support">
|
||||
<button
|
||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md cursor-pointer nav-item-hover focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
aria-label="Support"
|
||||
title="Support"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
{/* Theme Toggle Icon Button */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 nav-item-hover"
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||
>
|
||||
{theme === 'light' ? (
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col lg:ml-0">
|
||||
{/* Top Header - Only show search on dashboard */}
|
||||
{showSearch && (
|
||||
<header className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1 max-w-2xl">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search cards, decks, or collections..."
|
||||
className="search-bar pr-12"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-4">
|
||||
<span className="text-sm" style={{ color: 'var(--text-secondary)' }}>⌘F</span>
|
||||
</div>
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-4">
|
||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)}
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
171
components/MobileNavigation.js
Normal file
171
components/MobileNavigation.js
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
import { useRouter } from 'next/router';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function MobileNavigation({ user, onMenuOpen }) {
|
||||
const router = useRouter();
|
||||
|
||||
// Navigation items for the bottom bar
|
||||
const navigationItems = [
|
||||
{
|
||||
name: 'Cards',
|
||||
href: '/cards',
|
||||
icon: 'cards',
|
||||
active: router.pathname === '/cards'
|
||||
},
|
||||
{
|
||||
name: 'Decks',
|
||||
href: '/decks',
|
||||
icon: 'decks',
|
||||
active: router.pathname === '/decks'
|
||||
},
|
||||
{
|
||||
name: 'Dashboard',
|
||||
href: '/dashboard',
|
||||
icon: 'dashboard',
|
||||
active: router.pathname === '/dashboard' || router.pathname === '/collections' || router.pathname === '/my-cards' || router.pathname === '/analytics',
|
||||
isPrimary: true // This will be the raised center button
|
||||
},
|
||||
{
|
||||
name: 'Community',
|
||||
href: '/community',
|
||||
icon: 'community',
|
||||
active: router.pathname.startsWith('/community')
|
||||
},
|
||||
{
|
||||
name: 'More',
|
||||
href: '#',
|
||||
icon: 'more',
|
||||
onClick: onMenuOpen,
|
||||
active: false
|
||||
}
|
||||
];
|
||||
|
||||
const getIcon = (iconName, isActive = false, isPrimary = false) => {
|
||||
const iconClass = isPrimary ? "h-7 w-7" : "h-6 w-6";
|
||||
const strokeWidth = isActive ? 2.5 : 2;
|
||||
|
||||
const icons = {
|
||||
cards: (
|
||||
<svg className={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
),
|
||||
decks: (
|
||||
<svg className={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
),
|
||||
dashboard: (
|
||||
<svg className={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
),
|
||||
community: (
|
||||
<svg className={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||
</svg>
|
||||
),
|
||||
more: (
|
||||
<svg className={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
)
|
||||
};
|
||||
|
||||
return icons[iconName] || icons.dashboard;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
|
||||
{/* Background with blur effect */}
|
||||
<div
|
||||
className="absolute inset-0 mobile-nav-backdrop border-t"
|
||||
style={{
|
||||
backgroundColor: `rgba(var(--bg-secondary-rgb), 0.95)`,
|
||||
borderColor: 'var(--border)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Navigation Content */}
|
||||
<div className="relative px-4 py-2">
|
||||
<div className="flex items-center justify-around">
|
||||
{navigationItems.map((item) => {
|
||||
if (item.isPrimary) {
|
||||
// Primary/Dashboard button - raised and prominent
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<div className="relative">
|
||||
{/* Raised background circle */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-full shadow-lg transform -translate-y-2"
|
||||
style={{
|
||||
background: item.active
|
||||
? 'var(--gradient-primary)'
|
||||
: 'var(--gradient-secondary)',
|
||||
width: '56px',
|
||||
height: '56px'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Button content */}
|
||||
<button
|
||||
className="relative flex flex-col items-center justify-center w-14 h-14 transform -translate-y-2 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
style={{
|
||||
color: 'white',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-primary)'
|
||||
}}
|
||||
aria-label={item.name}
|
||||
>
|
||||
{getIcon(item.icon, item.active, true)}
|
||||
</button>
|
||||
|
||||
{/* Label below raised button */}
|
||||
<span
|
||||
className="absolute top-12 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-nowrap"
|
||||
style={{
|
||||
color: item.active ? 'var(--accent-ember)' : 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
// Regular navigation buttons
|
||||
const ButtonComponent = item.onClick ? 'button' : Link;
|
||||
const buttonProps = item.onClick
|
||||
? { onClick: item.onClick }
|
||||
: { href: item.href };
|
||||
|
||||
return (
|
||||
<ButtonComponent key={item.name} {...buttonProps}>
|
||||
<div
|
||||
className="flex flex-col items-center justify-center py-2 px-3 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
|
||||
style={{
|
||||
color: item.active ? 'var(--accent-ember)' : 'var(--text-secondary)',
|
||||
'--tw-ring-color': 'var(--accent-ember)',
|
||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
||||
}}
|
||||
>
|
||||
<div className="mb-1">
|
||||
{getIcon(item.icon, item.active)}
|
||||
</div>
|
||||
<span className="text-xs font-medium">
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
</ButtonComponent>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Safe area padding for devices with home indicator */}
|
||||
<div className="h-safe-area-inset-bottom" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -789,4 +789,32 @@ body {
|
|||
|
||||
.animate-ember-float {
|
||||
animation: ember-float 10s linear infinite;
|
||||
}
|
||||
|
||||
/* Mobile Navigation Styles */
|
||||
.h-safe-area-inset-bottom {
|
||||
height: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
/* Ensure content doesn't get hidden behind mobile nav */
|
||||
.mobile-content-padding {
|
||||
padding-bottom: 80px; /* Space for mobile navigation */
|
||||
}
|
||||
|
||||
/* Mobile navigation backdrop blur support */
|
||||
@supports (backdrop-filter: blur(16px)) {
|
||||
.mobile-nav-backdrop {
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fallback for browsers without backdrop-filter */
|
||||
@supports not (backdrop-filter: blur(16px)) {
|
||||
.mobile-nav-backdrop {
|
||||
background-color: rgba(var(--bg-secondary-rgb), 0.95) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue