Попутный ветер с тернарным оператором — активный и неактивный класс ⇐ CSS

[Anonymous]

Я работаю над проектом с React и использую Tailwind в качестве CSS.
У меня есть боковая панель, которая не должна присутствовать на целевой странице, когда пользователь попадает только при нажатии бургерное меню. На данный момент это присутствует, когда пользователь заходит на сайт, и выглядит немного забавно. Я думаю, это может быть связано с тем, что попутный ветер не распознает активныеклассы в тернарных операторах.
Мой код:

Код: Выделить всё

import React, {useState} from 'react';
import {Link} from 'react-router-dom';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import {SidebarData} from './SidebarData';

function Navbar() {

const [sidebar,setSidebar] = useState(false)

const showSidebar =() => setSidebar(!sidebar)

return(


[*]




[list]





{SidebarData.map((item,index) =>{
return (
[*]

{item.icon}
{item.title}


)
})}
[/list]


);
}

Как это выглядит:


Как это должно выглядеть на самом деле, когда вы приземлитесь:


После нажатия на бургер-меню:


Это изображение черного цвета, но вы все поняли. Это совсем другое.
Вся помощь приветствуется, спасибо!

Подробнее здесь: https://stackoverflow.com/questions/646 ... tive-class