I am creating a website that uses Tailwind(3.0.2) and ReactJs (17.0.2).
I have a div that wraps a navbar I would like to render conditionally depending on screen size. This code works as the base case:
<div className= { (showIcon ? "left-0" : `-left-full`) + " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} >
For medium screens and larger (md: in tailwind), I have prepared this code which also works on its own :
<div className= {nav ? 'nav active' : 'nav'} > // (Nav and nav active are states defined elsewhere)
I want to combine both snippets but my code throws compiler errors. For example:
<div className= { (showIcon ? "left-0" : `-left-full`) + " fixed bottom-0 top-12 bg-gray-500 bg-opacity-60 w-10/12 text-white p-2 flex flex-col"} md:{nav ? 'nav active' : 'nav'} >
Line 40:151: Parsing error: Unexpected token (40:151)