Blazor sidebar menu not reaching bottom of page after expanding menu-CodePudding

I have a sidebar menu on my Blazor application that has an expandable portion when you click on one of the menu options. When you click this option, "maintenance", it adds a few more options to the menu right below the maintenance option. However, when it does this it also pushes everything below it down and adds a scrollbar to the page. This would be okay except for the fact that the items that get pushed down the sidebar go past the point that the sidebar styling goes to. I've included a picture to show what I mean by this - picture. I was hoping there is a way to force the sidebar to always go to the bottom of the page even if the page gets expanded. Here is my code for the page.

<div >
    <div >
        <a  href="">Degrade Web</a>
        <button title="Navigation menu"  @onclick="ToggleNavMenu">
            <span ></span>
        </button>
    </div>
</div>

<div  @onclick="ToggleNavMenu">
    <nav >
        <div >
            <NavLink  href="" Match="NavLinkMatch.All">
                <span  aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div >
            <NavLink  href="enterData">
                <span  aria-hidden="true"></span>Enter Data
            </NavLink>
        </div>
        <div >
            <NavLink  href="deleteUnit">
                <span  aria-hidden="true"></span>Delete Unit
            </NavLink>
        </div>
        @if (isAdmin) 
        {
            <div >
                <NavLink  id="navLink" @onclick="()=>expandSubNav = !expandSubNav">
                    <span  aria-hidden="true"></span>Maintenance
                </NavLink>
            </div>
            @if (expandSubNav)
            {
                <div >
                    <NavLink  href="addDimension">
                        <span  aria-hidden="true">add Dimension</span>
                    </NavLink>
                </div>
                <div >
                    <NavLink  href="addGrade">
                        <span  aria-hidden="true">add Grade</span>
                    </NavLink>
                </div>
                <div >
                    <NavLink  href="addSpecie">
                        <span  aria-hidden="true">add Specie</span>
                    </NavLink>
                </div>
                <div >
                    <NavLink  href="addSeasoning">
                        <span  aria-hidden="true">add Seasoning</span>
                    </NavLink>
                </div>
                <div >
                    <NavLink  href="lookupTables">
                        <span  aria-hidden="true">Lookup Tables</span>
                    </NavLink>
                </div>
            }
        }
        <div >
            <NavLink  href="comparison">
                <span  aria-hidden="true"></span>Comparison
            </NavLink>
        </div>
        <div >
            <NavLink  href="summary">
                <span  aria-hidden="true"></span>Summary
            </NavLink>
        </div>
        <div >
            <NavLink  href="unitHistory">
                <span  aria-hidden="true"></span>Unit History
            </NavLink>
        </div>
        <div >
            <NavLink  href="form">
                <span  aria-hidden="true"></span>Form
            </NavLink>
        </div>
        <div >
            <NavLink  href="trend">
                <span  aria-hidden="true"></span>Trend
            </NavLink>
        </div>
        <div >
            <NavLink  href="percents">
                <span  aria-hidden="true"></span>Percents
            </NavLink>
        </div>
        <div >
            <NavLink  href="piecesByMill">
                <span  aria-hidden="true"></span>Pieces by Mill
            </NavLink>
        </div>
        <div >
            <NavLink  href="reasonsByWeek">
                <span  aria-hidden="true"></span>Reasons by Week
            </NavLink>
        </div>
        <div >
            <NavLink  href="reasons">
                <span  aria-hidden="true"></span>Reasons
            </NavLink>
        </div>
        <div >
            <NavLink  href="category">
                <span  aria-hidden="true"></span>Category
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;
    private bool expandSubNav;
    private bool isAdmin = false;

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

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

    protected override async Task OnInitializedAsync() 
    {
        if (isAdmin) // If this user is an admin, force an update of the page
        {
            this.StateHasChanged();
        }
        else
        {
            isAdmin = true;
            this.StateHasChanged();
        }
    }
}

and here is the css

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

CodePudding user response：

I believe you can fix this by adding overflow-y: auto; to the .sidebar style in

MainLayout.razor.css:

.sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
    /* Add this line */
    overflow-y: auto;
}

(Assuming you are using the default MainLayout.razor and MainLayout.razor.css from the Blazor template)