在自定义导航栏中构建可折叠导航栏

Question

我有一个以下小的自定义导航栏（意思是我没有任何导航栏引导类，如代码所示），我的问题是，有什么方法可以在其中制作左侧可折叠导航栏（如图所示）在下面的线框中）代码片段如下：

<div class="topnav" role="navigation">
  <a class="active" href="#" > Home </a>
  <a href="#"> About </a>
  <a href="#"> Contact </a>
  <form action="#">
    <div class="search-container">
  <input type="text" name="" placeholder="Search..">
  <button type="submit"><i class="fa fa-search"> </i></button>
</form>
</div>
</div>
<br> <br>

wireframe