Is there a way to change the style based on the route using react router? I want the description route to display in orange when the user is in the description route, white when in the teacher-add-course route, and green for all other routes. However, the last condition is not rendering properly when on other routes. I have tried setting these conditions with the ternary operator but it's not working as expected. Can anyone provide assistance?
I attempted to use the ternary operator for the conditions and it worked correctly for the teachers-add-course and description routes. However, when navigating to other routes like requirements, the condition does not apply as intended.
import React from 'react';
import { FaBookOpen } from 'react-icons/fa';
import { Link, useLocation } from 'react-router-dom';
import '../../asset/css/Teachers-overview/TeachersDashboardSidebar.css'
const TeachersDashboardSidebar = () => {
let location = useLocation()
console.log(location.pathname);
return (
<div className='sidebar-container'>
<div className='sidebar-content-wrapper'>
<div className='overview-wrapper'>
<div className='d-flex flex-column align-items-center'>
<div className= {`${location.pathname=== '/teacher-add-course'? 'progress-book-icon bg-orange':'progress-book-icon bg-complete'}`}>
<FaBookOpen className="text-white " />
</div>
<div className={`${location.pathname==='/teacher-add-course'? 'candle-basic':'candle-success'}`}></div>
</div>
<Link to="/teacher-add-course"><span className="text-semilight font-weight-bold mt-2 ml-3">Overview</span></Link>
</div>
<div className='bold d-flex'>
<div className='d-flex flex-column align-items-center'>
<div className={`${location.pathname=== '/teacher-add-course/description'?'bg-orange':'teacher-add-course'?'progress-book-icon':'bg-complete'} `}>
<FaBookOpen className="text-white " />
</div>
<div className={`${location.pathname==='/teacher-add-course/description'? 'candle-basic':'candle-success'}`}></div>
</div>
<Link to="/teacher-add-course/description"><span className="text-semilight font-weight-bold mt-2 ml-3">Description</span></Link>
</div>
<div className='text-warning bold d-flex'>
<div className='d-flex flex-column align-items-center'>
<div className={`${location.pathname=== '/teacher-add-course/requirements'? 'progress-book-icon bg-orange': '/teacher-add-course/gallery'? 'progress-book-icon bg-complete':'progress-book-icon'}`}>
<FaBookOpen className="text-white " />
</div>
<div className={`${location.pathname==='/teacher-add-course/requirements'? 'candle-basic':'candle-success'}`}></div>
</div>
<Link to="/teacher-add-course/requirements"><span className="text-semilight font-weight-bold mt-2 ml-3">Requirements</span></Link>
</div>
</div>
</div>
);
};
export default TeachersDashboardSidebar;