[BootStrap 4] Créer un "collapsible sidebar"

Bonjour, alors je suis très nouveau sur Bootstrap et dans le Développement Web en particulier (même pas 2 semaines que j'ai découvert le HTML et CSS, le confinement il faut s'occuper)

Voilà pourquoi, j'aurais besoin de votre aide, pleaaase.

Alors j'ai déjà crée une "nav" mais j'aimerais ajouter dans cette nav à gauche un petit bouton qui activerait une "collapsible sidebar". Et que quand cette sidebar s'ouvre, elle s'ouvre au dessus des autres fichier sans les pousser, (position absolute quoi). Et que pour refermer la sidebar, on peut appuyer n'importe où sur l'écran, ou sur le bouton .

Je sais je vise loin, dès le début peut-être, mais ça fait 3 jours que je cherche mais j'y arrive pas.

Voici mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="sticky-top">
    <nav  class="navbar navbar-expand-lg navbar-dark bg-dark pt-3 pb-0 ">
         <a class="text-capitalize font-weight-bold pl-4 navbar-brand" href="../boot.html">Hey & Co </a>
     <div  class=" ml-5 dropdown">
          <a class=" btn btn-sm btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Menu principal
         </a>
 
     <div id="dropdown" class=" mt-1 dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="dropdownMenuLink">
       <a class="dropdown-item" href="#">Partie 1</a>
       <a class="dropdown-item" href="#">Partie 2</a>
       <a class="dropdown-item" href="#">Partie 3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">À savoir</a>
          </div>
     </div>
 
     <div  class="collapse navbar-collapse" id="navbarText">
        <ul    class="navbar-nav mr-auto" role="dialog">
          <li class=" no-caret ml-5 pl-5 nav-item dropdown" >
            <a   class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
              Partie 1
            </a>
            <div  class="animate slideIn dropdown-menu mt-0" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
 
            <li class="   ml-5 pl-5 nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
              Partie 2
            </a>
            <div class="animate slideIn dropdown-menu mt-0" aria-labelledby="navbarDropdown" >
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
           </ul>
   </div>
   </nav>
  </div>

Et Le CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.navbar-nav li:hover .dropdown-menu {
    display: block;
}
 
 
#navbarDropdown:hover {
    display : inherit;
}
 
nav {
    border-bottom : 1px black solid; 
    -webkit-box-shadow: 1px 2px 5px 1px rgba(186,186,186,0.91); 
    box-shadow: 1px 2px 5px 1px rgba(186,186,186,0.91);
}
 
@media (min-width: 992px) {
  .animate {
    animation-duration: 0.6s;
    -webkit-animation-duration: 0.6s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
    }
 
@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}
 
@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}
 
.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}