From 53a12d72ca78bc3d806362b6c9fd1693d5f04a0b Mon Sep 17 00:00:00 2001
From: Engincan VESKE <enginveske@gmail.com>
Date: Tue, 20 Sep 2022 17:26:06 +0300
Subject: [PATCH] docs: Add breadcrumb to document page header

---
 .../Pages/Documents/Project/Index.cshtml      | 33 ++-----------------
 .../Pages/Documents/Project/index.js          | 23 ++++++++++++-
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 419c232e36..4d049e684b 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -195,43 +195,14 @@
 
     @if (Model.Document != null)
     {
-        // TODO: get elements
         <div class="docs-content">
             <div class="top-container mb-3">
                 <div class="w-100">
                     <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mCustomScrollbar-1">
-                        <ol class="breadcrumb ">
+                        <ol class="breadcrumb" id="document-node-wrapper">
                             <li class="breadcrumb-item">
-                                <a href="#"> ABP Framework</a>
+                                <a href="/"><i class="fa fa-home"></i></a>
                             </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Documents</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Infrastructure</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Background Jobs</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Documents</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Infrastructure</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Background Jobs</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Documents</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Infrastructure</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Background Jobs</a>
-                            </li>
-                            <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
                         </ol>
                     </nav>
                     <div class="doc-social-btns">
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
index 69cfa371d8..51621c4d80 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
@@ -1,5 +1,5 @@
 (function ($) {
-    $(function () {
+    $(function () {        
         var initNavigationFilter = function (navigationContainerId) {
             var $navigation = $('#' + navigationContainerId);
 
@@ -254,6 +254,25 @@
             setQueryString();
         };
 
+        var initDocumentNodeBreadcrumb = function (){
+            var selectedTreeRoot = $("li.nav-header.selected-tree")[0];
+            if(selectedTreeRoot)
+            {
+                var $selectedTreeRoot = $(selectedTreeRoot);
+                var firstAnchor = $selectedTreeRoot.find("a");
+
+                var documentNodeNames = $("#document-node-wrapper");
+                documentNodeNames.append('<li class="breadcrumb-item"><a href="' + firstAnchor.attr("href") + '">' + firstAnchor.html() + '</a></li>');
+
+                var selectedTreeItems = $selectedTreeRoot.find("ul.nav-list > li.selected-tree");
+                for (let i = 0; i < selectedTreeItems.length; i++)
+                {
+                    var anchorItem = $(selectedTreeItems[i]).find("a");
+                    documentNodeNames.append('<li class="breadcrumb-item"><a href="' + anchorItem.attr("href") + '">' + anchorItem.html() + '</a></li>');
+                }
+            }
+        };
+        
         initNavigationFilter('sidebar-scroll');
 
         initAnchorTags('.docs-page .docs-body');
@@ -261,5 +280,7 @@
         initSocialShareLinks();
 
         initSections();
+
+        initDocumentNodeBreadcrumb();
     });
 })(jQuery);