Animated Sidebar

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { FileText, Home, Menu, Settings, Users, X } from "lucide-react";
5import { useState } from "react";
6 
7const menuItems = [
8  { icon: Home, label: "Dashboard" },
9  { icon: Users, label: "Team" },
10  { icon: FileText, label: "Documents" },
11  { icon: Settings, label: "Settings" },
12];
13 
14export function AnimatedSidebar() {
15  const [isOpen, setIsOpen] = useState(false);
16 
17  return (
18    <div>
19      <motion.button
20        onClick={() => setIsOpen(true)}
21        className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-[var(--muted-foreground)]"
22        whileHover={{ scale: 1.05 }}
23        whileTap={{ scale: 0.95 }}
24      >
25        <Menu className="h-5 w-5" />
26      </motion.button>
27 
28      <AnimatePresence>
29        {isOpen && (
30          <>
31            <motion.div
32              initial={{ opacity: 0 }}
33              animate={{ opacity: 1 }}
34              exit={{ opacity: 0 }}
35              className="fixed inset-0 z-50 bg-black/50"
36              onClick={() => setIsOpen(false)}
37            />
38 
39            <motion.div
40              initial={{ x: "-100%" }}
41              animate={{ x: 0 }}
42              exit={{ x: "-100%" }}
43              transition={{ type: "spring", damping: 30, stiffness: 300 }}
44              className="fixed left-0 top-0 z-50 h-full w-64 border-r bg-card  bg-[var(--card-bg)] p-6 shadow-2xl"
45            >
46              <div className="flex items-center justify-between">
47                <motion.h2
48                  initial={{ opacity: 0, x: -20 }}
49                  animate={{ opacity: 1, x: 0 }}
50                  transition={{ delay: 0.1 }}
51                  className="text-xl font-semibold"
52                >
53                  Menu
54                </motion.h2>
55                <motion.button
56                  onClick={() => setIsOpen(false)}
57                  whileHover={{ rotate: 90, scale: 1.1 }}
58                  whileTap={{ scale: 0.9 }}
59                  className="text-[var(--foreground)]/60 hover:text-[var(--foreground)]"
60                >
61                  <X className="h-5 w-5" />
62                </motion.button>
63              </div>
64 
65              <nav className="mt-8">
66                <ul className="space-y-2">
67                  {menuItems.map((item, index) => {
68                    const Icon = item.icon;
69                    return (
70                      <motion.li
71                        key={item.label}
72// … truncated