How to add a progress bar and button to bottom nav bar?

[qwasko1212]

Hello. I am trying to add a progress bar to the bottom navigation bar using the following code:

<nav class="navbar navbar-fixed-bottom">
    <div class="navbar-content">
        <button class="btn btn-sm" type="button" onclick="halfmoon.toggleDarkMode()">Switch colour</button>
    </div>
    <div class="navbar-content">
        <div class="progress">
            <div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60"
                 aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</nav>

I have tried different combinations, but somehow progress bar is not rendered at all or overlapped with the button. Could you please help me to render progress bar in bottom nav. Thank you in advance.

[qwasko1212]

Answer to myself. If you would read the doc carefully then you would find that the progress bar should be placed inside of the container <div class="content w-400 mw-full">

Code:

<div class="navbar-content">
    <button class="btn btn-sm" type="button" onclick="halfmoon.toggleDarkMode()">Switch colour</button>
</div>
<div class="navbar-content">
    <div class="content w-400 mw-full">
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-animated highlight-dark" role="progressbar"
                 style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</div>