I’ve three sidebars that toggle open/shut and one foremost web page. Like this:
- the sidebars may be open or closed (the width percentages are within the picture)
- the principle web page width is relying on whether or not the sidebars are open or closed
- every of the sidebars may be independently open or closed
Right here code:
<html lang="en">
<head>
...
</head>
<physique className="flex flex-row justify-start">
<Sidebar-one />
<Sidebar-two />
<div className="flex-1 border-2 border-black">
<foremost>{youngsters}</foremost>
<Footer />
</div>
<Sidebar />
</physique>
</html>
The footer for instance has responsive design:
<div className="grid grid-cols-4">
<div className="col-span-4 md:col-span-2 lg:col-span-1">
Lorem ipsum
</div>
<div className="col-span-4 md:col-span-2 lg:col-span-1">
Lorem ipsum
</div>
<div className="col-span-4 md:col-span-2 lg:col-span-1">
Lorem ipsum
</div>
<div className="col-span-4 md:col-span-2 lg:col-span-1">
Lorem ipsum
</div>
</div>
So when the system display screen measurement is cellular measurement, then we get 1 column, for pill display screen measurement we get 2 columns (supplied all sidebars are closed), all good. However when all sidebars are open then the foremost display screen has the identical width as a cellular system display screen after which the responsive settings do NOT work. It appears it has to do with innerwidth what I’m after. I attempted with template literals and classnames however didnt get it to work (${window.innerwidth === [30%] ? '' : ''}, acquired caught to be trustworthy. Undecided if I’m heading in the right direction to unravel like that method?
