50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import React, { FC, ReactNode, useState } from 'react';
|
|
import { HeaderAuthLinks } from './HeaderAuthLinks';
|
|
|
|
type HeaderMenuMobileProps = {
|
|
children: ReactNode;
|
|
enterTitle: string;
|
|
registerTitle: string;
|
|
};
|
|
|
|
export const HeaderMobileMenu: FC<HeaderMenuMobileProps> = ({ children, enterTitle, registerTitle }) => {
|
|
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"
|
|
enterTitle={enterTitle}
|
|
registerTitle={registerTitle}
|
|
/>
|
|
</ul>
|
|
</div>
|
|
<div className="menu-mobile__body">
|
|
<ul className="menu-mobile__list">
|
|
{children}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
};
|