Simple Sidebar

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="d-flex" id="wrapper">
        <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <div class="sidebar-heading">Start Bootstrap </div>
      <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">Shortcuts</a>
        <a href="#" class="list-group-item list-group-item-action">Overview</a>
        <a href="#" class="list-group-item list-group-item-action">Events</a>
        <a href="#" class="list-group-item list-group-item-action">Profile</a>
        <a href="#" class="list-group-item list-group-item-action">Status</a>
      </div>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
		<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">toggle</a>
       				<div style="border: 1px solid blue">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel magna in felis consequat dictum. Ut rutrum mauris nec sem dignissim, at suscipit massa tincidunt. Vivamus sollicitudin, neque in gravida malesuada, enim lorem viverra felis, a dapibus nunc libero at dui. Donec ex arcu, pharetra in viverra sit amet, accumsan at enim. Nulla lectus mauris, lobortis nec mauris varius, pharetra ullamcorper mi. In nibh urna, mattis ut nibh luctus, tincidunt posuere ipsum. Aenean nec pellentesque justo. Mauris vel venenatis sapien. Donec tortor diam, maximus sed justo nec, feugiat maximus metus. Nunc nec tempor elit.

Aliquam aliquet massa id porttitor feugiat. Nam rhoncus luctus eleifend. Phasellus imperdiet mattis lacus a pulvinar. In auctor ligula a ex lobortis, eget ullamcorper est venenatis. Vivamus consectetur et elit eu euismod. Aenean tristique velit sed faucibus...

CSS

/*!
 * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template/simple-sidebar)
 * Copyright 2013-2020 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
 */

 #wrapper {
    overflow-x: hidden;
 }

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -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;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

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

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}

JavaScript

$("#menu-toggle").click(function(e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        }).click();
				
				
				var hideMenuFucntion = function(){
      if (window.matchMedia('(max-width: 767px)').matches) {
        var menu = document.getElementById('wrapper');
				if (!menu.classList.contains("toggled")) {  
				menu.classList.toggle("toggled");
    } 
    } 
    };
				
				$(document).ready(function(){
    $(window).on("resize", hideMenuFucntion);    
});