Bootstrap 4 avec barre latérale pliable

Je souhaite créer une barre de tâches escamotable que l'utilisateur peut activer ou désactiver. Après beaucoup de lecture, j'y suis parvenu, mais aujourd'hui, c'est très laid. Voici le code:

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 collapse show" id="sidebar">
      <h2>I'm a sidebar</h2>      
    </nav>
    <main class="col-md-9">
      <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar"></i>
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

Le problème, c'est, l'effondrement est à la verticale, puis une fois de l'effondrement, le contenu ne va pas toute la largeur!

Vous pouvez utiliser Ionique-cadre. Il a la navigation et de nombreux autres composants intégrés.

OriginalL'auteur J86 | 2017-10-04

  1. 4

    Il est un moyen facile, vous n'avez pas besoin d'utiliser jQuery. Regardez cet exemple:

    <div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 collapse show" id="sidebar">
      <h2>I'm a sidebar</h2>      
    </nav>
    <main class="col-md-9">
      <i class="fa fa-times" data-toggle="collapse" data-target="sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="document.getElementById(this.getAttribute('data-target')).style.display = 'none';"></i>
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

    J'ai changé data-target et ajouté un très simple onclick.

    EDIT:

    D'autres améliorations:

    <div class="container-fluid">
  <div class="row d-flex">
    <nav class="col-md-3 collapse show width" id="sidebar">
      <h2>I'm a sidebar</h2>      
    </nav>
    <main class="col-md-9">
      <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="var that = this; setTimeout(function() {console.log(that.parentNode);that.parentNode.style.flex = 'auto';that.parentNode.style['max-width'] = 'none';}, 2000);"></i>
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>
    Merci @Lajos, voir mise à jour Q. j'ai réussi à le faire fonctionner, mais pas de la bonne façon
    vous pouvez prendre un coup d'oeil à mon édité réponse.

    OriginalL'auteur Lajos Arpad