I’m using motion.span with layoutId set to underline to nicely animate bottom bar of my tabs. The problem is that is works nice when click from left tab to the right
But its not visible when navifating from right tab to left because its hidden behind other tabs
from right to left
What should I change?
Full code
<Tabs
value={activeTab}
onValueChange={setActiveTab}
className='mt-[100px] min-h-[300px] w-full'
>
<TabsList className='flex items-start '>
<TabsTrigger
value='latex'
className='flex items-center gap-1.5'
>
<Keyboard className='h-5 w-5' />
<span>LaTeX</span>
{activeTab === 'latex' && (
<motion.span
layoutId='underline'
className='absolute left-0 top-full -mt-[4px] block h-[3px] w-full'
transition={{ duration: 200 }}
style={{
background:
'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
}}
/>
)}
</TabsTrigger>
<TabsTrigger
value='image'
className='flex items-center gap-1.5'
>
<ImageIcon className='h-5 w-5' />
<span>Zdjęcie</span>
{activeTab === 'image' && (
<motion.span
layoutId='underline'
className='absolute left-0 top-full -mt-[4px] block h-[3px] w-full'
transition={{ duration: 200 }}
style={{
background:
'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
}}
/>
)}
</TabsTrigger>
<TabsTrigger
value='video'
className='flex items-center gap-1.5'
>
<PlaySquare className='h-5 w-5' />
<span>Wideo</span>
{activeTab === 'video' && (
<motion.span
layoutId='underline'
transition={{ duration: 200 }}
className='absolute left-0 top-full z-[100] -mt-[4px] block h-[3px] w-full'
style={{
background:
'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
}}
/>
)}
</TabsTrigger>
{/* <div
ref={cursorRef}
className='absolute bottom-[0px] h-[4.5px] w-[100px] transition-all duration-300'
style={{
background:
'linear-gradient(113deg, hsl(260deg 100% 64%) 0%, hsl(190deg 100% 55%) 100%)',
left: '0px',
width: '0px',
boxShadow: '0px 0px 8px 0px hsl(262deg 100% 70% / 70%)',
}}
></div> */}
</TabsList>
<div
className='min-h-[300px] rounded-[5px] border-y border-y-[#3b3d3f] bg-[#20222c] p-5'
style={{
boxShadow:
'0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%)',
}}
>
<TabsContent value='latex'>
{/* {data && (
<GridSelect
data={data}
defaultSelected={data.filter(
(x) => x.title === 'Arytmetyka'
)}
/>
)} */}
</TabsContent>
<TabsContent value='image'>Zdjęcie</TabsContent>
<TabsContent value='video'>Wideo</TabsContent>
</div>
</Tabs>