A toolbar that changes its height as needed.
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 Manage documents
70 </button>
71 </div>
72 ),
73 },
74 {
75 id: 4,
76 label: 'Wallet',
77 title: <WalletCards className='h-5 w-5' />,
78 content: (
79 <div className='flex flex-col space-y-4'>
80 <div className='flex flex-col text-zinc-700'>
81 <span>Current Balance</span>
82 <span>$1,250.32</span>
83 </div>
84 <button
85 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]'
86 type='button'
87 >
88 View Transactions
89 </button>
90 </div>
91 ),
92 },
93];
94
95export default function ToolbarExpandable() {
96 const [active, setActive] = useState<number | null>(null);
97 const [contentRef, { height: heightContent }] = useMeasure();
98 const [menuRef, { width: widthContainer }] = useMeasure();
99 const ref = useRef<HTMLDivElement>(null);
100 const [isOpen, setIsOpen] = useState(false);
101 const [maxWidth, setMaxWidth] = useState(0);
102
103 useClickOutside(ref, () => {
104 setIsOpen(false);
105 setActive(null);
106 });
107
108 useEffect(() => {
109 if (!widthContainer || maxWidth > 0) return;
110
111 setMaxWidth(widthContainer);
112 }, [widthContainer, maxWidth]);
113
114 return (
115 <MotionConfig transition={transition}>
116 <div className='absolute bottom-8' ref={ref}>
117 <div className='h-full w-full rounded-xl border border-zinc-950/10 bg-white'>
118 <div className='overflow-hidden'>
119 <AnimatePresence initial={false} mode='sync'>
120 {isOpen ? (
121 <motion.div
122 key='content'
123 initial={{ height: 0 }}
124 animate={{ height: heightContent || 0 }}
125 exit={{ height: 0 }}
126 style={{
127 width: maxWidth,
128 }}
129 >
130 <div ref={contentRef} className='p-2'>
131 {ITEMS.map((item) => {
132 const isSelected = active === item.id;
133
134 return (
135 <motion.div
136 key={item.id}
137 initial={{ opacity: 0 }}
138 animate={{ opacity: isSelected ? 1 : 0 }}
139 exit={{ opacity: 0 }}
140 >
141 <div
142 className={cn(
143 'px-2 pt-2 text-sm',
144 isSelected ? 'block' : 'hidden'
145 )}
146 >
147 {item.content}
148 </div>
149 </motion.div>
150 );
151 })}
152 </div>
153 </motion.div>
154 ) : null}
155 </AnimatePresence>
156 </div>
157 <div className='flex space-x-2 p-2' ref={menuRef}>
158 {ITEMS.map((item) => (
159 <button
160 key={item.id}
161 aria-label={item.label}
162 className={cn(
163 'relative flex h-9 w-9 shrink-0 scale-100 select-none appearance-none items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-800 focus-visible:ring-2 active:scale-[0.98]',
164 active === item.id ? 'bg-zinc-100 text-zinc-800' : ''
165 )}
166 type='button'
167 onClick={() => {
168 if (!isOpen) setIsOpen(true);
169 if (active === item.id) {
170 setIsOpen(false);
171 setActive(null);
172 return;
173 }
174
175 setActive(item.id);
176 }}
177 >
178 {item.title}
179 </button>
180 ))}
181 </div>
182 </div>
183 </div>
184 </MotionConfig>
185 );
186}
187