Mobile Bottom Menu - Copy this React, Tailwind Component to your project

Import { useState } from "react"; import { FaHome, FaSun, FaMoon, FaBars, FaBell, FaUser, FaTimes } from "react icons/fa"; const MobileBottomMenu = () => { const [isDarkMode, setIsDarkMode] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const [showNotifications, setShowNotifications] = useState(false); const [activeTab, setActiveTab] = useState("home"); const handleThemeToggle = () => { setIsDarkMode(!isDarkMode); document.documentElement.classList.toggle("dark"); }; const handleMenuToggle = () => { setIsMenuOpen(!isMenuOpen); }; const handleNotifications = () => { setShowNotifications(!showNotifications); }; const menuItems = [ { id: "home", icon: FaHome, label: "Home", action: () => setActiveTab("home") }, { id: "theme", icon: isDarkMode ? FaSun : FaMoon, label: "Theme", action: handleThemeToggle }, { id: "menu", icon: isMenuOpen ? FaTimes : FaBars, label: "Menu", action: handleMenuToggle }, { id: "notifications", icon: FaBell, label: "Notifications", action: handleNotifications }, { id: "profile", icon: FaUser, label: "Profile", action: () => setActiveTab("profile") } ]; return ( <div className="fixed bottom 0 left 0 right 0 z 50"> {/* Menu Drawer Modified to slide from bottom */} <div className={`fixed inset 0 bg black bg opacity 50 transition opacity duration 300 ${isMenuOpen ? "opacity 100" : "opacity 0 pointer events none"}`}> <div className={`fixed bottom 0 left 0 right 0 h [80vh] ${isDarkMode ? "bg gray 800 text white" : "bg white text gray 800"} transform transition transform duration 300 rounded t 3xl ${isMenuOpen ? "translate y 0" : "translate y full"}`}> <div className="p 4"> <div className="w 12 h 1 bg gray 300 rounded full mx auto mb 4"></div> <h2 className="text xl font bold mb 4">Menu</h2> <ul className="space y 4"> <li className="p 2 hover:bg gray 100 dark:hover:bg gray 700 rounded lg cursor pointer">Home</li> <li className="p 2 hover:bg gray 100 dark:hover:bg gray 700 rounded lg cursor pointer">Settings</li> <li className="p 2 hover:bg gray 100 dark:hover:bg gray 700 rounded lg cursor pointer">Profile</li> <li className="p 2 hover:bg gray 100 dark:hover:bg gray 700 rounded lg cursor pointer">Help</li> </ul> </div> </div> </div> {/* Notifications Overlay */} {showNotifications && ( <div className={`fixed inset 0 ${isDarkMode ? "bg gray 900" : "bg white"} z 40 transition all duration 300 transform translate y 0`}> <div className="p 4"> <h2 className="text xl font bold mb 4">Notifications</h2> {/* Add your notifications here */} </div> </div> )} {/* Bottom Navigation */} <nav className={`${isDarkMode ? "bg gray 800 text white" : "bg white text gray 800"} px 4 py 3 shadow lg transition colors duration 300`}> <div className="flex justify between items center max w screen xl mx auto"> {menuItems.map((item) => ( <button key={item.id} onClick={item.action} className={`flex flex col items center justify center p 2 rounded lg transition all duration 300 ${activeTab === item.id ? (isDarkMode ? "bg gray 700" : "bg gray 100") : "hover:bg opacity 10 hover:bg gray 500"}`} aria label={item.label} > <item.icon className={`text xl mb 1 ${activeTab === item.id ? "scale 110" : "scale 100"} transition transform duration 300`} /> <span className="text xs">{item.label}</span> </button> ))} </div> </nav> </div> ); }; export default MobileBottomMenu; i have a code like that i want u to make the the drawer to close on clicking outside of the drawer and make the drawer to dragable so when user drags the drawer to bottom close it