Merge pull request #117 from cloudscribe/bootstrap5

Bootstrap5

Author: JimKerslake

src/NavigationDemo.Web/Views/Shared/_Layout.cshtml

@@ -7,12 +7,12 @@
     <title>@ViewData["Title"] - NavigationDemo.Web</title>
 
     <environment names="Development">
-        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
-        <link rel="stylesheet" href="~/lib/smartmenus/dist/addons/bootstrap/jquery.smartmenus.bootstrap.css" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="~/lib/smartmenus/jquery.smartmenus.bootstrap.css" />
         <link rel="stylesheet" href="~/css/site.css" />
     </environment>
     <environment names="Staging,Production">
-        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
               asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
               asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
         <link rel="stylesheet" href="~/lib/smartmenus/dist/addons/bootstrap/jquery.smartmenus.bootstrap.css" />
@@ -23,24 +23,24 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
+                <button type="button" class="navbar-toggle" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
+                    <span class="visually-hidden">Toggle navigation</span>
+                    <span class="icon-bar">+</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
                 <a asp-controller="Home" asp-action="Index" asp-area="" class="navbar-brand">NavigationDemo.Web</a>
             </div>
-            <div class="navbar-collapse collapse">
-                @await Component.InvokeAsync("Navigation", new { viewName = "Bootstrap4TopNavWithDropdowns", filterName = NamedNavigationFilters.TopNav, startingNodeKey= "" }) 
+            <div class="collapse navbar-collapse">
+                @await Component.InvokeAsync("Navigation", new { viewName = "Bootstrap5TopNavWithDropdowns", filterName = NamedNavigationFilters.TopNav, startingNodeKey= "" }) 
                 @await Html.PartialAsync("_LoginPartial")
             </div>
         </div>
     </div>
     <div class="container body-content">
 
         <p>------------------- Start breadcrumbs</p>
-        @await Component.InvokeAsync("Navigation", new { viewName = "Bootstrap4Breadcrumbs", filterName = NamedNavigationFilters.Breadcrumbs, startingNodeKey = "" })
+        @await Component.InvokeAsync("Navigation", new { viewName = "Bootstrap5Breadcrumbs", filterName = NamedNavigationFilters.Breadcrumbs, startingNodeKey = "" })
         <p>-------------------- End breadcrumbs</p>
 
         @RenderBody()
@@ -52,25 +52,24 @@
     </div>
 
     <environment names="Development">
-        <script src="~/lib/jquery/dist/jquery.js"></script>
-        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
-        <script src="~/lib/smartmenus/dist/jquery.smartmenus.js"></script>
-        <script src="~/lib/smartmenus/dist/addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
-        
+        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
+        <script src="~/lib/smartmenus/bs4.smartmenus.min.js"></script>
     </environment>
+    
     <environment names="Staging,Production">
         <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                 asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                 asp-fallback-test="window.jQuery">
         </script>
-        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
                 asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                 asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
         </script>
         <script src="~/lib/smartmenus/dist/jquery.smartmenus.min.js"></script>
         <script src="~/lib/smartmenus/dist/addons/bootstrap/jquery.min.smartmenus.bootstrap.js"></script>
-        
     </environment>
+
     <script>
         (function () {
             $("#selectLanguage select").change(function () {

src/cloudscribe.Web.Navigation/Views/Shared/Bootstrap5NavigationNodeChildDropdownPartial.cshtml

@@ -0,0 +1,30 @@
+@using cloudscribe.Web.Navigation
+@model NavigationViewModel
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, cloudscribe.Web.Navigation
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@if ((Model.TempNode != null) && (await Model.HasVisibleChildren(Model.TempNode)))
+{
+<ul class="dropdown-menu" aria-labelledby="dropdown-@Model.TempNode.Value.Key">
+    @foreach (var childNode in Model.TempNode.Children) {
+        if (!await Model.ShouldAllowView(childNode)) { continue; }
+
+        if (childNode.Value.Text == "Separator") {
+            <div class="dropdown-divider"></div>
+            continue;
+        }
+        if (!await Model.HasVisibleChildren(childNode)) {
+            <li class='@Model.GetClass(childNode.Value, "")'><a class="dropdown-item" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)]</a></li>
+        }
+        else {
+
+            <li class='@Model.GetClass(childNode.Value, "dropdown ",  "active", true)'>
+                <a class="dropdown-item dropdown-toggle" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)] </a>
+                @Model.UpdateTempNode(childNode) <partial name="Bootstrap5NavigationNodeChildDropdownPartial" model="@Model" />   @* recursion *@
+            </li>
+
+        }
+    }
+</ul>
+}

src/cloudscribe.Web.Navigation/Views/Shared/Bs5NavigationNodeChildTreePartial.cshtml

