Daniil
93 lines
2.1 KiB
TypeScript
93 lines
2.1 KiB
TypeScript
import type { JSX } from "react"
|
|
|
|
import { X } from "lucide-react"
|
|
import { FunctionComponent } from "react"
|
|
import Drawer from "react-modern-drawer"
|
|
|
|
import cs from "classnames"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
import { INavigationDrawerProps } from "./NavigationDrawer.d"
|
|
import styles from "./NavigationDrawer.module.scss"
|
|
|
|
import "react-modern-drawer/dist/index.css"
|
|
|
|
export const NavigationDrawer: FunctionComponent<INavigationDrawerProps> = ({
|
|
buttons,
|
|
className,
|
|
open,
|
|
onClose,
|
|
position = "left",
|
|
size = 280,
|
|
title,
|
|
}): JSX.Element => {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
onClose={onClose}
|
|
direction={position}
|
|
size={size}
|
|
className={cs(styles.drawer, className)}
|
|
aria-label="Навигация"
|
|
duration={200}
|
|
>
|
|
<nav className={styles.root} data-testid="NavigationDrawer">
|
|
<div className={styles.header}>
|
|
<span className={styles.brand}>{title ?? "Coffee Project"}</span>
|
|
<button
|
|
type="button"
|
|
className={styles.closeButton}
|
|
onClick={onClose}
|
|
aria-label="Закрыть навигацию"
|
|
>
|
|
<X />
|
|
</button>
|
|
</div>
|
|
<ul className={styles.list}>
|
|
{buttons.map(({ label, icon: Icon, path, action }, index) => {
|
|
const key = `${label}-${path ?? index}`
|
|
const isActive = path ? pathname === path : false
|
|
|
|
const content = (
|
|
<>
|
|
{Icon ? <Icon className={styles.icon} /> : null}
|
|
<span className={styles.label}>{label}</span>
|
|
</>
|
|
)
|
|
|
|
const handleClick = (): void => {
|
|
action?.()
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<li className={styles.item} key={key}>
|
|
{path ? (
|
|
<Link
|
|
href={path}
|
|
className={cs(styles.link, isActive && styles.active)}
|
|
onClick={handleClick}
|
|
>
|
|
{content}
|
|
</Link>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className={styles.button}
|
|
onClick={handleClick}
|
|
>
|
|
{content}
|
|
</button>
|
|
)}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
</Drawer>
|
|
)
|
|
}
|