Usage
<main className="jun-content">Container
Use container (built-in Tailwind class) to limit the max width of the content.
<main className="jun-content container"></main>Secondary sidebar
To render a sidebar within the Content, use jun-insetSidebar.
The inset sidebar must be either first child (left) or last child (right) of the Content to function properly.
<div className="jun-content">
<div className="jun-insetSidebar">
<div className="jun-insetContent">...</div>
</div>
<div>...main content</div>
{/* The inset sidebar could be placed here too */}
</div>Important!
The sibling of the inset sidebar should be a valid DOM element, not a string or undefined. The code below won't work:
// ❌ the sibling of inset sidebar should be an element, e.g. <div>
<div className="jun-content">
<div className="jun-insetSidebar">
<div className="jun-insetContent">...</div>
</div>
main content
</div>
// ❌ When show is false, the element will disappear. The sibling must always exist.
<div className="jun-content">
<div className="jun-insetSidebar">
<div className="jun-insetContent">...</div>
</div>
{show && (
<div>...</div>
)}
</div>