Bootstrap 5 toggle sidebar menu

Question

How to make bootstrap 5 toogle side bar on desktop view?

Link

Added button and this code but no luck

$("#menu-toggle").click(function (e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

Answer 1

Check this update code it's working well.

$(document).ready(function () {
        $("#menu-toggle").click(function (e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });
    });

#wrapper {
            overflow-x: hidden;
        }

        #sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            width: 250px;
            padding-top: 3.5rem;
            background-color: #343a40;
            color: #fff;
            transition: width 0.3s ease;
        }

        #content {
            transition: margin-left 0.3s;
            padding: 15px;
            margin-left: 250px;
        }

        #wrapper.toggled #sidebar {
            margin-left: -250px;
        }

        #wrapper.toggled #content {
            margin-left: 0;
        }

        #sidebar .list-group-item {
            background-color: transparent;
            border: none;
            color: #fff;
        }

        #sidebar .list-group-item:hover {
            background-color: #495057;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    <div class="bg-dark" id="sidebar">
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action">Dashboard</a>
            <a href="#" class="list-group-item list-group-item-action">Profile</a>
            <a href="#" class="list-group-item list-group-item-action">Settings</a>
        </div>
    </div>
    <!-- sidebar -->

    <!-- Page Content -->
    <div id="content">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <button class="btn btn-dark" id="menu-toggle">Toggle Sidebar</button>
            </div>
        </nav>
        <div class="container-fluid">
            <h2>Content Area</h2>
            <p>This is the main content area.</p>
        </div>
    </div>
    <!-- Page Content -->
</div>