Dear all

I've successfully created a side navigation going from the parent page and listing all sub pages with the help of this forum and some bootstrap. Thanks a lot!

I'm currently struggling with the question on how to load the content when clicked on the links (no idea of a good way to solve this) and I need a push in the right direction.

In the content area, I want to load Power BI embedded elements with Settings present in the "Insight Elements". The question is now how to load the content of the page?

My first Idea was to make a Ajax dynamically loading the content, but I'm currently struggling with matching it with the information from Umbraco

Second Idea was to create all content already on load and hide/show with bootstrap but I fear a performance drop, since average insight Elements are arround 30+.

Third option was simply to load the pages directly but then the side menu is rebuild on every page refresh and looses it's selections.

Has anyone done this or can point me to the technology best to be used in this scenario?

Thanks in advance and have a nice day! Christian

My current hierarchy looks like this:

The code generating the menu looks like this:

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-auto col-md-3 col-xl-3 px-sm-2 px-0" id="sidebar-container">

            <!-- sidebar-container Start -->
            <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 min-vh-100">
                <!-- d-* hides the Sidebar on smaller devices, only the logos will be visible. -->
                @{
                    var insightPage = Model.AncestorOrSelf(2);
                    var insightGroups = insightPage.Children.Where(x => x.IsVisible());
                }

                @helper DisplayInsightsInList(IPublishedContent insightGroup, bool firstTime)
                {

                    if (insightGroup.Children.Any())
                    {
                        foreach (var insight in insightGroup.Children)
                        {
                            if (insight.IsVisible())
                            {
                                <li class="submenu">
                                    <a href="@("#" + insight.GetProperty("insightElementId").GetValue().ToString())" class="nav-link px-0 pl-20 @(firstTime ? "" : "")">
                                        @insight.GetProperty("insightElementId").GetValue().ToString() <span class="d-none d-sm-inline">@insight.GetProperty("insightElementName").GetValue().ToString()</span>
                                    </a>
                                </li>
                            }

                            @DisplayInsightsInList(insight, false)
                        }
                    }
                }

                <a href="#" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-decoration-none">
                    <span class="fs-5 d-none d-sm-inline">Demo Dashboard</span>
                </a>

                <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
                    <!-- Menu Elements-->
                    @foreach (var insightGroup in insightGroups)
                    {
                        <!-- Group list -->
                        <li class="nav-item menu">
                            <a href="@("#submenu" + insightGroup.GetProperty("insightGroupId").GetValue().ToString())" data-bs-toggle="collapse" class="nav-link align-middle px-0">
                                <span class="fa @insightGroup.GetProperty("insightGroupLogo").GetValue().ToString() fa-fw fa-15x mr-3"></span>
                                <span class="ms-1 d-none d-sm-inline">@insightGroup.GetProperty("insightGroupName").GetValue().ToString()</span>
                            </a>
                            <!-- Submenu list -->
                            <ul class="collapse nav flex-column ms-1" id="@("submenu" + insightGroup.GetProperty("insightGroupId").GetValue().ToString())" data-bs-parent="#menu">
                                @DisplayInsightsInList(insightGroup, true)
                            </ul>
                        </li>
                    }
                </ul>
            </div>
        </div>
        <!-- sidebar-container END -->
        <!-- content-container Start -->
        <div class="col py-4">
            Content area...
        </div>
        <!-- content-container END -->
    </div>
</div>