434 lines
21 KiB
JavaScript
Executable File
434 lines
21 KiB
JavaScript
Executable File
import React, { useState, useEffect, useRef } from 'react';
|
||
import { useLocation } from 'react-router-dom';
|
||
import ToolSidebar from './ToolSidebar';
|
||
import NavigationConfirmModal from './NavigationConfirmModal';
|
||
import useNavigationGuard from '../hooks/useNavigationGuard';
|
||
import { Menu, X, ChevronDown, Terminal, Sparkles, Home } from 'lucide-react';
|
||
import ThemeToggle from './ThemeToggle';
|
||
import SEOHead from './SEOHead';
|
||
import ConsentBanner from './ConsentBanner';
|
||
import { NON_TOOLS, TOOLS, SITE_CONFIG, getCategoryConfig } from '../config/tools';
|
||
import { useAnalytics } from '../hooks/useAnalytics';
|
||
|
||
const Layout = ({ children }) => {
|
||
const location = useLocation();
|
||
const { showModal, pendingNavigation, handleConfirm, handleCancel, hasUnsavedData, navigateWithGuard } = useNavigationGuard();
|
||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||
const dropdownRef = useRef(null);
|
||
|
||
// Initialize analytics tracking
|
||
useAnalytics();
|
||
|
||
const isActive = (path) => {
|
||
return location.pathname === path;
|
||
};
|
||
|
||
// Close dropdown when clicking outside
|
||
useEffect(() => {
|
||
const handleClickOutside = (event) => {
|
||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||
setIsDropdownOpen(false);
|
||
}
|
||
};
|
||
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
return () => {
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
};
|
||
}, []);
|
||
|
||
// Close mobile menu when route changes
|
||
useEffect(() => {
|
||
setIsMobileMenuOpen(false);
|
||
setIsDropdownOpen(false);
|
||
}, [location.pathname]);
|
||
|
||
// Check if we're on a tool page (not homepage)
|
||
const isToolPage = location.pathname !== '/';
|
||
|
||
// Check if we're on invoice preview page (no sidebar needed)
|
||
const isInvoicePreviewPage = location.pathname === '/invoice-preview';
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-indigo-900 flex flex-col">
|
||
{/* SEO Head Management */}
|
||
<SEOHead />
|
||
|
||
{/* Header */}
|
||
<header className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-slate-800/80 backdrop-blur-md shadow-lg border-b border-slate-200/50 dark:border-slate-700/50 flex-shrink-0">
|
||
<div className={isToolPage ? "px-4 sm:px-6 lg:px-8" : "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"}>
|
||
<div className="flex justify-between items-center h-16">
|
||
<button onClick={() => navigateWithGuard('/')} className="flex items-center group">
|
||
<div className="relative">
|
||
<div className="absolute inset-0 rounded-lg blur opacity-20 group-hover:opacity-40 transition-opacity"></div>
|
||
<div className="relative p-2">
|
||
<img
|
||
src="/logo.svg"
|
||
alt={SITE_CONFIG.title}
|
||
className="h-8 w-auto"
|
||
style={{ maxWidth: '150px' }}
|
||
onError={(e) => {
|
||
// Fallback to Terminal icon with text if logo fails to load
|
||
e.target.style.display = 'none';
|
||
e.target.nextSibling.style.display = 'flex';
|
||
}}
|
||
/>
|
||
<div className="hidden items-center space-x-3">
|
||
<Terminal className="h-6 w-6 text-blue-500" />
|
||
<span className="text-xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
|
||
{SITE_CONFIG.title}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
|
||
<div className="flex items-center space-x-4">
|
||
{/* Desktop Navigation - only show on homepage */}
|
||
{!isToolPage && (
|
||
<nav className="hidden md:flex items-center space-x-6">
|
||
<button
|
||
onClick={() => {
|
||
setIsDropdownOpen(false);
|
||
navigateWithGuard('/');
|
||
}}
|
||
className={`flex items-center space-x-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300 ${
|
||
isActive('/')
|
||
? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
|
||
: 'text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-white/50 dark:hover:bg-slate-700/50'
|
||
}`}
|
||
>
|
||
<Home className="h-4 w-4" />
|
||
<span>Home</span>
|
||
</button>
|
||
|
||
{/* Tools Dropdown */}
|
||
<div className="relative" ref={dropdownRef}>
|
||
<button
|
||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||
className="flex items-center space-x-2 px-4 py-2 rounded-xl text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300"
|
||
aria-expanded={isDropdownOpen}
|
||
aria-haspopup="true"
|
||
>
|
||
<Sparkles className="h-4 w-4" />
|
||
<span>Tools</span>
|
||
<ChevronDown className={`h-4 w-4 transition-transform duration-300 ${
|
||
isDropdownOpen ? 'rotate-180' : ''
|
||
}`} />
|
||
</button>
|
||
|
||
{/* Dropdown Menu */}
|
||
{isDropdownOpen && (
|
||
<div className="absolute top-full left-0 mt-3 w-80 bg-white/90 dark:bg-slate-800/90 backdrop-blur-md rounded-2xl shadow-2xl border border-slate-200/50 dark:border-slate-700/50 py-3 z-50 overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-slate-800/50 dark:to-slate-700/50"></div>
|
||
<div className="relative">
|
||
{TOOLS.map((tool) => {
|
||
const IconComponent = tool.icon;
|
||
const categoryConfig = getCategoryConfig(tool.category);
|
||
|
||
return (
|
||
<button
|
||
key={tool.path}
|
||
onClick={() => {
|
||
setIsDropdownOpen(false);
|
||
navigateWithGuard(tool.path);
|
||
}}
|
||
className={`group flex items-center space-x-4 px-4 py-3 text-sm hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300 w-full text-left ${
|
||
isActive(tool.path)
|
||
? 'bg-gradient-to-r from-blue-50 to-purple-50 dark:from-slate-700 dark:to-slate-600 text-blue-700 dark:text-blue-300'
|
||
: 'text-slate-700 dark:text-slate-300'
|
||
}`}
|
||
>
|
||
<div className={`p-2 rounded-lg bg-gradient-to-br ${categoryConfig.color} shadow-sm group-hover:scale-110 transition-transform duration-300`}>
|
||
<IconComponent className="h-4 w-4 text-white" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="font-medium">{tool.name}</div>
|
||
<div className="text-xs text-slate-600 dark:text-slate-600">{tool.description}</div>
|
||
</div>
|
||
<div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
<ChevronDown className="h-4 w-4 -rotate-90 text-slate-600" />
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</nav>
|
||
)}
|
||
|
||
<ThemeToggle />
|
||
|
||
{/* Mobile Menu Button */}
|
||
<button
|
||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||
className="md:hidden p-2 rounded-xl text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50 transition-all duration-300"
|
||
aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
|
||
aria-expanded={isMobileMenuOpen}
|
||
>
|
||
{isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Mobile Navigation Menu */}
|
||
{isMobileMenuOpen && (
|
||
<>
|
||
{/* Overlay */}
|
||
<div
|
||
className="md:hidden fixed inset-0 bg-black/20 z-30"
|
||
onClick={() => setIsMobileMenuOpen(false)}
|
||
/>
|
||
|
||
{/* Menu */}
|
||
<div className="md:hidden fixed top-16 left-0 right-0 z-40 bg-white/95 dark:bg-slate-800/95 backdrop-blur-md border-b border-slate-200/50 dark:border-slate-700/50 shadow-lg max-h-[calc(100vh-4rem)]">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||
<div className="space-y-2">
|
||
{/* Non-Tools Section */}
|
||
{NON_TOOLS.map((tool) => {
|
||
const IconComponent = tool.icon;
|
||
|
||
return (
|
||
<button
|
||
key={tool.path}
|
||
onClick={() => {
|
||
setIsMobileMenuOpen(false);
|
||
navigateWithGuard(tool.path);
|
||
}}
|
||
className={`flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300 w-full text-left ${
|
||
isActive(tool.path)
|
||
? 'bg-gradient-to-r from-indigo-500 to-purple-500 text-white shadow-lg'
|
||
: 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50'
|
||
}`}
|
||
>
|
||
<div className={`p-2 rounded-lg ${isActive(tool.path) ? 'bg-white/20' : 'bg-gradient-to-br from-indigo-500 to-purple-500'} shadow-sm`}>
|
||
<IconComponent className={`h-4 w-4 ${isActive(tool.path) ? 'text-white' : 'text-white'}`} />
|
||
</div>
|
||
<span>{tool.name}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
|
||
<div className="border-t border-slate-200/50 dark:border-slate-700/50 pt-4 mt-4">
|
||
<div className="text-xs font-semibold text-slate-600 dark:text-slate-600 uppercase tracking-wider px-4 py-2 flex items-center gap-2">
|
||
<Sparkles className="h-3 w-3" />
|
||
{isToolPage ? 'Switch Tools' : 'Tools'}
|
||
</div>
|
||
{TOOLS.map((tool) => {
|
||
const IconComponent = tool.icon;
|
||
const categoryConfig = getCategoryConfig(tool.category);
|
||
|
||
return (
|
||
<button
|
||
key={tool.path}
|
||
onClick={() => {
|
||
setIsMobileMenuOpen(false);
|
||
navigateWithGuard(tool.path);
|
||
}}
|
||
className={`flex items-center space-x-4 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300 w-full text-left ${
|
||
isActive(tool.path)
|
||
? 'bg-gradient-to-r from-blue-50 to-purple-50 dark:from-slate-700 dark:to-slate-600 text-blue-700 dark:text-blue-300'
|
||
: 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white hover:bg-white/50 dark:hover:bg-slate-700/50'
|
||
}`}
|
||
>
|
||
<div className={`p-2 rounded-lg bg-gradient-to-br ${categoryConfig.color} shadow-sm`}>
|
||
<IconComponent className="h-4 w-4 text-white" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="font-medium">{tool.name}</div>
|
||
<div className="text-xs text-slate-600 dark:text-slate-600">{tool.description}</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Main Content */}
|
||
<div className="flex flex-1 pt-16 min-w-0 w-full max-w-full overflow-x-hidden">
|
||
{/* Main Content Area */}
|
||
<main className="flex-1 flex flex-col min-w-0 w-full max-w-full">
|
||
{isToolPage && !isInvoicePreviewPage ? (
|
||
<div className="block">
|
||
<div className="hidden lg:block fixed top-16 left-0 z-[9999]">
|
||
<ToolSidebar navigateWithGuard={navigateWithGuard} />
|
||
</div>
|
||
<div className="flex-1 flex flex-col pl-0 lg:pl-16 min-w-0">
|
||
<div className="p-4 sm:p-6 w-full min-w-0 max-w-full overflow-x-hidden">
|
||
{children}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : isInvoicePreviewPage ? (
|
||
<div className="flex-1 flex flex-col">
|
||
<div className="flex-1">
|
||
{children}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex-1 flex flex-col">
|
||
<div className="flex-1">
|
||
{children}
|
||
</div>
|
||
{/* Global Footer for Homepage */}
|
||
<footer className="bg-white/30 dark:bg-slate-800/30 backdrop-blur-sm border-t border-slate-200/30 dark:border-slate-700/30 mt-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
<div className="text-center">
|
||
<div className="flex items-center justify-center mb-4">
|
||
<div className="relative">
|
||
<div className="absolute inset-0 rounded-lg blur opacity-20"></div>
|
||
<div className="relative p-2">
|
||
<img
|
||
src="/icon-192x192.png"
|
||
alt={SITE_CONFIG.title}
|
||
className="h-16 w-auto"
|
||
style={{ maxWidth: '100px' }}
|
||
onError={(e) => {
|
||
// Fallback to Terminal icon with text if logo fails to load
|
||
e.target.style.display = 'none';
|
||
e.target.nextSibling.style.display = 'flex';
|
||
}}
|
||
/>
|
||
<div className="hidden items-center gap-3">
|
||
<Terminal className="h-5 w-5 text-blue-500" />
|
||
<span className="text-lg font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
|
||
{SITE_CONFIG.title}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-center gap-2 mb-3">
|
||
<div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
|
||
<span className="text-sm font-medium text-slate-600 dark:text-slate-600">
|
||
© {SITE_CONFIG.year} {SITE_CONFIG.title}
|
||
</span>
|
||
<div className="w-2 h-2 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full"></div>
|
||
</div>
|
||
<p className="text-sm text-slate-600 dark:text-slate-600 mb-4">
|
||
Built with ❤️ for developers worldwide
|
||
</p>
|
||
<div className="flex flex-col items-center gap-4">
|
||
<div className="flex justify-center items-center gap-6 text-xs text-slate-600 dark:text-slate-600">
|
||
<div className="flex items-center gap-1">
|
||
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
|
||
<span>100% Client-Side</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
|
||
<span>Privacy First</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<div className="w-1.5 h-1.5 bg-purple-500 rounded-full"></div>
|
||
<span>Open Source</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4 text-xs">
|
||
<button
|
||
onClick={() => navigateWithGuard('/release-notes')}
|
||
className="text-slate-600 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||
>
|
||
Release Notes
|
||
</button>
|
||
<span className="text-slate-300 dark:text-slate-600">•</span>
|
||
<button
|
||
onClick={() => navigateWithGuard('/privacy')}
|
||
className="text-slate-600 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||
>
|
||
Privacy Policy
|
||
</button>
|
||
<span className="text-slate-300 dark:text-slate-600">•</span>
|
||
<button
|
||
onClick={() => navigateWithGuard('/terms')}
|
||
className="text-slate-600 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||
>
|
||
Terms of Service
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
|
||
{/* Footer for Tool Pages */}
|
||
{isToolPage && (
|
||
<footer className="bg-white/30 dark:bg-slate-800/30 backdrop-blur-sm border-t border-slate-200/30 dark:border-slate-700/30">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||
<div className="text-center">
|
||
<div className="flex items-center justify-center gap-2 mb-2">
|
||
<img
|
||
src="/icon-192x192.png"
|
||
alt={SITE_CONFIG.title}
|
||
className="h-16 w-auto"
|
||
style={{ maxWidth: '100px' }}
|
||
onError={(e) => {
|
||
// Fallback to Terminal icon with text if logo fails to load
|
||
e.target.style.display = 'none';
|
||
e.target.nextSibling.style.display = 'flex';
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center justify-center gap-2 mb-2">
|
||
<div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
|
||
<span className="text-xs font-medium text-slate-600 dark:text-slate-600">
|
||
© {SITE_CONFIG.year} {SITE_CONFIG.title}
|
||
</span>
|
||
<div className="w-2 h-2 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full"></div>
|
||
</div>
|
||
<div className="flex items-center justify-center gap-4 text-xs">
|
||
<button
|
||
onClick={() => navigateWithGuard('/release-notes')}
|
||
className="text-slate-600 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||
>
|
||
Release Notes
|
||
</button>
|
||
<span className="text-slate-300 dark:text-slate-600">•</span>
|
||
<button
|
||
onClick={() => navigateWithGuard('/privacy')}
|
||
className="text-slate-600 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||
>
|
||
Privacy Policy
|
||
</button>
|
||
<span className="text-slate-300 dark:text-slate-600">•</span>
|
||
<button
|
||
onClick={() => navigateWithGuard('/terms')}
|
||
className="text-slate-600 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||
>
|
||
Terms of Service
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
)}
|
||
|
||
{/* GDPR Consent Banner */}
|
||
<ConsentBanner />
|
||
|
||
{/* Navigation Confirmation Modal */}
|
||
<NavigationConfirmModal
|
||
isOpen={showModal}
|
||
onConfirm={handleConfirm}
|
||
onCancel={handleCancel}
|
||
targetPath={pendingNavigation?.to}
|
||
hasData={hasUnsavedData}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Layout;
|