<body id="flow">

  <div class="wrapper">
    <nav id="sidebar">
      <div style="padding: 15px;">
        <button type="button" id="sidebarCollapseMob" class="btn navbar-btn button">
             <i class="fas fa-align-left"></i>
             <span>Menu</span>
           </button>
      </div>
      <div class="sidebar-header text-center">
        <a href="">
            <img class="logo-yn mt-2" src="https://yariknashivan.pythonanywhere.com/static/images/logo.png" alt="YN">
            </a>
      </div>
      <ul class="list-unstyled components">
        <li class="active">
          <a class="nav-link" href="">About</a>
        </li>
        <li>
          <a class="nav-link active" href="">Posts</a>
        </li>
        <li>
          <a class="nav-link" href="">Portfolio</a>
        </li>
        <li>
          <a class="nav-link" href="">Editors</a>
        </li>
        <li>
          <a class="nav-link" href="">Contact</a>
        </li>
      </ul>
      <div class="container components footer-links-div">
        <a class="footer-links" href="">Changelog</a>&nbsp; <a style="color: grey;">&</a> &nbsp;<a class="footer-links" href="">Terms and Conditions</a>
      </div>
    </nav>
  </div>

  <div id="content">
    <nav class="navbar navbar-light bg-light sticky-top">
      <button type="button" id="sidebarCollapse" class="btn navbar-btn">
       <i class="fas fa-align-left"></i>
       <span>Menu</span>
     </button>

      <form class="search-form" action="">
        <input type="search" class="form-control-search form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search the blog" name="search">
      </form>

      <form action="" method="">
        <div class="btn-group" role="group" aria-label="Choose Language">
          <input type="submit" name="language" value="en" class="btn btn-lang active">
          <input type="submit" name="language" value="ru" class="btn btn-lang">
        </div>
      </form>

    </nav>
  </div>
</body>

.logo-yn {
  width: 50px;
  margin: 0 10px 0 10px;
}

a { 
  text-decoration: none;
}

body {
  background-color:#fff;
}



    p {
      font-size: 1.1em;
      font-weight: 300;
    }

    .navbar {
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 20px;
      /* box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); */
      border-bottom: 1px solid #E6ECF0;
    }

    .navbar-btn {
      box-shadow: none;
      outline: none !important;
      border: none;
    }

    #sidebar {
      width: 250px;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 999;
      background: #f8f9fa;
      color: #fff !important;
      transition: all 0.3s;
      border-right: 1px solid #E6ECF0;
    }


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


    #sidebar .sidebar-header {
      /*padding: 20px;*/
      background: #f8f9fa;
      margin-bottom: 20px;
    }

    #sidebar ul.components {
      padding: 20px 0;
      /* border-bottom: 1px solid #242424; */
    }

    #sidebar ul p {
      color: #fff;
      padding: 10px;
    }

    #sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
      color: black;
    }

   #sidebar ul li a:hover {
    color: #242424;
    background: #E6ECF0;
    }

    a {
        color: #505050;
    }

    a:hover {
        color: #505050;
    }

    #sidebar ul li.active>a,
    a[aria-expanded="true"] {
      color: #000;
      background: #E6ECF0;
    }

    #content {
      width: calc(100% - 250px);
      min-height: 100vh;
      transition: all 0.3s;
      position: absolute;
      top: 0;
      right: 0;
    }

    #content.active {
      width: 100%;
    }


    @media (max-width: 640px) {
      #content.active:not(button) {
        opacity: 0.1;
      }
    }

    @media (max-width: 640px) {
      #sidebar {
        margin-left: -100%;
        width: 100%;
      }
      #sidebar.active {
        margin-left: 0;
      }
      #content {
        width: 100%;
      }
      #content.active {
        width: calc(100% - 250px);
      }
      #sidebarCollapse span {
        display: none;
      }
      #sidebarCollapseMob span {
        display: none;
      }
      #sidebarCollapseMob {
        background-color: #7726E5;
        color: white;
      }
    }

#sidebarCollapse {
  background-color: #7726E5;
  color: white;
}

@media (min-width: 641px) {
  #sidebarCollapseMob {
    display: none;
  }
}




.form-control-search {
  width: 100%;
  margin-right: 3px;
  margin-left: 2px;
  text-align: center;
}

.form-control-search:focus { text-align: left; }

@media (max-width: 900px) {
  .form-control-search {
    margin-right: 3px;
    margin-left: 2px;
  }
}

.btn-lang {
  text-transform: uppercase;
  background-color: #7726E5;
  color: #fff;
}

.btn-lang:hover {
    text-transform: uppercase;
    background-color: #7726E5;
    color: #fff;
}

.btn-lang:not(:disabled):not(.disabled).active, .btn-lang:not(:disabled):not(.disabled):active, .show>.btn-lang.dropdown-toggle {
    color: #fff!important;
    background-color: #5E1EB8;
    border-color: #5E1EB8;
}


.btn.btn-lang.active[disabled] {
    background-color: #5D1EB5!important;
    opacity: 1!important;
}



.components {
  list-style: none;
  margin: 0px auto;
  padding: 10px;
  display: block;
  max-width: 780px;
  text-align: center;
  vertical-align: bottom;
}


.footer-links {
    font-size: 1em;
    color: black;
    text-decoration: none;
}

.footer-links-div {
  position: absolute;
bottom: 35px;
}

.footer-links:hover {
    color: black;
}

.search-form {
  width: 25%
}
    $(document).ready(function() {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar, #content').toggleClass('active');
        $('#flow').toggleClass('overflow-body');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
      });
    });

    $(document).ready(function() {
      $('#sidebarCollapseMob').on('click', function() {
        $('#sidebar, #content').toggleClass('active');
        $('#flow').toggleClass('overflow-body');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
      });
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.