如何用子元素填充sidenav栏

Question

我想设置两个侧边栏。第一个显示实体列表。通过单击一个实体，第二个侧边栏将打开，以显示所单击实体的子元素。

这是两个sidenav元素。

<div id="orderList" class="sidenavOrders">
    @foreach (var item in Model)
    {
        <a href="#" onclick="openComponents()">@Html.DisplayFor(modelItem => item.OrderId)</a>
    }
    <a href="javascript:void(0)" class="closebtn" onclick="closeOrders()">&times;</a>
</div>

<div id="componentList" class="sidenavComponents">
    @foreach (var item in Model)
    {
        <a href="#">@Html.DisplayFor(modelItem => item.Components.Count)</a>
    }
    <a href="javascript:void(0)" class="closebtn" onclick="closeComponents()">&times;</a>
</div>

下面是代码（为了提高可读性，删除了closeFunctions）：

<script>
    function openOrders() {
        document.getElementById("orderList").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    }

    function openComponents() {
        document.getElementById("componentList").style.width = "250px";
        document.getElementById("main").style.marginLeft = "500px";
        //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    }
</script>

我真的不知道如何将子元素（“组件”）推到第二个任务栏。现在，我所能做的就是显示每个订单的组件数量。