How to create a bar near to text in Tailwind CSS? - animation

Question

I am a beginner to Tailwind CSS. And I am finding it difficult to create a button design as shown in the picture in tailwind Css
So I want to display that little bar on the right when the individual section like eg. Home,Trends,Feed are pressed. So can you please help me out with it. I want the answer in tailwind css.
Here is the code:
<div className="flex">
<div className="w-72 bg-white text-gray-100 shadow-lg">
<div class="flex h-full flex-col p-7 pl-8 text-sm">
<div class="relative flex w-full items-center justify-between">
<a class="flex space-x-5 py-5 text-slate-800">
<MusicNoteIcon class="h-5 w-5"></MusicNoteIcon>
<p class="font-semibold">Sovereignty Kingdom</p>
</a>
<button class="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
<SwitchHorizontalIcon class="h-5 w-5"></SwitchHorizontalIcon>
</button>
</div>
<nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
<HomeIcon className="h-5 w-5" />
<p>Home</p>
</nav>
<nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
<TrendingUpIcon className="h-5 w-5" />
<p>Trends</p>
</nav>
<nav className="delay-50 duration-2 cursor-pointer00 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
<RssIcon className="h-5 w-5" />
<p>Feed</p>
</nav></div>
</div>
</div>```

Answer 1

I'm not sure if this is the only solution, but this worked for me:
The first thing I did was define an array for the buttons group :
const elements=[
{name:'Home',ico:faHome}, //I'm using font awesome Icons,you can use yours
{name:'Trend',ico:faFireAlt},
{name:'Feed',ico:faFeed}
]
then I defined a state so that I know which button was clicked like
//(-1) is the button id, default (-1) so that the bar won't render by default
const [clickedId, setClickedId] = useState(-1);
Here is the full code:
<div className='flex m-14 w-72 '>
<div className="w-full bg-white text-gray-100 shadow-lg">
<div className="flex h-full flex-col p-7 pl-8 text-sm">
<div className="relative flex w-full items-center justify-between">
<a className="flex space-x-5 py-5 text-slate-800">
<div className="h-5 w-5 bg-teal-800 rounded-full"></div>
<p className="font-semibold">Sovereignty Kingdom</p>
</a>
<button className="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
<div className="h-5 w-5 bg-teal-800 rounded-full"></div>
</button>
</div>
{/* map over the buttons array to render them */}
{elements.map((el,id)=>(
{/* give every button a key */}
<button key={id} name={el.name}
{/* when a button is clicked assign clickedId to the current button id */}
onClick={() => setClickedId(id)}
{/* based on the button id append classes to make the sidebar */}
className={`relative delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3
text-slate-800 transition duration-75 ease-in-out hover:-translate-y-1
hover:scale-110 hover:bg-black hover:text-white
${(id === clickedId) ?`after:w-1 after:h-12 after:bg-black after:rounded-full after:absolute after:-right-7
hover:after:transition hover:after:duration-75 hover:after:-right-4 hover:after:ease-in-out`:'' }`}>
<FontAwesomeIcon className='h-5 w-5 ' icon={el.ico}/>
<p>{el.name}</p>
</button>
))}
</div>
</div>
</div>
or check it Live on codesandbox.