fixed menu tab scroll sizes

This commit is contained in:
SethBurkart123
2024-03-27 23:28:16 +11:00
parent 6d07968f74
commit 073ba4d0d5
3 changed files with 12 additions and 12 deletions
+8 -9
View File
@@ -77,20 +77,19 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
))}
</div>
</div>
<div className="h-full px-4 overflow-y-scroll overflow-x-clip">
<div className="h-full px-4 overflow-x-clip">
<motion.div
initial={false}
animate={{ x: `${position}%` }}
transition={springTransition}
className='flex'
>
<div className="flex">
{tabs.map((tab, index) => (
<div key={index} className={`absolute w-full transition-opacity duration-300 pb-4 ${activeTab === index ? 'opacity-100' : 'opacity-0'}`}
style={{left: `${index * 100}%`}}>
{tab.content}
</div>
))}
</div>
{tabs.map((tab, index) => (
<div key={index} className={`absolute h-[100vh] overflow-y-scroll w-full pb-40 transition-opacity duration-300 ${activeTab === index ? 'opacity-100' : 'opacity-0'}`}
style={{left: `${index * 100}%`}}>
{tab.content}
</div>
))}
</motion.div>
</div>
</>