components/GlassDrawer.js

// components/GlassDrawer.js
import { motion, AnimatePresence } from "framer-motion";

export default function GlassDrawer({ isOpen, setIsOpen }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setIsOpen(false)}
            className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40"
          />
          
          {/* Drawer */}
          <motion.div
            initial={{ x: "-100%" }}
            animate={{ x: 0 }}
            exit={{ x: "-100%" }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
            className="fixed top-0 left-0 bottom-0 w-3/4 max-w-xs z-50 bg-white/60 backdrop-blur-2xl border-r border-white/50 p-8 pt-16"
          >
            <h2 className="text-2xl font-bold text-[#1E293B] mb-8">Menu</h2>
            {/* Menu Items would go here */}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}