blazor drop down menu doesn't push the rest of items down

Question

im creating an app in blazor the drop down works but it doesnt push the rest of items down how do i fix this? this is my code

<div class="container-fluid">
    <a class="navbar-brand" href=""><img src="/img/Boxplosive-logo.png" class="logoimg" /></a>
    <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>


<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="index">
                <span class="oi oi-home" aria-hidden="true"></span> Dashboard
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link dropdown-toggle" href="promotion" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="oi oi-home" aria-hidden="true" href="#"></span> Create
            </NavLink>
            <ul class="dropdown-menu ">
                <NavLink><a class="dropdown-item" href="promotion">Promotion</a></NavLink>
                <NavLink><a class="dropdown-item" href="#">Loyalty</a></NavLink>
                <NavLink><a class="dropdown-item" href="#">News Article</a></NavLink>
            </ul>

        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="publish">
                <span class="oi oi-cloud-upload" aria-hidden="true"></span> Publish
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="analyse">
                <span class="oi oi-graph" aria-hidden="true"></span> Analyse
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="managment">
                <span class="oi oi-cog" aria-hidden="true"></span> Managment
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="configuration">
                <span class="oi oi-list" aria-hidden="true"></span> Configuration
            </NavLink>
        </div>
    </nav>
    <nav class="sidebar-footer">

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-person" aria-hidden="true"></span> Admin
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="help">
                <span class="oi oi-question-mark" aria-hidden="true"></span> Help
            </NavLink>
            <button class="logoutbtn">Logout</button>
        </div>

    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    private bool expandSubNav;

}

i want he drop down the push the other items down when i click on it i tried other code that did push the other items down but it wouldn't indicate what page i am on, i want to keep both functionality

Answer 1

You can start from this and then customize using css classes and styles.

<div class="nav-item px-3">
    <a class="nav-link dropdown-toggle" href="#" @onclick="ToggleSubNavMenu" @onclick:preventDefault>
        <span class="oi oi-home" aria-hidden="true"></span> Create
    </a>  
    @if (expandSubNav)
    {
        <NavLink class="nav-link" href="promotion">
            <span class="oi oi-home" aria-hidden="true"></span> Promotion
        </NavLink>
        <NavLink class="nav-link" href="loyalty">
            <span class="oi oi-home" aria-hidden="true"></span> Loyalty
        </NavLink>
        <NavLink class="nav-link" href="newsarticle">
            <span class="oi oi-home" aria-hidden="true"></span> News Article
        </NavLink>
    }
</div>

@code {
    private bool expandSubNav = false;

    private void ToggleSubNavMenu()
    {
        expandSubNav = !expandSubNav;
    }
}