This example demonstrates a static sidebar with navigation. The example also uses common page layouts and content, because sidebar is often impacted by the entire page layout. The sidebar will be hidden on smaller devices.

Step 1. Create css file

In your react app create a css file /src/side_bar.css

Paste code snippet below in the side_bar.css file:

#sidebar-wrapper {
    background-color:#d6e0ef;
    padding-top: 0.5rem;
    font-size:14px;
    flex: 1 0 auto;
}

This wrapper will provide styling for the nav sidebar list.

Step 2. Paste the side bar styling code in /src/App.js 

            <div className="d-flex min-vh-100">
            <div id="sidebar" className="d-none d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
              <div id="sidebar-wrapper" className="min-vh-100">
                <ul className="list-unstyled components">
                    <li className="navbar-item">
                      <Link to="/" className="nav-link">Home</Link>
                    </li>
                    <li className="navbar-item">
                      <Link to="/about" className="nav-link">About</Link>
                    </li>
                    <li className="navbar-item">
                      <Link to="/term" className="nav-link">Terms</Link>
                    </li>
                </ul>
              </div>
            </div>
            <br/>
            <Route path="/" exact component={Home} />
            <Route path="/about" component={About} />
            <Route path="/term" component={Terms} />
            </div>

If you notice, the sidebar is wrapped with the route components with flex styling in order to place the component contents and the sidebar side by side.

Here is the full code within App.js file:

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./side_bar.css";
import Home from "./components/Home.component";
import About from "./components/About.component";
import Terms from "./components/Terms.component";

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
        <Router>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
              <a className="navbar-brand" href="https://wecode101.com/" rel="noopener noreferrer" target="_blank">
                <img src={logo} width="30" height="30" alt="wecode101.com/" />
              </a>
              <Link to="/" className="navbar-brand">Home</Link> {/*Clickable links related to the Router*/}
              <div className="collpase navbar-collapse">
                <ul className="navbar-nav mr-auto">
                  <li className="navbar-item">
                    <Link to="/about" className="nav-link">About</Link>
                  </li>
                  <li className="navbar-item">
                    <Link to="/term" className="nav-link">Terms</Link>
                  </li>
                </ul>
              </div>
            </nav>
            <div className="d-flex min-vh-100">
              <div id="sidebar-wrapper" className="min-vh-100 d-none d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
                {/* <div className="sidebar-header">User Settings</div> */}
                <ul className="list-unstyled components">
                    <li className="navbar-item">
                      <Link to="/" className="nav-link">Home</Link>
                    </li>
                    <li className="navbar-item">
                      <Link to="/about" className="nav-link">About</Link>
                    </li>
                    <li className="navbar-item">
                      <Link to="/term" className="nav-link">Terms</Link>
                    </li>
                </ul>
              </div>
              <br/>
              <Route path="/" exact component={Home} />{/*The Router enables the navigation among views of various components*/}
              <Route path="/about" component={About} />
              <Route path="/term" component={Terms} />
            </div>
        </Router>
    );
  }
}

export default App;

I hope this will help you on your project if your using Boostrap 5.