@@ -0,0 +1,26 @@
+@using cloudscribe.Web.Navigation
+@model NavigationViewModel
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@if ((Model.TempNode != null) && (await Model.HasVisibleChildren(Model.TempNode)))
+{
+    <ul class="list-unstyled ms-4">
+        @foreach (var childNode in Model.TempNode.Children)
+        {
+            if (! await Model.ShouldAllowView(childNode)) { continue; }
+
+            if (! await Model.HasVisibleChildren(childNode))
+            {
+                <li class='nav-item'><a class="nav-link" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)]</a></li>
+            }
+            else
+            {
+                <li class='nav-item'>
+                    <a class="nav-link" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[Model.AdjustText(childNode)]</a>
+                    @Model.UpdateTempNode(childNode) <partial name="Bs5NavigationNodeChildTreePartial" model="@Model" />  @* recursion *@
+                </li>
+            }
+        }
+    </ul>
+}

src/cloudscribe.Web.Navigation/Views/Shared/Bs5SideNavPartial.cshtml

@@ -0,0 +1,50 @@
+@using cloudscribe.Web.Navigation
+@model NavigationViewModel
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@if ((Model.TempNode != null) && (await Model.HasVisibleChildren(Model.TempNode)))
+{
+    <ul class="list-unstyled ms-4 ">
+
+        @foreach (var childNode in Model.TempNode.Children)
+        {
+            if (! await Model.ShouldAllowView(childNode)) { continue; }
+
+            if (! await Model.HasVisibleChildren(childNode))
+            {
+                if (childNode.EqualsNode(Model.CurrentNode))
+                {
+                    <li class="nav-item"><a class="nav-link active" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[childNode.Value.Text]</a></li>
+                }
+                else
+                {
+                    <li class="nav-item"><a class="nav-link" href="@Url.Content(Model.AdjustUrl(childNode))">@Html.Raw(Model.GetIcon(childNode.Value))@sr[childNode.Value.Text]</a></li>
+                }
+            }
+            else
+            {
+                if (childNode.EqualsNode(Model.CurrentNode))
+                {
+                    <li class="nav-item">
+                        <a class="nav-link active" href="@Url.Content(Model.AdjustUrl(childNode))">
+                            @Html.Raw(Model.GetIcon(childNode.Value))@sr[childNode.Value.Text]
+                        </a>
+                        @Model.UpdateTempNode(childNode)
+                        <partial name="Bs5SideNavPartial" model="@Model" />  @* recursion *@
+                    </li>
+                }
+                else
+                {
+                    <li class="nav-item">
+                        <a class="nav-link" href="@Url.Content(Model.AdjustUrl(childNode))">
+                            @Html.Raw(Model.GetIcon(childNode.Value))@sr[childNode.Value.Text]
+                        </a>
+                        @Model.UpdateTempNode(childNode)
+                        <partial name="Bs5SideNavPartial" model="@Model" /> @* recursion *@
+                    </li>
+                }
+            }
+        }
+    </ul>
+}

src/cloudscribe.Web.Navigation/Views/Shared/Components/Navigation/Bootstrap5Breadcrumbs.cshtml

@@ -0,0 +1,38 @@
+@using cloudscribe.Web.Navigation
+@model NavigationViewModel
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@if (Model.CurrentNode != null && (Model.ParentChain.Count > 1 || (Model.TailCrumbs != null && Model.TailCrumbs.Count > 0)))
+{
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            @foreach (var node in Model.ParentChain)
+            {
+                if (! await Model.ShouldAllowView(node)) { continue; }
+                if (node.EqualsNode(Model.CurrentNode))
+                {
+                    if (Model.TailCrumbs != null)
+                    {
+                        <li class="breadcrumb-item"><a href="@Url.Content(Model.AdjustUrl(node))">@sr[Model.AdjustText(node)]</a></li>
+                    }
+                    else
+                    {
+                        <li class="breadcrumb-item active">@sr[Model.AdjustText(node)]</li>
+                    }
+                }
+                else
+                {
+                    <li class="breadcrumb-item"><a href="@Url.Content(Model.AdjustUrl(node))">@sr[Model.AdjustText(node)]</a></li>
+                }
+            }
+            @if (Model.TailCrumbs != null)
+            {
+                foreach (var n in Model.TailCrumbs)
+                {
+                    <li class="breadcrumb-item active">@sr[n.Text]</li>
+                }
+            }
+        </ol>
+    </nav>
+
+}

src/cloudscribe.Web.Navigation/Views/Shared/Components/Navigation/Bootstrap5TopNavWithDropdowns.cshtml

