JavaScript 56.7%
TypeScript 42.6%
1"use client";23import { motion, AnimatePresence } from "framer-motion";4import { X } from "lucide-react";5import Sidebar from "./Sidebar";67interface MobileNavProps {8 isOpen: boolean;9 onClose: () => void;10}1112export default function MobileNav({ isOpen, onClose }: MobileNavProps) {13 return (14 <AnimatePresence>15 {isOpen && (16 <>17 <motion.div18 initial={{ opacity: 0 }}19 animate={{ opacity: 1 }}20 exit={{ opacity: 0 }}21 className="fixed inset-0 bg-gray-950/50 backdrop-blur-sm z-[60] lg:hidden"22 onClick={onClose}23 />24 <motion.div25 initial={{ x: -320 }}26 animate={{ x: 0 }}27 exit={{ x: -320 }}28 transition={{ type: "spring", damping: 30, stiffness: 320 }}29 drag="x"30 dragConstraints={{ left: -320, right: 0 }}31 dragElastic={0.05}32 onDragEnd={(_, info) => { if (info.offset.x < -80 || info.velocity.x < -400) onClose(); }}33 className="fixed left-0 top-0 bottom-0 w-[300px] max-w-[86vw] z-[61] lg:hidden shadow-pop safe-top"34 >35 <Sidebar onNavigate={onClose} />36 <button37 onClick={onClose}38 className="absolute top-3 -right-12 w-10 h-10 rounded-full glass flex items-center justify-center text-gray-700 dark:text-gray-200"39 aria-label="Fermer le menu"40 >41 <X className="w-5 h-5" />42 </button>43 </motion.div>44 </>45 )}46 </AnimatePresence>47 );48}49