93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
'use client';
|
||
|
||
import { LogoIcon } from '@/components/icons/LogoIcon';
|
||
import { LogoWithTextIcon } from '@/components/icons/LogoWithTextIcon';
|
||
import { ModalWithForm } from '@/components/Layout/ModalWithForm';
|
||
import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
|
||
import { useWindowWidth } from '@/hooks/useWindowWidth';
|
||
import { useModalStore } from '@/stores/useModalStore';
|
||
import { BurgerLink } from '@/ui/BurgerLink';
|
||
import { Button } from '@/ui/Button';
|
||
import { NavLink } from '@/ui/NavLink';
|
||
import { motion } from 'framer-motion';
|
||
import Link from 'next/link';
|
||
import { useRef, useState } from 'react';
|
||
import { useOnClickOutside } from 'usehooks-ts';
|
||
import { ProductsList } from './ProductsList';
|
||
|
||
export function Header() {
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
const setModal = useModalStore(state => state.setModal);
|
||
|
||
const menuRef = useRef<HTMLDivElement>(null);
|
||
const menuBtnRef = useRef<HTMLButtonElement>(null);
|
||
useOnClickOutside<HTMLDivElement | HTMLButtonElement>(
|
||
[menuRef, menuBtnRef],
|
||
() => setMenuOpen(false),
|
||
);
|
||
|
||
const width = useWindowWidth();
|
||
|
||
return (
|
||
<header className="relative">
|
||
<nav className="flex items-stretch justify-between border-b border-[#3D425C] lg:min-h-[72px] min-h-16 -mx-6">
|
||
<div className="flex">
|
||
<div className="w-[25vw] lg:pl-6 flex items-center">
|
||
<Link href={'/'}>
|
||
<ClassNameWrapper className="xl:hidden" element={<LogoIcon />} />
|
||
{width >= 1280 && <LogoWithTextIcon />}
|
||
</Link>
|
||
</div>
|
||
<div className="flex border-x border-[#3D425C] max-xl:hidden relative">
|
||
<ProductsList />
|
||
<NavLink href="/about">О компании</NavLink>
|
||
<NavLink href="/blog">Блог</NavLink>
|
||
<NavLink href="/projects">Проекты</NavLink>
|
||
</div>
|
||
</div>
|
||
<div className="flex">
|
||
<Button
|
||
onClick={() => setModal(<ModalWithForm />)}
|
||
className="rounded-none btn-text font-bold max-sm:hidden px-10 outline-none"
|
||
>
|
||
Оставить заявку
|
||
</Button>
|
||
</div>
|
||
</nav>
|
||
{menuOpen && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{
|
||
opacity: +menuOpen,
|
||
visibility: menuOpen ? 'visible' : 'hidden',
|
||
}}
|
||
transition={{ duration: 0.2 }}
|
||
ref={menuRef}
|
||
onClick={() => setMenuOpen(false)}
|
||
className={
|
||
'absolute z-20 w-full xl:hidden sm:max-xl:max-w-[340px] right-0' +
|
||
(menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '')
|
||
}
|
||
>
|
||
<ProductsList />
|
||
<BurgerLink href="/about">О компании</BurgerLink>
|
||
<BurgerLink href="/blog">Блог</BurgerLink>
|
||
<BurgerLink href="/projects">Проекты</BurgerLink>
|
||
<div className="grid grid-cols-[2fr_1fr_1fr] sm:grid-cols-2">
|
||
<Button
|
||
onClick={() => {
|
||
setMenuOpen(false);
|
||
setModal(<ModalWithForm />);
|
||
}}
|
||
width="full"
|
||
className="sm:hidden font-semibold btn-text rounded-none"
|
||
>
|
||
Оставить заявку
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</header>
|
||
);
|
||
}
|