<div class="nav-brand-row">
    <a class="nav-brand-link" href="">DbFirst</a>
    <button class="nav-toggle-btn" @onclick="ToggleMenu" title="Navigation menu">&#9776;</button>
</div>

<div class="nav-scrollable @(menuOpen ? "nav-open" : "")">
    <DxTreeView CssClass="sidebar-tree">
        <Nodes>
            <DxTreeViewNode Text="Home" NavigateUrl="/" IconCssClass="dxi dxi-home" />
            <DxTreeViewNode Text="Data Management" Expanded="true">
                <Nodes>
                    <DxTreeViewNode Text="Catalogs" NavigateUrl="/catalogs" IconCssClass="dxi dxi-folder" />
                    <DxTreeViewNode Text="Dashboards" NavigateUrl="/dashboards" IconCssClass="dxi dxi-chart-bar" />
                    <DxTreeViewNode Text="Mass Data" NavigateUrl="/massdata" IconCssClass="dxi dxi-table" />
                </Nodes>
            </DxTreeViewNode>
        </Nodes>
    </DxTreeView>
</div>

@code {
    private bool menuOpen = false;
    private void ToggleMenu() => menuOpen = !menuOpen;
}
