This is the structure of my website

Home

=>Section1

==>article1

==>article2

=>Section2

==>article3

==>article4

The menu items are generated based on the section pages. For example, in this case I have two menu items "Section1" and "Section2"

Each section has side navigation as well. In a way that clicking on item1 will navigate to /section1/article1

This is my Section template:

<div 
    <aside>
        @{ foreach (var mainSection in homePage.Descendants<MainSection>())
            {
                <a href="@mainSection.Url()">@mainSection.Name</a>
                foreach (var article in mainSection.Descendants<Article>())
                {
                    <a href="@article.Url()">@article.Title</a>
                    currentArticle = article;
                }
            }
        }
    </aside>
    @RenderSection("ArticleContent", false);
</div>

The problem is when I click on section1, it throws an exception as cannot be requested directly because it calls the "RenderSection" method which makes sense from Razor's point of view but I don't know what would be my options.

Objective: whenever a user clicks on the "Section1" menu item, it should be redirected to the first page under this section (i.e. /section1/article1).

Any ideas would be appreciated.