leaky-ships/leaky-ships/components/BurgerMenu.tsx

28 lines
837 B
TypeScript

import classNames from "classnames"
import React from "react"
function BurgerMenu({
onClick,
blur,
}: {
onClick?: () => void
blur?: boolean
}) {
return (
<button
className={classNames(
"absolute left-4 top-4 flex h-16 w-16 items-center justify-center rounded-lg border-b-2 border-shield-gray bg-grayish shadow-lg duration-100 active:border-b-0 active:border-t-2 md:left-6 md:top-6 md:h-20 md:w-20 md:rounded-xl md:border-b-4 md:active:border-t-4 lg:left-8 lg:top-8 xl:left-12 xl:top-12 xl:h-24 xl:w-24",
{ "blur-sm": blur }
)}
onClick={() => onClick && setTimeout(onClick, 200)}
>
<img
className="pixelart h-12 w-12 md:h-16 md:w-16 xl:h-20 xl:w-20"
src="/assets/burger-menu.png"
alt="Burger Menu"
/>
</button>
)
}
export default BurgerMenu