blob: 55aa3a0c087d4d2802da3ed7777c96b095cf73e8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import { Info, Settings, Star, X } from "lucide-react";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router";
import "./Drawer.css";
interface DrawerProps {
isOpen: boolean;
onClose: () => void;
}
export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose }) => {
const { t } = useTranslation();
const location = useLocation();
// Close drawer when route changes
useEffect(() => {
onClose();
}, [location.pathname]);
return (
<>
<div
className={`drawer-overlay ${isOpen ? "open" : ""}`}
onClick={onClose}
aria-hidden="true"
/>
<div className={`drawer ${isOpen ? "open" : ""}`}>
<div className="drawer__header">
<h2 className="drawer__title">Menu</h2>
<button className="drawer__close-btn" onClick={onClose}>
<X size={24} />
</button>
</div>
<nav className="drawer__nav">
<Link to="/favourites" className="drawer__link">
<Star size={20} />
<span>{t("navbar.favourites", "Favoritos")}</span>
</Link>
<Link to="/settings" className="drawer__link">
<Settings size={20} />
<span>{t("navbar.settings", "Ajustes")}</span>
</Link>
<Link to="/about" className="drawer__link">
<Info size={20} />
<span>{t("about.title", "Acerca de")}</span>
</Link>
</nav>
</div>
</>
);
};
|
