In order to achieve a 250px col-2 sidebar with a col-10 main body that collapses into a top navbar and main content beneath it, my goal is set. However, I am facing an issue where the main content body goes underneath the sidebar when the screen size changes. How can I fix this problem? Currently using bootstrap v5.3.0-alpha1 in combination with react.
import React, { useState, useEffect } from "react";
export function Holders() {
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
useEffect(() => {
const handleResize = () => {
setIsSidebarCollapsed(window.innerWidth < 1026);
};
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
<div className="container-fluid">
<div className="row">
{isSidebarCollapsed ? (
<>
<nav className="navbar navbar-light bg-light">
<span className="navbar-brand mb-0 h1">Collapsed Sidebar</span>
</nav>
<div className="col-12">
main content with top navbar here
</div>
</>
) : (
<>
<div className="col-md-2" style={{ width: 250, height: '100vh', backgroundColor: 'yellow', overflowY: 'auto' }}>
sidebar content here
</div>
<div className="col-md-10">
<h1>Main Content</h1>
main content with sidebar here
</div>
</>
)}
</div>
</div>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>