Sidebar Exemple 1

1"use client";
2
3import { motion } from "framer-motion";
4import {
5    Bell,
6    MoreVertical,
7    Search,
8    Edit3,
9    CheckCheck,
10} from "lucide-react";
11
12export default function Sidebar() {
13    return (
14        <motion.aside
15            className="w-[320px] lg:w-[340px] h-full flex flex-col bg-white border-r border-gray-100"
16            initial={{ opacity: 0, x: -10 }}
17            animate={{ opacity: 1, x: 0 }}
18            transition={{ duration: 0.3 }}
19        >
20            {/* Header */}
21            <div className="p-4 flex items-center justify-between">
22                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-400 to-amber-500 overflow-hidden">
23                    <div className="w-full h-full flex items-center justify-center text-white font-semibold text-sm">
24                        Me
25                    </div>
26                </div>
27
28                <div className="flex items-center gap-1">
29                    <button className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500">
30                        <Bell size={18} />
31                    </button>
32
33                    <button className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500">
34                        <MoreVertical size={18} />
35                    </button>
36                </div>
37            </div>
38
39            {/* Search */}
40            <div className="px-4 pb-3">
41                <div className="relative">
42                    <Search
43                        size={15}
44                        className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
45                    />
46
47                    <input
48                        placeholder="Search chats"
49                        className="w-full pl-9 pr-4 py-2 bg-gray-100 rounded-xl text-sm text-gray-700 placeholder:text-gray-400 outline-none"
50                    />
51                </div>
52            </div>
53
54            {/* Tabs */}
55            <div className="px-4 pb-3 flex items-center gap-1">
56                <button className="relative flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-gray-900">
57                    <span className="absolute inset-0 bg-gray-100 rounded-full" />
58                    <span className="relative">All</span>
59
60// … truncated