LeftSlidebarMenu

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li>
                    <a href="#">Dashboard</a>
                </li>
            </ul>
        </div>


				<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 vulputate. Mauris sed tortor viverra, porttitor tellus id, tristique lectus.

Mauris id eros quis justo euismod dictum eu rutrum risus. Pellentesque ultrices quam et ipsum commodo, at finibus lorem tincidunt. Integer luctus, lectus eget mollis sodales, lacus justo aliquet turpis, vel mollis lectus dui in est. Etiam eget mauris vel nisi maximus dictum. Donec nec vulputate nulla. Integer pharetra erat nulla, ac accumsan ipsum tincidunt sed. Sed aliquam velit tellus, et ultrices risus pretium at. Vestibulum blandit nulla felis, sed suscipit diam sodales id. Integer vehicula nibh egestas, tristique dolor ornare, porta leo. Duis a lacus...

CSS

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
		
}

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

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
		border: 1px solid blue;
}

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

#page-content-wrapper {
    width: calc(100% - 25px);
    padding: 15px;
		border: 1px solid red;
}

#wrapper.toggled #page-content-wrapper {
	  width: calc(100% - 290px);
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

/*@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
   ...

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);    
});