Snippet CSS pour une barre latérale rétractable dans Discord

Je ne comprends pas pourquoi Discord n’a jamais ajouté l’option de réduire la barre latérale (qui contient la liste des canaux), la rendre rétractable quoi. Heureusement, vous pouvez le faire avec ce simple extrait de code (si vous utilisez Arc, vous pouvez créer un boost, sinon vous devez bidouiller avec les outils de développement de votre navigateur pour personnaliser le style CSS).

Ah oui, bien sûr, ça ne marche que dans le navigateur, si vous utilisez l’application, c’est mort.

[class^="sidebar_"],
[class^="sidebarList"] {
 position: relative;
 width: 0px !important;
 transition: width .2s ease-in;
}
 
[class^="sidebar_"]:hover,
[class^="sidebar"]:hover [class^="sidebarList"] {
 width: 240px !important;
 transition-timing-function: ease-out;
 transition-delay: 0s;
}
 
[class^="sidebar_"]::before {
  content: '>';
 position: absolute;
 top: 0;
 left: 0;
 z-index:999;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 
 background-color: var(--background-tertiary);
 
 color: var(--text-normal);
 font-weight: bold;
 
 opacity: 100%;
 transition: opacity .2s ease-in;
}
 
[class^="sidebar_"]:hover::before {
 opacity: 0%;
 pointer-events: none;
 transition-delay: 0.1s;
}