Bumped SDK version, implemented Navigation Component (#8)

This PR increases the version of the SDK used to v0.0.9 - in order to
leverage the new `CustomComponent` binding functionality.

This functionality is used to implement the `Navigation` component
included here.


## Description / Motivation
Implementation of the Navigation component now means that the Skate Park
template is now completely supported.

## Terms
<!-- Place an X in the [] to check. -->

<!-- The Code of Conduct helps create a safe space for everyone. We
require that everyone agrees to it. -->
- [x] I agree to follow this project's [Code of
Conduct](CODE_OF_CONDUCT.md).

Closes #2

README.md

@@ -6,10 +6,8 @@ This repository contains the ASP.NET Core Starter Kit for Sitecore XM Cloud Deve
 > This is a pre-release version of the starter kit and is built against the pre-release version of the ASP.NET Core SDK. As such, there may be some issues with the project that are not yet resolved. If you encounter any issues, please report them in the [Issues](https://github.com/Sitecore/xmcloud-starter-aspnetcore/issues) section of the repo.
 
 The following are known issues that are being worked on:
-- **Navigation Component** - The OOTB Navigation component provided by XM Cloud currently isn't supported. This is being worked on and will be available in a future release. If you add the component to a page it can break deserialisation of the layout object and stop the page from rendering. In that scenario you will need to remove the component via the Content Editor. **Due to this reason the Skate Park Template is not currently supported, unless you manually remove the Navigation component from the Header Partial Design.**
 - **Front End as a Service (FEaaS)** - The FEaaS components are not yet available in the pre-release version of the Starter Kit.
 - **Forms** - The Forms components are not yet available in the pre-release version of the Starter Kit.
-- **Skate Park** - The Skate Park Template is currently only partially supported. For it to run you need to manually remove the `Navigation` component from the Header Partial Design. This is due to the Navigation component not being supported yet, as per the comment above.
 
 ## GitHub Template
 This Github repository is a template that can be used to create your own repository. To get started, click the `Use this template` button at the top of the repository. 

headapps/Directory.Packages.props

@@ -1,6 +1,6 @@
 <Project>
     <PropertyGroup>
-        <AspNetCoreSdkVersion>0.0.7</AspNetCoreSdkVersion>
+        <AspNetCoreSdkVersion>0.0.9</AspNetCoreSdkVersion>
     </PropertyGroup>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>

headapps/aspnet-core-starter/Extensions/ServiceCollectionExtensions.cs

@@ -1,5 +1,6 @@
 using Sitecore.AspNetCore.SDK.RenderingEngine.Configuration;
 using Sitecore.AspNetCore.Starter.Models.LinkList;
+using Sitecore.AspNetCore.Starter.Models.Navigation;
 using Sitecore.AspNetCore.Starter.Models.Title;
 
 namespace Sitecore.AspNetCore.Starter.Extensions;
@@ -17,8 +18,9 @@ public static RenderingEngineOptions AddStarterKitViews(this RenderingEngineOpti
                               .AddModelBoundView<Promo>("Promo")
                               .AddModelBoundView<LinkList>("LinkList")
                               .AddModelBoundView<Image>("Image")
-                              .AddModelBoundView<PartialDesignDynamicPlaceholder>("PartialDesignDynamicPlaceholder");
-
+                              .AddModelBoundView<PartialDesignDynamicPlaceholder>("PartialDesignDynamicPlaceholder")
+                              .AddModelBoundView<Navigation>("Navigation");
+
         return renderingEngineOptions;
     }
 }

headapps/aspnet-core-starter/Models/Navigation/Navigation.cs

@@ -0,0 +1,20 @@
+using Sitecore.AspNetCore.SDK.LayoutService.Client.Serialization.Converter;
+using Sitecore.AspNetCore.SDK.RenderingEngine.Binding.Attributes;
+
+namespace Sitecore.AspNetCore.Starter.Models.Navigation;
+
+public class Navigation : BaseModel
+{
+    public Navigation() { }
+
+    public Navigation(List<NavigationItem>? navigationItems, int? menuLevel)
+    {
+        NavigationItems = navigationItems;
+        MenuLevel = menuLevel;
+    }
+
+    [SitecoreComponentField(Name = FieldParser.CustomContentFieldKey)]
+    public List<NavigationItem>? NavigationItems { get; set; }
+
+    public int? MenuLevel { get; set; }
+}

headapps/aspnet-core-starter/Models/Navigation/NavigationItem.cs

@@ -0,0 +1,19 @@
+using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;
+
+namespace Sitecore.AspNetCore.Starter.Models.Navigation
+{
+    public class NavigationItem
+    {
+        public string? Id { get; set; }
+
+        public List<string>? Styles { get; set; } = [];
+
+        public List<NavigationItem>? Children { get; set; } = [];
+
+        public string? Href { get; set; }
+
+        public string? QueryString { get; set; }
+
+        public TextField? NavigationTitle { get; set; }
+    }
+}

headapps/aspnet-core-starter/Views/Shared/Components/SitecoreComponent/Navigation.cshtml

@@ -0,0 +1,15 @@
+@using Sitecore.AspNetCore.Starter.Models.Navigation
+@model Sitecore.AspNetCore.Starter.Models.Navigation.Navigation
+
+<div class="component navigation @Model.Styles @Model.GridParameters" id="@Model.Id">
+    <label class="menu-mobile-navigate-wrapper">
+        <input type="checkbox"
+               class="menu-mobile-navigate" />
+        <div class="menu-humburger" />
+        <div class="component-content">
+            <nav>
+                @await Html.PartialAsync("./_NavigationMenu.cshtml", @Model)
+            </nav>
+        </div>
+    </label>
+</div>

headapps/aspnet-core-starter/Views/Shared/Components/SitecoreComponent/_NavigationMenu.cshtml

@@ -0,0 +1,18 @@
+@using Sitecore.AspNetCore.Starter.Models.Navigation
+@model Sitecore.AspNetCore.Starter.Models.Navigation.Navigation
+
+<ul class="clearfix">
+    @foreach (NavigationItem navItem in @Model.NavigationItems ?? [])
+    {
+        string classNames = $"{string.Join(" ", navItem.Styles ?? [])} rel-level{Model.MenuLevel}";
+
+        <li class="@classNames">
+            <div class="navigation-title @(navItem.Children?.Count > 0 ? "child" : "")">
+                <a href="@navItem.Href">
+                    <sc-text asp-for="@navItem.NavigationTitle"></sc-text>
+                </a>
+            </div>
+            @await Html.PartialAsync("./_NavigationMenu.cshtml", new Navigation(navItem.Children, Model.MenuLevel + 1))
+        </li>
+    }
+</ul>