"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { X, Menu, Home, User, Settings, Bell, Search, Heart, ShoppingBag, CreditCard, HelpCircle, LogOut, } from "lucide-react"; const Sidebar = ({ isOpen, onClose, direction = "left", // 'left', 'right', 'top', 'bottom' width = "w-80", // for left/right height = "h-96", // for top/bottom children, }) => { const getAnimationProps = () => { const baseTransition = { duration: 0.3, ease: [0.16, 1, 0.3, 1], }; switch (direction) { case "left": return { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" }, className: `fixed top-0 left-0 bottom-0 ${width}`, transition: baseTransition, }; case "right": return { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" }, className: `fixed top-0 right-0 bottom-0 ${width}`, transition: baseTransition, }; case "top": return { initial: { y: "-100%" }, animate: { y: 0 }, exit: { y: "-100%" }, className: `fixed top-0 left-0 right-0 ${height}`, transition: baseTransition, }; case "bottom": return { initial: { y: "100%" }, animate: { y: 0 }, exit: { y: "100%" }, className: `fixed bottom-0 left-0 right-0 ${height}`, transition: baseTransition, }; default: return { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" }, className: `fixed top-0 left-0 bottom-0 ${width}`, transition: baseTransition, }; } }; const animationProps = getAnimationProps(); return ( {isOpen && ( <> {/* Backdrop */} {/* Sidebar */} {children} )} ); }; const NavigationContent = ({ onClose }) => (

{/* Header */}

Dashboard

Welcome back

{/* Navigation */}

{[ { icon: Home, label: "Dashboard", active: true }, { icon: User, label: "Profile" }, { icon: ShoppingBag, label: "Orders" }, { icon: Heart, label: "Wishlist" }, { icon: CreditCard, label: "Payment" }, { icon: Bell, label: "Notifications" }, { icon: Settings, label: "Settings" }, ].map((item, index) => ( {item.label} ))}

{/* Footer */}

); // Mobile Menu Content const MobileMenuContent = ({ onClose }) => (

); // Demo Component const SidebarDemo = () => { const [sidebars, setSidebars] = useState({ left: false, right: false, top: false, bottom: false, }); const openSidebar = (direction) => { setSidebars((prev) => ({ ...prev, [direction]: true })); }; const closeSidebar = (direction) => { setSidebars((prev) => ({ ...prev, [direction]: false })); }; return ( <>

closeSidebar("left")} direction="left" width="w-80" > closeSidebar("left")} /> closeSidebar("right")} direction="right" width="w-80" > closeSidebar("right")} /> closeSidebar("top")} direction="top" height="h-80" > closeSidebar("top")} /> closeSidebar("bottom")} direction="bottom" height="h-96" > closeSidebar("bottom")} /> ); }; export default SidebarDemo;

Responsive Animated Sidebar with Tailwind CSS & Framer Motion