title: Vertical side nav bar - Angular 4 and Bootstrap 3
body: <p>I have installed bootstrap 3 in my angular 4 project using the npm installer. I have a basic site done up and am trying to get an dynamic sideNav bar that will toggle in and out.</p>
  
  <p>I have seen some examples online however they do not seem to work whether it be a newer version of bootstrap or compatibility issues with angular.</p>
  
  <p>Does anyone have any recommendations for a navigation bar that I could use in this instance?</p>
  
  <p>The HTML in my <code>app.component.html</code>:</p>
  
  <pre><code>&lt;!-- Sidebar --&gt;
  &lt;script src="src/Javascript/sidebar.js"&gt;&lt;/script&gt;
  &lt;nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation"&gt;
      &lt;ul class="nav sidebar-nav"&gt;
          &lt;li class="sidebar-brand"&gt;
              &lt;a href="#"&gt;
                  Brand
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Events&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Team&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                  Works &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class="dropdown-menu" role="menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Services&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>