I am in the process of creating a side navigation bar where I want to incorporate a left border on the active tab. How can I achieve this by utilizing state and passing a boolean value as a prop to the Child SideNavItem class, then updating it with each tab change?
Here is the code snippet for the parent SideNav component: Currently, I am using an if-else statement to determine the current location and pass it as a prop to the Child class. However, at the moment, both the Home and My Profile tabs are displaying the side border.
import { NavLink } from "react-router-dom";
import SideNavItems from "./SideNavItems";
import React, {useState} from 'react';
// Rest of the code remains as is...
const SideNav = (): JSX.Element => {
let [active, setActive] = useState(true);
let isActive = (currentPath: any, thisPath: any) => {
if (currentPath===thisPath) {
setActive(true)
} else {
setActive(false);
}
return active;
}
const resetState = () => {
setActive(false);
};
return (
<div className="sidebar mt-5">
// Rendered NavLinks and SideNavItems components
</div>
);
};
export default SideNav;
And here is the updated code for the Child Class:
import React from "react";
type Props = {
active: any;
text: string;
icon: any;
};
const SideNavItems: React.FC<Props> = ({active, icon, text }) => (
<div className={`flex items-center cursor-pointer hover:text-red-400 transition duration-100 ease-in-out ${active ? ` text-red-400 border-l-4 border-red-400` : ``}`}>
// Displaying icon and text elements with conditional CSS classes
</div>
);
export default SideNavItems;