试图添加按钮来折叠侧边栏，我的代码出了什么问题？

Question

我正在使用Bootstrap 4并尝试在我的页面上添加一个按钮（汉堡包样式），以便在屏幕较小时折叠侧边栏。

这是我的代码：

<div class="sidebar-wrapper">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>        
    <!-- Sidebar Holder -->
    <nav class="collapse" id="sidebar">

      <div id="profile">
      <img src="Navbar/Profile.png" width="100" height="100" alt="Profile">
      </div>

        <div class="sidebar-header">
          <h4>M.Rose Thomas</h4>

        </div>

        <ul class="list-unstyled components">

            <li class="active">
                <a href="index.html">My Artwork</a>
            </li>
            <br>
            <li>
                <a href="AboutMe.html">About Me</a>
            </li>
            <li>
                <a href="Contact.html">Contact</a>
            </li>
        </ul>
    </nav>
    </div>

感谢任何帮助，谢谢！

JSFiddle HTML and CSS