I have been tasked with enhancing an already extensive React project by adding a 400px wide side panel that is only visible under certain conditions.
Depending on the screen size, the side panel should either appear in the empty space to the right of the main content (at its maximum width) or alongside the main content (reducing the content width by 400px). The main content should adapt responsively in both scenarios. For example, if the side panel is displayed, a three-column layout should switch to a one-column layout "400px earlier".
The project utilizes Bootstrap 4.6 and its media queries.
My initial approach was to replace the media queries for the main content with container queries. While this find and replace process was straightforward and easily automated, it functioned well in Chromium browsers but not in Firefox (despite using a polyfill like this, likely due to conflict with the Bootstrap classes named as container, see here).
This led me to the following solution:
Here is a basic snippet of HTML:
<body>
<div className=`site-wrapper ${ showPanel ? '' : 'full-width'}`>
<div class="container">
<!--- main content --->
...
</div>
{ showPanel && (
<div class="side-panel">
...
</div>
)}
<div>
</body>
Next, I need to convert all media queries similar to the one below:
@media (min-width: 992px) {
.container{
max-width: 960px;
}
}
into the following format:
@media (min-width: calc(992px + 400px)) {
.container {
max-width: 960px;
}
}
@media (min-width: 992px) {
.site-wrapper.full-width .container{
max-width: 960px;
}
}
In essence, this involves:
1.) Duplicating each media query
2.) Replacing the <breakpoint> in the first copy with calc(<breakpoint> + 400px)
3.) Adding .site-wrapper.full-width to each rule in the second copy (which can be facilitated with postcss-nested)
While effective, this method is laborious and error-prone. I have been unable to automate the "conversion" process entirely (possibly achievable with tools like find-matching-bracket). However, overall, the solution feels more like a hack rather than a refined approach.
Is there a more efficient way to achieve this? Perhaps a reliable method to automate the CSS transformation task?