<div class="noteNavContainer">
    @foreach (var note in Notes)
    {
        if (note.Parent == null)
        {
            <NavLink class="noteNavButton" href="@note.GetNoteLink()">@note.Name</NavLink>
            <NoteInnerNavComponent Note="@note"/>
        }
    }
</div>

<style>
 .noteNavContainer {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .noteNavButton a {
     color: white;
 }
 
 .noteNavButton a:hover {
      color: white;
      background-color: var(--primary-hover);
           
  }
 
 .noteNavButton {
     padding: 8px;
     color: white;
 }

</style>

@code {

    [Parameter]
    public List<NoteContentModel> Notes { get; set; } = default!;

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

}