Toolbar Expandable

1'use client';
2 
3import React, { useEffect, useRef, useState } from 'react';
4import useMeasure from 'react-use-measure';
5import { AnimatePresence, motion, MotionConfig } from 'motion/react';
6import { cn } from '@/lib/utils';
7import useClickOutside from '@/hooks/useClickOutside';
8import { Folder, MessageCircle, User, WalletCards } from 'lucide-react';
9 
10const transition = {
11  type: 'spring',
12  bounce: 0.1,
13  duration: 0.25,
14};
15 
16const ITEMS = [
17  {
18    id: 1,
19    label: 'User',
20    title: <User className='h-5 w-5' />,
21    content: (
22      <div className='flex flex-col space-y-4'>
23        <div className='flex flex-col space-y-1 text-zinc-700'>
24          <div className='h-8 w-8 rounded-full bg-linear-to-br from-blue-500 to-blue-400' />
25          <span>Ibelick</span>
26        </div>
27        <button
28          className='relative h-8 w-full scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]'
29          type='button'
30        >
31          Edit Profile
32        </button>
33      </div>
34    ),
35  },
36  {
37    id: 2,
38    label: 'Messages',
39    title: <MessageCircle className='h-5 w-5' />,
40    content: (
41      <div className='flex flex-col space-y-4'>
42        <div className='text-zinc-700'>You have 3 new messages.</div>
43        <button
44          className='relative h-8 w-full scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]'
45          type='button'
46        >
47          View more
48        </button>
49      </div>
50    ),
51  },
52  {
53    id: 3,
54    label: 'Documents',
55    title: <Folder className='h-5 w-5' />,
56    content: (
57      <div className='flex flex-col space-y-4'>
58        <div className='flex flex-col text-zinc-700'>
59          <div className='space-y-1'>
60            <div>Project_Proposal.pdf</div>
61            <div>Meeting_Notes.docx</div>
62            <div>Financial_Report.xls</div>
63          </div>
64        </div>
65        <button
66          className='relative h-8 w-full scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 px-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]'
67          type='button'
68        >
69// … truncated