Currently, I am in the process of developing an application with Next.js and incorporating multiple root layouts from the official documentation at https://nextjs.org/docs/app/building-your-application/routing/creating-multiple-root-layouts. This was necessary for me to style each route uniquely.
However, upon implementing these multiple root layouts, I came across a problem where the active link's color is not changing as expected, despite it working perfectly fine before the changes were made.
Admittedly, I am still a beginner, and finding comprehensive information on the latest versions of Next.js can be quite challenging.
Below is the part of the code where I handle the active link color:
import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
const Sidebar = () => {
const [isMobileMenuVisible, setIsMobileMenuVisible] = useState(false);
const pathname = usePathname();
const isActive = (href) => {
if (pathname.startsWith(href)) {
return "text-[#909090]";
}
return "";
};
const toggleMobileMenu = () => {
setIsMobileMenuVisible(!isMobileMenuVisible);
};
return (
DACHI-GIORGI GARUCHAVA
{/* Mobile dropdown menu */}
<button
className="text-[#484848] no-underline cursor-pointer font-MPlus1 leading-6 font-thin tracking-wider mb-2"
onClick={toggleMobileMenu}
Menu
{isMobileMenuVisible && (
The Witness
{/* Add other links here */}
)}
{/* Desktop link list */}
Invasive Modification
{/* Add other links here */}
);
};
export default Sidebar;
The isActive function examines the pathname to determine the activity of the link and assigns a specific text color accordingly. This functionality worked flawlessly until I implemented multiple root layouts, which are essential for customizing individual routes.
I would greatly appreciate any assistance or guidance in resolving this issue.