React ve Tailwind CSS ile geliştirdiğiniz bu kodda, arka plan renginin değişikliği için butona iki kez tıklamanız gerektiğini belirtmişsiniz. Tek tıklamayla arka plan rengini değiştirmek istiyorsanız, problemin muhtemelen React'in state yönetimi veya Tailwind CSS'in dinamik sınıflarının kullanımıyla ilgili olduğunu düşünebiliriz.

Kodunuzda doğrudan bir arka plan rengi değişikliği ile ilgili bir işlem göremiyorum, ancak genel bir çözüm önerisi sunabilirim. Eğer arka plan rengini dinamik olarak değiştirmek istiyorsanız, React'te bir state kullanarak bu işlemi yönetebilirsiniz. Örneğin, bir butona tıkladığınızda arka plan rengini değiştiren basit bir örnek:

import React, { useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import { useModal } from "../ModalContext";
import "./aside.css";

function Aside() {
  const { openModal } = useModal();
  const navigate = useNavigate();
  // Arka plan rengini kontrol etmek için bir state tanımlayın
  const [bgColor, setBgColor] = useState("bg-blue-500"); // Başlangıç rengi

  const handleNewPostClick = () => {
    openModal();
  };

  const handleJournalClick = () => {
    navigate('/');
    // Arka plan rengini değiştir
    setBgColor("bg-green-500"); // Yeni renk
  };

  const handleRolidClick = () => {
    navigate('/rolid');
    // Arka plan rengini değiştir
    setBgColor("bg-red-500"); // Yeni renk
  };

  return (
    <div className={`fixed bottom-0 z-50 w-full -translate-x-1/2 border-t border-blue-500 left-1/2 ${bgColor}`} style={{ backgroundColor: "#1b2642" }}>
      <div className="w-full">
        <div className="grid max-w-xs grid-cols-2 gap-1 px-1 py-0.5 mx-auto my-1 bg-blue-200 rounded-lg dark:bg-white" role="group">
          <button type="button" className="px-4 py-1 text-xs font-medium text-white-90 rounded-lg" onClick={handleJournalClick}>
            Journal
          </button>
          <button type="button" className="px-4 py-1 text-xs font-medium text-white-90 rounded-lg" onClick={handleRolidClick}>
            Rolid
          </button>
        </div>
      </div>
    </div>
  );
}

export default Aside;

Bu örnekte, useState hook'u kullanılarak bgColor adında bir state tanımlanmış ve bu state, arka plan rengini tutmak için kullanılmıştır. Butonlara tıklama işlemleri sırasında setBgColor fonksiyonu ile bu state güncellenir ve böylece dinamik olarak arka plan rengi değiştirilmiş olur.