Initial commit
This commit is contained in:
414
components/Navbar.tsx
Normal file
414
components/Navbar.tsx
Normal file
@@ -0,0 +1,414 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Phone, Menu, X, ChevronDown } from 'lucide-react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { NAV_LINKS } from '../constants';
|
||||
|
||||
interface NavbarProps {
|
||||
transparent?: boolean;
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ transparent = false }) => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isMobileServicesMenuOpen, setIsMobileServicesMenuOpen] = useState(false);
|
||||
const [isMobileLabMenuOpen, setIsMobileLabMenuOpen] = useState(false);
|
||||
const [imgError, setImgError] = useState(false);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 50);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const isHome = location.pathname === '/';
|
||||
// Use transparent background only on Home and when not scrolled, if requested
|
||||
const isTransparent = transparent && isHome && !isScrolled;
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isTransparent ? 'bg-transparent py-6' : 'bg-brand-dark/95 backdrop-blur-md py-4 shadow-lg'
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto px-6 flex items-center justify-between text-white">
|
||||
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center gap-2 group">
|
||||
{!imgError ? (
|
||||
<img
|
||||
src="/media/geo-logo.webp"
|
||||
alt="ГеоВектор"
|
||||
className="h-[64px] w-auto object-contain"
|
||||
onError={() => setImgError(true)}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xl font-bold tracking-tighter">
|
||||
ГЕО<span className="text-brand-orange">ВЕКТОР</span>
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<ul className="hidden md:flex gap-8 text-sm font-medium items-center">
|
||||
{/* Главная */}
|
||||
<li>
|
||||
<Link
|
||||
to="/"
|
||||
className={`transition-colors hover:text-brand-orange ${
|
||||
location.pathname === '/' ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Главная
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* О компании */}
|
||||
<li>
|
||||
<Link
|
||||
to="/about"
|
||||
className={`transition-colors hover:text-brand-orange ${
|
||||
location.pathname === '/about' ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
О компании
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* Услуги с выпадающим меню */}
|
||||
<li className="relative group">
|
||||
<button
|
||||
className={`flex items-center gap-1 transition-colors hover:text-brand-orange ${
|
||||
location.pathname.startsWith('/services') ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Услуги
|
||||
<ChevronDown size={16} className={`transition-transform group-hover:rotate-180`} />
|
||||
</button>
|
||||
|
||||
{/* Выпадающее меню */}
|
||||
<div className="absolute top-full left-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div className="w-72 bg-brand-dark border border-gray-700 rounded-lg shadow-xl overflow-hidden">
|
||||
<Link
|
||||
to="/services"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors font-semibold border-b border-gray-700"
|
||||
>
|
||||
Все услуги
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/surveying"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Инженерные изыскания
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/design"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Проектирование
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/construction"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Строительство
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/soil-survey"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Обследование грунтов
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/building-survey"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Обследование здания
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/land-survey"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Кадастровые работы
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/technical-tasks"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors border-t border-gray-700"
|
||||
>
|
||||
Образцы технических заданий
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Проекты */}
|
||||
<li>
|
||||
<Link
|
||||
to="/projects"
|
||||
className={`transition-colors hover:text-brand-orange ${
|
||||
location.pathname === '/projects' ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Проекты
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* Автопарк */}
|
||||
<li>
|
||||
<Link
|
||||
to="/fleet"
|
||||
className={`transition-colors hover:text-brand-orange ${
|
||||
location.pathname === '/fleet' ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Автопарк
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* Сертификаты */}
|
||||
<li>
|
||||
<Link
|
||||
to="/certificates"
|
||||
className={`transition-colors hover:text-brand-orange ${
|
||||
location.pathname === '/certificates' ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Сертификаты
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* Лаборатории с выпадающим меню */}
|
||||
<li className="relative group">
|
||||
<button
|
||||
className={`flex items-center gap-1 transition-colors hover:text-brand-orange ${
|
||||
location.pathname.startsWith('/laboratories') ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Лаборатории
|
||||
<ChevronDown size={16} className={`transition-transform group-hover:rotate-180`} />
|
||||
</button>
|
||||
|
||||
{/* Выпадающее меню */}
|
||||
<div className="absolute top-full left-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div className="w-64 bg-brand-dark border border-gray-700 rounded-lg shadow-xl overflow-hidden">
|
||||
<Link
|
||||
to="/laboratories/soil"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Грунтовая лаборатория
|
||||
</Link>
|
||||
<Link
|
||||
to="/laboratories/radiation"
|
||||
className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
|
||||
>
|
||||
Радиационная лаборатория
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Контакты */}
|
||||
<li>
|
||||
<Link
|
||||
to="/contacts"
|
||||
className={`transition-colors hover:text-brand-orange ${
|
||||
location.pathname === '/contacts' ? 'text-brand-orange' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Контакты
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* CTA & Mobile Toggle */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/contacts" className="hidden md:flex items-center gap-2 text-sm font-medium hover:text-brand-orange transition-colors">
|
||||
<Phone className="w-4 h-4 text-brand-orange" />
|
||||
<span>Связаться</span>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
className="md:hidden text-white"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
{isMobileMenuOpen ? <X /> : <Menu />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="absolute top-full left-0 w-full bg-brand-dark border-t border-gray-800 p-6 flex flex-col gap-6 md:hidden shadow-xl">
|
||||
{/* Главная */}
|
||||
<Link
|
||||
to="/"
|
||||
className="text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Главная
|
||||
</Link>
|
||||
|
||||
{/* О компании */}
|
||||
<Link
|
||||
to="/about"
|
||||
className="text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
О компании
|
||||
</Link>
|
||||
|
||||
{/* Услуги в мобильном меню */}
|
||||
<div>
|
||||
<button
|
||||
className="flex items-center justify-between w-full text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileServicesMenuOpen(!isMobileServicesMenuOpen)}
|
||||
>
|
||||
Услуги
|
||||
<ChevronDown size={20} className={`transition-transform ${isMobileServicesMenuOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{isMobileServicesMenuOpen && (
|
||||
<div className="ml-4 mt-3 flex flex-col gap-3">
|
||||
<Link
|
||||
to="/services"
|
||||
className="text-gray-400 hover:text-brand-orange font-semibold"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Все услуги
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/surveying"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Инженерные изыскания
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/design"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Проектирование
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/construction"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Строительство
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/soil-survey"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Обследование грунтов
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/building-survey"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Обследование здания
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/land-survey"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Кадастровые работы
|
||||
</Link>
|
||||
<Link
|
||||
to="/services/technical-tasks"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Образцы ТЗ
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Проекты */}
|
||||
<Link
|
||||
to="/projects"
|
||||
className="text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Проекты
|
||||
</Link>
|
||||
|
||||
{/* Автопарк */}
|
||||
<Link
|
||||
to="/fleet"
|
||||
className="text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Автопарк
|
||||
</Link>
|
||||
|
||||
{/* Сертификаты */}
|
||||
<Link
|
||||
to="/certificates"
|
||||
className="text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Сертификаты
|
||||
</Link>
|
||||
|
||||
{/* Лаборатории в мобильном меню */}
|
||||
<div>
|
||||
<button
|
||||
className="flex items-center justify-between w-full text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileLabMenuOpen(!isMobileLabMenuOpen)}
|
||||
>
|
||||
Лаборатории
|
||||
<ChevronDown size={20} className={`transition-transform ${isMobileLabMenuOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{isMobileLabMenuOpen && (
|
||||
<div className="ml-4 mt-3 flex flex-col gap-3">
|
||||
<Link
|
||||
to="/laboratories/soil"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Грунтовая лаборатория
|
||||
</Link>
|
||||
<Link
|
||||
to="/laboratories/radiation"
|
||||
className="text-gray-400 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Радиационная лаборатория
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Контакты */}
|
||||
<Link
|
||||
to="/contacts"
|
||||
className="text-lg font-medium text-gray-300 hover:text-brand-orange"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Контакты
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/contacts"
|
||||
className="flex items-center gap-2 text-brand-orange font-bold mt-4"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<Phone className="w-5 h-5" /> Связаться
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
Reference in New Issue
Block a user