title: Collapsible sidebar with React Bootstrap
body: <p>I would like to build a page with a collapsible sidebar using React Bootstrap.
  Something similar to the <a href="https://getbootstrap.com/docs/4.5/examples/dashboard/" rel="nofollow noreferrer">Bootstrap Dashboard example</a>.
  The difference is that I don't want a Navbar on the top of the page. Just the Sidebar and the MainContentArea.</p>
  <p>With the code below, when the Sidebar collapses the toggle button is shown (screens smaller than medium size), but when I click on the button the Sidebar is not expanded.</p>
  <p>Any help is appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import Nav from 'react-bootstrap/Nav';
  import Icon from '../../assets/Icon';
  import { LinkContainer } from 'react-router-bootstrap';
  
  
  const Sidebar = () =&gt; (
      &lt;Nav id="sidebarMenu" className="col-md-3 col-lg-2 d-md-block bg-white h-100 sidebar pr-0 collapse"&gt;
        &lt;div className="flex-column mt-5 pl-3"&gt;
          &lt;img src={require('../../assets/logo-pcp.svg')} className="img-fluid" alt='Imagem do Logo'/&gt;
        &lt;/div&gt;
        &lt;Nav className="flex-column mt-5"&gt;
          &lt;LinkContainer exact to="/" activeClassName="active"&gt;
            &lt;Nav.Link className="mt-3"&gt;&lt;Icon icon="Criação" /&gt;  Criação&lt;/Nav.Link&gt;
          &lt;/LinkContainer&gt;
          &lt;LinkContainer to="/em-andamento" activeClassName="active"&gt;
            &lt;Nav.Link className="mt-3"&gt;&lt;Icon icon="Em andamento" /&gt;  Em andamento&lt;/Nav.Link&gt;
          &lt;/LinkContainer&gt;
          &lt;LinkContainer to="/em-andamento/por-coordenadoria" activeClassName="active"&gt;
            &lt;Nav.Link&gt;&lt;Icon icon="Sem ícone" /&gt;  Por Coordenadoria&lt;/Nav.Link&gt;
          &lt;/LinkContainer&gt;
          &lt;LinkContainer to="/em-andamento/percentual-execucao" activeClassName="active"&gt;
            &lt;Nav.Link&gt;&lt;Icon icon="Sem ícone" /&gt;  Percentual de execução&lt;/Nav.Link&gt;
          &lt;/LinkContainer&gt;
          &lt;LinkContainer to="/em-andamento/indicadores" activeClassName="active"&gt;
            &lt;Nav.Link&gt;&lt;Icon icon="Sem ícone" /&gt;  Indicadores&lt;/Nav.Link&gt;
          &lt;/LinkContainer&gt;
          &lt;LinkContainer to="/em-andamento/sem-atualizacao" activeClassName="active"&gt;
            &lt;Nav.Link&gt;&lt;Icon icon="Sem ícone" /&gt;  Sem atualização&lt;/Nav.Link&gt;
          &lt;/LinkContainer&gt;
          &lt;LinkContainer to="/conclusao" activeClassName="active"&gt;
            &lt;Nav.Link className="mt-3"&gt;&lt;Icon icon="Conclusão" /&gt;  Conclusão&lt;/Nav.Link&gt;
          &lt;/LinkContainer&gt;
        &lt;/Nav&gt;
      &lt;/Nav&gt;
  );
  
  export default Sidebar;
  
  
  import React from 'react';
  import { Nav, Navbar } from 'react-bootstrap';
  import Col from 'react-bootstrap/Col';
  import Row from 'react-bootstrap/Row';
  
  const MainArea = (props) =&gt; (
    &lt;Col className="col-md-9 col-lg-10 d-md-block bg-light pt-6 px-6"&gt;
      &lt;Row&gt;
        &lt;Nav className="navbar navbar-light flex-md-nowrap p-0"&gt;
          &lt;Navbar.Toggle aria-controls="sidebarMenu" className="d-md-none"/&gt;
        &lt;/Nav&gt;
        &lt;Col&gt;
          {props.children}
        &lt;/Col&gt;
      &lt;/Row&gt;
    &lt;/Col&gt;
  );
  
  export default MainArea;</code></pre>
  </div>
  </div>
  </p>