title: Collapsing navbar using bootstrap in react-typescript
body: <p>I am trying to create a collapsible navbar using bootstrap in my react-typescript project (see my code below).</p>
  <pre><code>  return (
      &lt;nav className=&quot;navbar navbar-expand-md navbar-dark fixed-top bg-dark&quot;&gt;
        &lt;div className=&quot;container-fluid&quot;&gt;
          &lt;img className=&quot;mb-0&quot; src={logoNav} alt=&quot;&quot; width=&quot;200&quot; height=&quot;50&quot; /&gt;
          &lt;button className=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span className=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div className=&quot;collapse navbar-collapse&quot;&gt;
            &lt;ul className=&quot;navbar-nav me-auto mb-2 mb-md-0&quot;&gt;
              &lt;li className=&quot;nav-item&quot;&gt;
                &lt;a className=&quot;nav-link active&quot; aria-current=&quot;location&quot; href=&quot;/home&quot;&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li className=&quot;nav-item&quot;&gt;
                &lt;a className=&quot;nav-link active&quot; href=&quot;/consultAndReserve&quot;&gt;Consulter et réserver&lt;/a&gt;
              &lt;/li&gt;
              &lt;li className=&quot;nav-item&quot;&gt;
                &lt;a className=&quot;nav-link active&quot; href=&quot;/myReservations&quot;&gt;Mes réservations&lt;/a&gt;
              &lt;/li&gt;
              &lt;li className=&quot;nav-item&quot;&gt;
                &lt;a className=&quot;nav-link active&quot; href=&quot;/profile&quot;&gt;Profile&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;button className=&quot; d-flex btn btn-outline-danger&quot; type=&quot;submit&quot; onClick={logOutAndReturnToLoginPage}&gt;Se déconnecter&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    )
  </code></pre>
  <p>I am using the boostrap navbar example code (see below for example) and am able to get the navbar to render correctly, however when I click the navbar-toggler icon nothing happens because I don't have the following script included.</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-md navbar-dark fixed-top bg-dark&quot;&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Fixed navbar&lt;/a&gt;
      &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarCollapse&quot;&gt;
        &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-md-0&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link disabled&quot;&gt;Disabled&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  
      &lt;script src=&quot;../assets/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>How would one implement such script using react-typescript (is it even possible)?</p>