I implemented a sidebar using Bootstrap within a React application. Below is the code snippet:
import React from 'react';
import './style_sidebar.css';
export default class Sidebar2 extends React.Component {
render() {
return (
<div>
<ul className="nav flex-column sidebar bg-dark">
<h3 className="text-warning mt-3 ml-2">Bootstrap Sidebar</h3>
<i className="fa fa-user-circle text-white mt-3 ml-5 pl-4 icon-user" style={{'fontSize': '5em'}}></i>
<h4 className="text-warning ml-3 mt-5">Components</h4>
<li className="nav-item">
<a className="nav-link text-light" href="#a"><i className="fa fa-table fa-lg"></i> Table<hr className="bg-warning" /></a>
</li>
<li className="nav-item">
<a className="nav-link text-light" href="#b"><i className="fa fa-bar-chart fa-lg"></i> Chart<hr className="bg-warning" /></a>
</li>
...
</ul>
</div>
);
}
}
The CSS part for the sidebar:
.sidebar {
width: max-content;
height: 100vh;
padding: 10px;
position: fixed;
z-index: -1;
}
.user-icon {
border: 1px solid;
border-radius: 40px;
}
@media only screen and (max-width: 600px) {
.sidebar {
width: 100%;
height: max-content;
}
h3 {
align-self: center;
}
.icon-user {
align-self: center;
margin-right: 100px;
}
}
When adding more items to ul, they appear at the top of the page instead of creating a vertical scrollbar. Trying to add overflow-y: scroll resulted in a horizontal scrollbar. Any suggestions on how to fix this?
Struggling to make the sidebar responsive, even with media queries. How can I achieve responsiveness given my limited experience with bootstrap?
Additionally, looking to implement a toggle button for the sidebar that collapses when the screen size is small. Seeking advice on how to accomplish this using the latest version of Bootstrap.