83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState } from 'react'
|
||
import Link from 'next/link'
|
||
import Button from './Button'
|
||
const Burger = () => {
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
|
||
return (
|
||
<>
|
||
<button
|
||
onClick={() => setIsOpen(!isOpen)}
|
||
className="relative z-50 w-8 h-8 flex flex-col justify-center items-center"
|
||
>
|
||
<div className="relative w-8 h-8">
|
||
<span
|
||
className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
|
||
isOpen ? 'w-8 rotate-45 top-4' : 'w-8 top-2'
|
||
}`}
|
||
></span>
|
||
<span
|
||
className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
|
||
isOpen ? 'w-0 opacity-0 top-4' : 'w-8 top-4'
|
||
}`}
|
||
></span>
|
||
<span
|
||
className={`absolute h-0.5 bg-orange transition-all duration-300 ease-in-out ${
|
||
isOpen ? 'w-8 -rotate-45 top-4' : 'w-8 top-6'
|
||
}`}
|
||
></span>
|
||
</div>
|
||
</button>
|
||
|
||
{/* меню */}
|
||
<div
|
||
className={`fixed z-50 left-0 w-full bg-[#eeebeb] shadow-lg transition-all duration-300 ease-in-out origin-top ${
|
||
isOpen
|
||
? 'top-[80px] h-[calc(100vh-80px)] opacity-100 scale-y-100'
|
||
: 'top-[80px] h-0 opacity-0 scale-y-0'
|
||
} ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
|
||
>
|
||
<div
|
||
className={`flex flex-col items-center pt-12 space-y-8 transition-all duration-300 ${
|
||
isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'
|
||
}`}
|
||
>
|
||
<Link
|
||
href="/"
|
||
className="text-xl hover:text-orange transition-colors duration-200"
|
||
onClick={() => setIsOpen(false)}
|
||
>
|
||
Ссылка 1
|
||
</Link>
|
||
<Link
|
||
href="/search"
|
||
className="text-xl hover:text-orange transition-colors duration-200"
|
||
onClick={() => setIsOpen(false)}
|
||
>
|
||
Ссылка 2
|
||
</Link>
|
||
<Link
|
||
href="/about"
|
||
className="text-xl hover:text-orange transition-colors duration-200"
|
||
onClick={() => setIsOpen(false)}
|
||
>
|
||
Ссылка 3
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-xl hover:text-orange transition-colors duration-200"
|
||
onClick={() => setIsOpen(false)}
|
||
>
|
||
Могу взять посылку
|
||
</Link>
|
||
<Button text="Разместить объявление" />
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Burger
|