v2.5.2
Giriş yap

React + Tailwind Spotify Clone Sidebar Menu' de Aktif Seçildiğinde İkon Değişmesi

emron
154 defa görüntülendi
1

Merhabalar, spotify biraz değişmiş. Videodakinden farklı şeyler getirmişler. Örneğin ana sayfa ya tıkladığın zaman o aktif oluyor ve ikonu değişiyor. (Gif te ki gibi)

Alt Text

<NavLink style={({ isActive }) => isActive ? activeStyle : undefined} exact to={"/"} className="h-10 flex gap-x-4 items-center text-sm font-semibold text-link rounded hover:text-white px-4">
    {/* {
        active ? <span><Icon name="homeActive" /></span> : <span><Icon name="home" /></span>
    } */}
    <span><Icon name="home" /></span>
    Ana sayfa
</NavLink>

Comment satırında belirttiğim gibi kullanarak yapmaya çalıştım fakat ne kullanırsam kullayım bir sonuca ulaşamadım. Bir de buraya sormak istedim.

Şimdiden teşekkür ederim :)

javascript react
Cevap yaz
Cevaplar (1)
emron
664 gün önce
<NavLink exact to={"/"}>
    {({ isActive }) => (
        <span style={isActive ? activeStyle : undefined} className="h-10 flex gap-x-4 items-center text-sm font-semibold text-link rounded hover:text-white px-4">
            { isActive ? <Icon name="homeActive" /> : <Icon name="home" /> }
            Ana sayfa
        </span>
    )}
</NavLink>

Sorunu çözdüm arkadaşlar, react router dom'un içinde ki dokümanda örnek varmış fakat görmemiştim. Bir arkadaş uyardı ve düzenledim, şu an tıkır tıkır çalışıyor.

0
#010460