Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 | 1x 8x 8x 8x 8x 8x 6x 6x 6x 8x 6x 8x 64x 8x 8x 32x 32x | import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Menu, X, Sun, Moon } from 'lucide-react';
import SmoothScheduleLogo from '../SmoothScheduleLogo';
import LanguageSelector from '../LanguageSelector';
import { User } from '../../api/auth';
import { buildSubdomainUrl } from '../../utils/domain';
interface NavbarProps {
darkMode: boolean;
toggleTheme: () => void;
user?: User | null;
}
const Navbar: React.FC<NavbarProps> = ({ darkMode, toggleTheme, user }) => {
const { t } = useTranslation();
const location = useLocation();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 10);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Close mobile menu on route change
useEffect(() => {
setIsMenuOpen(false);
}, [location.pathname]);
const navLinks = [
{ to: '/features', label: t('marketing.nav.features') },
{ to: '/pricing', label: t('marketing.nav.pricing') },
{ to: '/about', label: t('marketing.nav.about') },
{ to: '/contact', label: t('marketing.nav.contact') },
];
const isActive = (path: string) => location.pathname === path;
// Get the dashboard URL based on user role
const getDashboardUrl = (): string => {
if (!user) return '/login';
const port = window.location.port ? `:${window.location.port}` : '';
const protocol = window.location.protocol;
if (['superuser', 'platform_manager', 'platform_support'].includes(user.role)) {
return buildSubdomainUrl('platform', '/');
}
if (user.business_subdomain) {
return buildSubdomainUrl(user.business_subdomain, '/');
}
return '/login';
};
return (
<nav
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
isScrolled
? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg shadow-sm'
: 'bg-transparent'
}`}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16 lg:h-20">
{/* Logo */}
<Link to="/" className="flex items-center gap-2 group">
<SmoothScheduleLogo className="h-12 w-12 text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors" />
<span className="text-xl font-bold text-gray-900 dark:text-white hidden sm:block">
{t('marketing.nav.brandName')}
</span>
</Link>
{/* Desktop Navigation */}
<div className="hidden lg:flex items-center gap-8">
{navLinks.map((link) => (
<Link
key={link.to}
to={link.to}
className={`text-sm font-medium transition-colors ${
isActive(link.to)
? 'text-brand-600 dark:text-brand-400'
: 'text-gray-600 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400'
}`}
>
{link.label}
</Link>
))}
</div>
{/* Right Section */}
<div className="flex items-center gap-3">
{/* Language Selector - Hidden on mobile */}
<div className="hidden md:block">
<LanguageSelector />
</div>
{/* Theme Toggle */}
<button
onClick={toggleTheme}
className="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label={darkMode ? t('marketing.nav.switchToLightMode') : t('marketing.nav.switchToDarkMode')}
>
{darkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
</button>
{/* Login Button - Hidden on mobile */}
{user ? (
<a
href={getDashboardUrl()}
className="hidden md:inline-flex px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
>
{t('marketing.nav.login')}
</a>
) : (
<Link
to="/login"
className="hidden md:inline-flex px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
>
{t('marketing.nav.login')}
</Link>
)}
{/* Get Started CTA */}
<Link
to="/signup"
className="hidden sm:inline-flex px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors shadow-sm"
>
{t('marketing.nav.getStarted')}
</Link>
{/* Mobile Menu Button */}
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="lg:hidden p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label={t('marketing.nav.toggleMenu')}
>
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
</div>
</div>
</div>
{/* Mobile Menu */}
<div
className={`lg:hidden overflow-hidden transition-all duration-300 ${
isMenuOpen ? 'max-h-96' : 'max-h-0'
}`}
>
<div className="px-4 py-4 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
<div className="flex flex-col gap-2">
{navLinks.map((link) => (
<Link
key={link.to}
to={link.to}
className={`px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
isActive(link.to)
? 'bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-400'
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
{link.label}
</Link>
))}
<hr className="my-2 border-gray-200 dark:border-gray-800" />
{user ? (
<a
href={getDashboardUrl()}
className="px-4 py-3 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
{t('marketing.nav.login')}
</a>
) : (
<Link
to="/login"
className="px-4 py-3 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
{t('marketing.nav.login')}
</Link>
)}
<Link
to="/signup"
className="px-4 py-3 rounded-lg text-sm font-medium text-center text-white bg-brand-600 hover:bg-brand-700 transition-colors"
>
{t('marketing.nav.getStarted')}
</Link>
<div className="px-4 py-2">
<LanguageSelector />
</div>
</div>
</div>
</div>
</nav>
);
};
export default Navbar;
|