I am currently working on integrating a sidebar using bootstrap 5.
When I click on the user initials, I want something like this to happen (collapse):
https://i.sstatic.net/ejbhD.png
However, the result I'm getting is different:
https://i.sstatic.net/gUejA.png
I suspect it has to do with the d-flex class, as I have looked at multiple questions on SO without finding a solution.
Is there a way to separate the content into two blocks and insert a breakline between them instead of setting up two columns?
Check out the JS FIDDLE LIVE DEMO
Here is the relevant portion of the code:
<ul class="list-unstyled components">
<li class="nav-item">
<a class="btn btn-primary d-flex" data-toggle="collapse" href="#sidebarUserProfile" role="button" aria-expanded="false" aria-controls="sidebarUserProfile">
<div class="row">
<span class="userInitials">JW</span>
<div class="d-flex text flex-row align-items-center staff-nav-holder">
<div class="d-flex flex-column">
<span class="staff-name fw-bold">John Walker</span>
<span class="staff-position">PM</span>
</div>
<i id="profile-chevron-down" class="bi bi-chevron-down ml-2">
</i>
</div>
</div>
<div class="row">
<div class="collapse d-block" id="sidebarUserProfile">
<ul class="list-unstyled components">
<li>Customize your homepage</li>
<li>Change your password</li>
<li>Log out</li>
</ul>
</div>
</div>
</a>
</p>
</li>
...
</ul>