44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import React, { FC, ReactNode, useState } from 'react';
|
|
import { HeaderAuthLinks } from './HeaderAuthLinks';
|
|
|
|
type HeaderMenuMobileProps = {
|
|
children: ReactNode;
|
|
};
|
|
|
|
export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({ children }) => {
|
|
const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="b-header__menu-open" onClick={() => setShowMobileMenu(!showMobileMenu)}>
|
|
<img
|
|
src="/images/menu-open.svg"
|
|
className="img-default"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
{showMobileMenu ? (
|
|
<div className="menu-mobile">
|
|
<div className="menu-mobile__inner">
|
|
<div className="menu-mobile__header">
|
|
<div className="menu-mobile__header__avatar">
|
|
<img className="img-default" src="/images/avatar.png" alt=""/>
|
|
</div>
|
|
<ul className="menu-mobile__header__nav">
|
|
<HeaderAuthLinks separatorClass="menu-mobile__header__nav__line" />
|
|
</ul>
|
|
</div>
|
|
<div className="menu-mobile__body">
|
|
<ul className="menu-mobile__list">
|
|
{children}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
};
|