chore: first commit

src/entities/NavigationDrawer/NavigationDrawer.tsx

@@ -0,0 +1,77 @@
+import type { JSX } from "react"
+
+import { FunctionComponent } from "react"
+import Drawer from "react-modern-drawer"
+
+import cs from "classnames"
+import Link from "next/link"
+
+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 => {
+	return (
+		<Drawer
+			open={open}
+			onClose={onClose}
+			direction={position}
+			size={size}
+			className={cs(styles.drawer, className)}
+			aria-label="Navigation drawer"
+			duration={200}
+		>
+			<nav className={styles.root} data-testid="NavigationDrawer">
+				{title ? <div className={styles.header}>{title}</div> : null}
+				<ul className={styles.list}>
+					{buttons.map(({ label, icon: Icon, path, action }, index) => {
+						const key = `${label}-${path ?? index}`
+
+						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={styles.link}
+										onClick={handleClick}
+									>
+										{content}
+									</Link>
+								) : (
+									<button
+										type="button"
+										className={styles.button}
+										onClick={handleClick}
+									>
+										{content}
+									</button>
+								)}
+							</li>
+						)
+					})}
+				</ul>
+			</nav>
+		</Drawer>
+	)
+}