What could be the reason my side-menu not collapsing while reducing the tab width or when checking view in Phone or tablet?

Question

This is my PC layout which can be seens as:

But while reducing the window width to check if its mobile friendly and responsive all the side menu <ul> get scaled up together. I want to hide them and introduce a menu button instead of that on which clicking the side-menu options should appear then only. Here is the screenshot for that:

The content looks fine as mobile friendly and responsive as below you can see it is aligned perfectly one after one the problem is with the side menu.

Here is my side-menu HTML code:

<div id="sidebar">
    <header>
      <a href="/"><img src="/images/grumpy-removebg-preview-removebg-preview.png" width="50" height="25"> grumpytext</a>
    </header>
    <ul class="nav navbar-expand-md">
      <li>
        <a href="#">
          <i class="zmdi zmdi-view-dashboard"></i>
        </a>
      </li>
      <li>
        <a href="/profile">
          <i class="zmdi zmdi-view-dashboard"></i> Dashboard
        </a>
      </li>
      <li id="addtasks">
        <a href="/addtasks">
          <i class="zmdi zmdi-link"></i>➕ Add Task
        </a>
      </li>
      <li>
        <a href="/status" id="status">
          <i class="zmdi zmdi-widgets"></i> Status
        </a>
      </li>
      <li  style="height : 120px">
        <a href="/download" id="download">
          <i class="zmdi zmdi-calendar"></i> Download
        </a>
      </li>
      <li>
        <a href="#">
          <i class="zmdi zmdi-calendar"></i>
        </a>
      </li>
      <li>
      <a href="/storageClient">
        <i class="zmdi zmdi-info-outline"></i> Storage
      </a>
    </li>
      <li>
      <a href="/settingsClients">
        <i class="zmdi zmdi-info-outline"></i>⚙ Settings
      </a>
    </li>
    <li>
      <a href="/logout">
        <i class="zmdi zmdi-info-outline"></i> Logout
      </a>
    </li>
    <li>
      <a href="#">
        <div style="font-size:12px">COPYRIGHT © 2018 - 21 · GRUMPYTEXT.COM,
         ALL RIGHTS RESERVED.</div>
      </a>
    </li>
    </ul>
  </div>

Here is my CSS code:

body {
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

@media screen and (max-width: 700px) {
  #sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  #sidebar a {float: left;}
  content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  #sidebar a {
    text-align: center;
    float: none;
  }
}
.fWyFhS {
    display: inline-flex;
    box-shadow: rgb(0, 135, 90) 0px 0px 0px 0px;
    border-radius: 3px;
    animation: 0s ease 0s 1 normal none running none;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.form-article {
  max-width: 1000px;
  padding: 50px;
  margin: 0 auto;
}



#sidebar {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 250px;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #2a2b3d;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#sidebar header {
  background-color: #2a2b3d;
  font-size: 20px;
  line-height: 52px;
  text-align: center;
}

#sidebar header a {
  color: #fff;
  display: block;
  text-decoration: none;
}

#sidebar header a:hover {
  color: #fff;
}

#sidebar .nav{

}

#sidebar .nav a{
  background: none;
  border-bottom: 1px solid #455A64;
  color: #fff;
  font-size: 14px;
  padding: 16px 24px;
}

#sidebar .nav a:hover{
  background: none;
  color: #4660CC;
}

#sidebar .nav a i{
  margin-right: 16px;
}