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>