1 files changed, 52 insertions, 0 deletions
diff --git a/src/frontend/app/components/layout/Drawer.tsx b/src/frontend/app/components/layout/Drawer.tsx
new file mode 100644
index 0000000..55aa3a0
--- /dev/null
+++ b/src/frontend/app/components/layout/Drawer.tsx
@@ -0,0 +1,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>
+    </>
+  );
+};