@@ -0,0 +1,33 @@
+@using cloudscribe.Web.Navigation
+@using System.Text
+@model NavigationViewModel
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, cloudscribe.Web.Navigation
+
+<ul class="navbar-nav me-auto" role="menubar">
+    @if (await Model.ShouldAllowView(Model.RootNode))
+    {
+        <li cwn-data-attributes="@Model.RootNode.Value.DataAttributes" class='@Model.GetClass(Model.RootNode.Value, "nav-item")'><a class="nav-link" href="@Url.Content(Model.AdjustUrl(Model.RootNode))">@Html.Raw(Model.GetIcon(Model.RootNode.Value))@sr[Model.AdjustText(Model.RootNode)]</a></li>
+    }
+
+    @if (await Model.HasVisibleChildren(Model.RootNode))
+    {
+        @foreach (var node in Model.RootNode.Children)
+        {
+            if (!await Model.ShouldAllowView(node)) { continue; }
+            if (!await Model.HasVisibleChildren(node))
+            {
+                <li class='@Model.GetClass(node.Value, "nav-item")' cwn-data-attributes="@node.Value.DataAttributes"><a class="nav-link" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a></li>
+            }
+            else
+            {
+                <li class='@Model.GetClass(node.Value, "nav-item dropdown",  "active", true)' cwn-data-attributes="@node.Value.DataAttributes">
+                    <a class="nav-link dropdown-toggle" id="dropdown-@node.Value.Key" aria-haspopup="true" aria-expanded="false" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)] </a>
+                    @Model.UpdateTempNode(node) <partial name="Bootstrap5NavigationNodeChildDropdownPartial" model="@Model" />
+                </li>
+            }
+        }
+    }
+</ul>

src/cloudscribe.Web.Navigation/Views/Shared/Components/Navigation/Bs5ChildDropdown.cshtml

@@ -0,0 +1,28 @@
+@using cloudscribe.Web.Navigation
+@using System.Text
+@model NavigationViewModel
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@if (await Model.HasVisibleChildren(Model.CurrentNode))
+{
+    <nav>
+        <ul class="childtree list-unstyled">
+            @foreach (var node in Model.CurrentNode.Children)
+            {
+                if (! await Model.ShouldAllowView(node)) { continue; }
+                if (! await Model.HasVisibleChildren(node))
+                {
+                    <li class='nav-item'><a class='nav-link' href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a></li>
+                }
+                else
+                {
+                    <li class='nav-item'>
+                        <a class="nav-link" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a>
+                        @Model.UpdateTempNode(node) <partial name="Bs5NavigationNodeChildTreePartial" model="@Model" />
+                    </li>
+                }
+            }
+        </ul>
+    </nav>
+}

src/cloudscribe.Web.Navigation/Views/Shared/Components/Navigation/Bs5ChildTree.cshtml

@@ -0,0 +1,28 @@
+@using cloudscribe.Web.Navigation
+@using System.Text
+@model NavigationViewModel
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@if (await Model.HasVisibleChildren(Model.CurrentNode))
+{
+    <nav>
+        <ul class="childtree list-unstyled">
+            @foreach (var node in Model.CurrentNode.Children)
+            {
+                if (! await Model.ShouldAllowView(node)) { continue; }
+                if (! await Model.HasVisibleChildren(node))
+                {
+                    <li class='nav-item'><a class='nav-link' href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a></li>
+                }
+                else
+                {
+                    <li class='nav-item'>
+                        <a class="nav-link" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a>
+                        @Model.UpdateTempNode(node) <partial name="Bs5NavigationNodeChildTreePartial" model="@Model" />
+                    </li>
+                }
+            }
+        </ul>
+    </nav>
+}

src/cloudscribe.Web.Navigation/Views/Shared/Components/Navigation/Bs5SideNav.cshtml

@@ -0,0 +1,27 @@
+@using cloudscribe.Web.Navigation
+@using System.Text
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<cloudscribe.Web.Navigation.MenuResources> sr
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@model NavigationViewModel
+@if (await Model.HasVisibleChildren(Model.StartingNode))
+{
+    <ul class="nav nav-pills flex-column" id="side-menu">
+        @foreach (var node in Model.StartingNode.Children)
+        {
+            if (! await Model.ShouldAllowView(node)) { continue; }
+            if (! await Model.HasVisibleChildren(node))
+            {
+                <li class="nav-item"><a class="nav-link @(node.EqualsNode(Model.CurrentNode) ? "active" : "")" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a></li>
+            }
+            else
+            {
+                <li class="nav-item">
+                    <a class="nav-link @(node.EqualsNode(Model.CurrentNode) ? "active" : "")" href="@Url.Content(Model.AdjustUrl(node))">@Html.Raw(Model.GetIcon(node.Value))@sr[Model.AdjustText(node)]</a>
+                    @Model.UpdateTempNode(node)
+                    <partial name="Bs5SideNavPartial" model="@Model" />
+                </li>
+            }
+        }
+    </ul>
+}

src/cloudscribe.Web.Navigation/cloudscribe.Web.Navigation.csproj

@@ -2,7 +2,7 @@
 
   <PropertyGroup>
     <Description>an ASP.NET Core viewcomponent for menus and breadcrumbs</Description>
-    <Version>5.0.0</Version>
+    <Version>5.0.1</Version>
     <TargetFramework>net5.0</TargetFramework>
     <Authors>Joe Audette</Authors>
     <AddRazorSupportForMvc>true</AddRazorSupportForMvc>