<div class="docNavContainer">
    @foreach (var doc in Documents)
    {
        if (doc.Parent == null)
        {
            <NavLink class="docNavButton" href="@doc.GetDocLink()">@doc.Name</NavLink>
            <DocumentInnerNavComponent Document="@doc"/>
        }
    }
</div>

<style>
.docNavContainer {
   display: flex;
   flex-direction: column;
   gap: 8px;
  }
 
 .docNavButton a {
     color: white;
 }
 
 .docNavButton a:hover {
      color: white;
  }
 
 .docNavButton {
     padding: 8px;
     color: white;
 }

</style>

@code {

    [Parameter]
    public List<DocContentModel> Documents { get; set; } = default!;

    [Parameter]
    public List<DocConnectionModel> Connections { get; set; } = default!;

    private string GetLink(DocContentModel doc)
    {
        return $"docs/{doc.Href}";
    }

}