Make a sidebar from react-bootstrap - html

Question

I am trying to create a Bootstrap sidebar like this picture here.
I have looked at all the code on react-bootstrap and Twitter Bootstrap and I am yet to find a how-to code this. Basically, if they are viewing on a desktop, I want the sidebar to be visible, otherwise hidden.
The sidebar should stay still while the content on the page scrolls up and down.

Answer 1

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

Answer 2

As of 2022 there is pure react-boostrap based component called react-boostrap-sidebar-menu . It is the cleanest solution so far and quite customizable.
https://www.npmjs.com/package/react-bootstrap-sidebar-menu
https://github.com/ivp-dev/react-bootstrap-sidebar-menu
import SidebarMenu from 'react-bootstrap-sidebar-menu';
<SidebarMenu>
<SidebarMenu.Header>
<SidebarMenu.Brand>
{/* Your brand icon */}
</SidebarMenu.Brand>
<SidebarMenu.Toggle />
</SidebarMenu.Header>
<SidebarMenu.Body>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Icon>
{/* Menu item icon */}
</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>
{/* Menu item title */}
</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
<SidebarMenu.Nav/>
<SidebarMenu.Sub>
<SidebarMenu.Sub.Toggle>
<SidebarMenu.Nav.Icon />
<SidebarMenu.Nav.Title>
{/* Submenu title */}
</SidebarMenu.Nav.Title>
</SidebarMenu.Sub.Toggle>
<SidebarMenu.Sub.Collapse>
<SidebarMenu.Nav>
<SidebarMenu.Nav.Link>
<SidebarMenu.Nav.Icon>
{/* Submenu item icon */}
</SidebarMenu.Nav.Icon>
<SidebarMenu.Nav.Title>
{/* Submenu item title */}
</SidebarMenu.Nav.Title>
</SidebarMenu.Nav.Link>
</SidebarMenu.Nav>
</SidebarMenu.Sub.Collapse>
</SidebarMenu.Sub>
<SidebarMenu.Body/>
</SidebarMenu>

Answer 3

One can now use a library, react-bootstrap-drawer, which provides a sidenav / drawer which was taken directly from the react-bootstrap documentation. Oddly, this is not a component provided by the library itself so one must use a third-party library:
import 'react-bootstrap-drawer/lib/style.css';
import React, { useState } from 'react';
import {
Col,
Collapse,
Container,
Row,
} from 'react-bootstrap';
import { Drawer, } from 'react-bootstrap-drawer';
const ApplicationDrawer = (props) => {
const [open, setOpen] = useState(false);
const handleToggle = () => setOpen(!open);
return (
<Drawer { ...props }>
<Drawer.Toggle onClick={ handleToggle } />
<Collapse in={ open }>
<Drawer.Overflow>
<Drawer.ToC>
<Drawer.Header href="/">Application</Drawer.Header>
<Drawer.Nav>
<Drawer.Item href="/settings">Settings</Drawer.Item>
</Drawer.Nav>
</Drawer.ToC>
</Drawer.Overflow>
</Collapse>
</Drawer>
);
};
const Application = (props) => {
return (
<Container fluid>
<Row className="flex-xl-nowrap">
<Col as={ ApplicationDrawer } xs={ 12 } md={ 3 } lg={ 2 } />
<Col xs={ 12 } md={ 9 } lg={ 10 }>{ props.children }</Col>
</Row>
</Container>
);
};
See: https://github.com/SimpleSigner/react-bootstrap-drawer

Answer 4

of course, you have to make the navbar yourself and the examples above are very valid, but cdbreact speeds up the process a lot faster. just add cdbreact using
npm I cdbreact
or
yarn add cdbreact
and then import CDBSidebar, CDBSidebarContent, CDBSidebarHeader, etc. with cdbreact, you don't need to bother about installing bootsrap in your react app.
cdbreact also comes with icons, and a lot more.
import React from 'react'
import {CDBSidebar,
CDBSidebarContent,
CDBSidebarHeader,
CDBSidebarFooter, CDBSidebarMenu,
CDBSidebarMenuItem} from 'cdbreact';
import {NavLink, Link} from 'react-router-dom';
import {} from 'react-router-dom';
const Sidebar=()=>{
return (
<div style={{display:'flex', height:'100%', overflow:'scroll initial'}}>
<CDBSidebar textColer="#fff" backgroundColor="rgb(37, 90, 122)">
<CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
<Link to="/dashboard">Dashboard</Link>
</CDBSidebarHeader>
<CDBSidebarContent className="sidebar-content">
<CDBSidebarMenu>
<NavLink exact to="/dashboard" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="columns">
Transfer
</CDBSidebarMenuItem>
</NavLink>
<NavLink exact to="/dashboard" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="columns">
Transfer
</CDBSidebarMenuItem>
</NavLink>
<NavLink exact to="/dashboard" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="columns">
Transfer
</CDBSidebarMenuItem>
</NavLink>
<NavLink exact to="/dashboard" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="columns">
Transfer
</CDBSidebarMenuItem>
</NavLink>
</CDBSidebarMenu>
</CDBSidebarContent>
<CDBSidebarFooter style={{textAlign:'center'}}>
<div className="sidebar-btn-wrapper" style={{ padding :'20px 5px' }}>
sidebar footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
</div>
)
}
export default Sidebar;
you can also follow the guide here https://dev.to/devwares/how-to-create-a-responsive-sidebar-in-react-using-bootstrap-and-contrast-5gi2 follow this link to see