new features

src/entities/NavigationDrawer/NavigationDrawer.tsx

@@ -1,10 +1,12 @@
 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"
@@ -20,6 +22,8 @@ export const NavigationDrawer: FunctionComponent<INavigationDrawerProps> = ({
 	size = 280,
 	title,
 }): JSX.Element => {
+	const pathname = usePathname()
+
 	return (
 		<Drawer
 			open={open}
@@ -27,14 +31,25 @@ export const NavigationDrawer: FunctionComponent<INavigationDrawerProps> = ({
 			direction={position}
 			size={size}
 			className={cs(styles.drawer, className)}
-			aria-label="Navigation drawer"
+			aria-label="Навигация"
 			duration={200}
 		>
 			<nav className={styles.root} data-testid="NavigationDrawer">
-				{title ? <div className={styles.header}>{title}</div> : null}
+				<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 = (
 							<>
@@ -53,7 +68,7 @@ export const NavigationDrawer: FunctionComponent<INavigationDrawerProps> = ({
 								{path ? (
 									<Link
 										href={path}
-										className={styles.link}
+										className={cs(styles.link, isActive && styles.active)}
 										onClick={handleClick}
 									>
 										{content}