IGP-Fan-Reference/IGP/Pages/MakingOf/Parts/MakingOfNavigation.razor

<MakingOfComponent>
    <Title>
        Nav Section with Nav Links
    </Title>
    <Description>
        Group specfic webpages. Each webpage link is used to navigate to that specific webpage. If on the webpage, the link turns dark gray. It can be clicked again to leave the page and return to home.
    </Description>
    <Example>
        <DesktopNavSectionComponent Section=@(new WebSectionModel { Name = "Example Section" })
                                    Children=@(new List<WebPageModel> { new() { Name = "Example Page", Href = "immortal-makingof", IsPrivate = "False" }, new() { Name = "Database", Href = "immortal-database", IsPrivate = "False" } })>
        </DesktopNavSectionComponent>
    </Example>
    <Usage>
        <CodeComponent>
            &lt;DesktopNavSectionComponent Section=@@(new WebSectionModel{Name = &quot;Example Section&quot;})
            Children=@@(new List&lt;WebPageModel&gt;{new WebPageModel{Name=&quot;Example Page&quot;, Href = &quot;immortal-makingof&quot;, IsPrivate = false}, new WebPageModel{Name=&quot;Database&quot;, Href = &quot;immortal-database&quot;, IsPrivate = false}})&gt;
            &lt;/DesktopNavSectionComponent&gt;
        </CodeComponent>
    </Usage>
    <Code>
        <CodeComponent>
            @@using Model.Website;
            @@using Model.Website.Enums;

            &lt;div class=&quot;sectionContainer&quot;&gt;
            &lt;div class=&quot;sectionHeader&quot;&gt;
            &lt;div class=&quot;sectionTitle&quot;&gt;
            @@Section.Name
            &lt;/div&gt;
            &lt;/div&gt;

            @@foreach (var childPage in Children) {
            if (childPage.IsPrivate) {
            continue;
            }
            &lt;NavLinkComponent Page=childPage&gt;&lt;/NavLinkComponent&gt;
            }
            &lt;/div&gt;

            &lt;style&gt;
            .sectionContainer {
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: flex-start;
            position: relative;
            margin-top: 12px;
            padding: 18px;
            width: 300px;
            margin-left: 4px;
            }

            .sectionHeader {
            bottom: 100%;
            position: absolute;
            top: 0px;
            left: -8px;
            padding-right: 12px;
            padding-left: 4px;
            width: 100%;
            display: flex;
            line-height: 0px;
            }

            .sectionTitle {
            font-weight: bold;
            padding-right: 8px;
            margin-top: -2px;
            white-space: pre;
            }
            &lt;/style&gt;

            @@code {
            [Parameter] public WebSectionModel? Section { get; set; }
            [Parameter] public List&lt;WebPageModel&gt;? Children { get; set; }
            }

        </CodeComponent>
    </Code>
</MakingOfComponent>