DENSER MENU
comunities-sidebar
<CardTitle>
<Link href="/trending" className="hover:cursor-pointer hover:text-red-600">
{t('navigation.communities_nav.all_posts')}
</Link>
</CardTitle>
</CardHeader>
Usar css do tailwindcss, documentação: https://tailwindcss.com/docs/hover-focus-and-other-states
import { FC, useState } from 'react';
//no import
const [activeItem, setActiveItem] = useState(null);
//antes de return
<CardHeader className="px-0 py-4">
<div className="px-0 py-4">
<ul>
<li className={`py-2 hover:bg-blue-100 ${activeItem === 'all_posts' ? 'bg-blue-100' : ''}`}>
<CardTitle
className="border-blue-500"
onClick={() => setActiveItem('all_posts')}
>
<Link href="/trending" className="hover:cursor-pointer hover:text-red-600">
{t('navigation.communities_nav.all_posts')}
</Link>
</CardTitle>
</li>
<li className={`py-2 hover:bg-blue-100 ${activeItem === 'local_posts' ? 'bg-blue-100' : ''}`}>
<CardTitle
className="border-green-500"
onClick={() => setActiveItem('local_posts')}
>
<Link href="/hot" className="hover:cursor-pointer hover:text-red-600">
Local posts
</Link>
</CardTitle>
</li>
<li className={`py-2 hover:bg-blue-100 ${activeItem === 'post_communities' ? 'bg-blue-100' : ''}`}>
<CardTitle
className="border-yellow-500"
onClick={() => setActiveItem('post_communities')}
>
<Link href="/trending/new" className="hover:cursor-pointer hover:text-red-600">
Communities
</Link>
</CardTitle>
</li>
<li className={`py-2 hover:bg-blue-100 ${activeItem === 'post_settings' ? 'bg-blue-100' : ''}`}>
<CardTitle
className="border-red-500"
onClick={() => setActiveItem('post_settings')}
>
<Link href="/muted" className="hover:cursor-pointer hover:text-red-600">
Settings
</Link>
</CardTitle>
</li>
</ul>
</div>
</CardHeader>
Meus Posts sobre como ediar algumas coisa da frontend das tribos(nitro condenser).
Indice de Posts