Comment créer un contenu secondaire pliable dans React, inspiré par Jira

Il existe plusieurs options pour afficher le contenu supplémentaire dont votre utilisateur a besoin, comme des formulaires pour créer de nouveaux enregistrements ou modifier des enregistrements existants. Les meilleures pratiques UI/UX consistent à ne pas encombrer l’écran avec des options inutiles, sauf si l’utilisateur en a vraiment besoin.
Pour cette raison, il existe différents types de boîtes de dialogue que vous pouvez montrer à votre utilisateur, comme les modaux, les tiroirs, etc. 
Un inconvénient des modaux est qu'ils cachent le contenu. Ils sont parfaits lorsque les utilisateurs souhaitent créer de nouveaux enregistrements, mais pas lorsqu'ils modifient des enregistrements existants.
Si vous avez déjà utilisé Jira, vous avez probablement remarqué son panneau de contenu pliable unique dans la section backlog. Comment ont-ils fait ? 
Voici de quoi je parle : 

J'ai obtenu le même comportement avec les composants Layout et Sider d'Ant Design dans React ; voici le bac à sable :

https://codesandbox.io/p/sandbox/responsive-persistent-modal-97s3fd

Si vous utilisez autre chose que React & Ant Design. Voici le problème : c'est juste une barre latérale à droite avec une largeur de réduction de 0.

BR

Ahmed.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!