Ok so for people who want to make a sidebar sadly the news is you gotta make it all yourself.
What I have done is the following.
- See the example at https://github.com/StartBootstrap/startbootstrap-simple-sidebar
- Create sidebar.js somewhere in your app.
import React from "react"; import {Nav} from "react-bootstrap"; import { withRouter } from "react-router"; import '../pages/style/Dashboard.css' const Side = props => { return ( <> <Nav className="col-md-12 d-none d-md-block bg-light sidebar" activeKey="/home" onSelect={selectedKey => alert(`selected ${selectedKey}`)} > <div className="sidebar-sticky"></div> <Nav.Item> <Nav.Link href="/home">Active</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-1">Link</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-2">Link</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="disabled" disabled> Disabled </Nav.Link> </Nav.Item> </Nav> </> ); }; const Sidebar = withRouter(Side); export default Sidebar
- My Dashboard.css has the following in it.
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; min-height: 100vh !important; z-index: 100; padding: 48px 0 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } #sidebar-wrapper{ min-height: 100vh !important; width: 100vw; margin-left: -1rem; -webkit-transition: margin .25s ease-out; -moz-transition: margin .25s ease-out; -o-transition: margin .25s ease-out; transition: margin .25s ease-out; } #sidebar-wrapper .sidebar-heading { padding: 0.875rem 1.25rem; font-size: 1.2rem; } #page-content-wrapper { min-width: 0; width: 100%; }
Then final step
In the file you want it to be show in do the following
import React from "react";
import {Container, Row, Col, Card, Form, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import Sidebar from "../moduls/sidebar.js";
import './style/Dashboard.css'
const Dash = props => {
return (
<>
<Container fluid>
<Row>
<Col xs={2} id="sidebar-wrapper">
<Sidebar />
</Col>
<Col xs={10} id="page-content-wrapper">
this is a test
</Col>
</Row>
</Container>
</>
);
};
const Dashboard = withRouter(Dash);
export default Dashboard