Why is my sidebar fixed on the left of the screen overlapping with the main content? I want the main content to be displayed next to the navbar and scroll up and down while keeping the nav bar in place, but no matter what styling I apply, it doesn't work. How can I make the main content div appear beside the navbar?
App.js
return (
<div>
{
authUser ? <>
<BrowserRouter>
<Sidebar>
<Routes>
<Route path="/" element={<Dashboard/>} />
<Route path="/dashboard" element={<Dashboard/>} />
<Route path="/analytics" element={<Analytics/>} />
<Route path="/userbase" element={<Userbase/>} />
<Route path="/about" element={<About/>} />
</Routes>
</Sidebar>
</BrowserRouter>
</>
:
<div className='landing-page'>
<SignIn />
</div>
}
</div>
);
}
App.css
.landing-page {
width: 100%;
border: solid red 1px;
}
.btn-signin {
width: 100%;
}
.sign-element {
width: 1000px;
}
Sidebar.js
return (
<div className="container">
<div style={{width: isOpen ? "250px" : "50px"}} className="sidebar">
<div className="top_section">
<h1 style={{display: isOpen ? "block" : "none"}} className="logo">Changed</h1>
<div style={{marginLeft: isOpen ? "50px" : "0px"}} className="bars">
<FaBars onClick={toggle}/>
</div>
</div>
{
menuItem.map((item, index)=>(
<NavLink to={item.path} key={index} className="link" activeclassname="active">
<div className="icon">{item.icon}</div>
<div style={{display: isOpen ? "block" : "none"}} className="link_text">{item.name}</div>
</NavLink>
))
}
<button onClick={userSignOut}>Sign Out</button>
</div>
<main className="mainContent">{children}</main>
</div>
);
};
Sidebar.css
.link {
display: flex;
color: #fff;
padding: 10px 15px;
gap: 15px;
font-size: 20px;
align-items: center;
text-decoration: none;
}
.active {
color: black;
}
.mainContent {
}
.container {
width: 100%;
float: left;
}
.sidebar {
background: #000;
color: #fff;
height: 100vh;
width: 200px;
transition: all 0.5s;
position: fixed;
z-index: 1;
float: left;
}
.top_section {
display: flex;
align-items: center;
padding: 20px 15px;
}
.logo {
font-size: 30px;
}
.bars {
display: flex;
font-size: 25px;
margin-left: 50px;
}
.link {
display: flex;
color: #fff;
padding: 10px 15px;
gap: 15px;
}
.link:hover {
background-color: orange;
color: #000;
transition: all 0.5s;
}
.active {
background: orange;
color: black;
}
.icon, .link_text {
font-size: 20px;
}