implement main navs title html,js

abvw/common/main-nav-title.html

+<div id="main-ttl">
+    <div class="container">
+        <!-- breadcrumb -->
+        <nav id="mainTitleNavs" aria-label="breadcrumb">
+            <ol class="breadcrumb px-0 mb-0"></ol>
+        </nav>
+        <!-- title -->
+        <h1 id="mainTitleHeader" class="fs-14 font-weight-bold pt-sm-4 pt-2 pb-3 mb-0 lang"></h1>
+    </div>
+</div>
\ No newline at end of file

abvw/html/push-message-list.html

@@ -38,21 +38,10 @@
     
     <!-- header -->
     <div id="includedHeader"></div>
-
+    <div id="includedMainTitle"></div>
     <!-- message list -->
     <main>
         <div class="container">
-            <!-- breadcrumb -->
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb px-0 mb-0">
-                    <li class="breadcrumb-item"><a href="dashboard.html" class="text-decoration-none text-underline lang" lang="dashboard"></a></li>
-                    <li class="breadcrumb-item active lang" lang="messageListTitle" aria-current="page"><span></span></li>
-                </ol>
-            </nav>
-
-            <!-- title -->
-            <h1 class="fs-14 font-weight-bold pt-sm-4 pt-2 pb-3 mb-0 lang" lang="messageListTitle"></h1>
-
             <!-- message -->
             <ul class="card-list message-list p-0" id="messageList">
                 <li class="card mb-2 not-found d-none">

abvw/js/dashboard/dashboard.js

@@ -117,7 +117,7 @@ DASHBOARD.loadCommon = function() {
     TEMPLATE.loadHearder("#includedHeader");
     TEMPLATE.loadDashboardSetting("#includedDashboardSetting", DASHBOARD.changeSettingCallback);
     TEMPLATE.loadConfirmModal("#includedConfirmModal");
-    TEMPLATE.loadMainTitle("#includedMainTitle", "dashboard", DASHBOARD.loadMainTitleCallback);
+    TEMPLATE.loadMainNavsTitle("#includedMainTitle", "dashboard", null, DASHBOARD.loadMainTitleCallback);
 }
 
 /** Update pickup config from setting dashboard data */

abvw/js/pushMessageList/push-message-list.js

@@ -10,6 +10,16 @@ PushMessageList.baseApiUrl = CONSTANT.URL.CMS.BASE + ClientData.userInfo_account
  */
 PushMessageList.init = function() {
     TEMPLATE.loadHearder("#includedHeader");
+    const navs = [
+        {
+            titleLang: 'dashboard',
+            href: 'dashboard.html',
+        },
+        {
+            titleLang: 'messageListTitle',
+        },
+    ];
+    TEMPLATE.loadMainNavsTitle("#includedMainTitle", "messageListTitle", navs, null);
     PushMessageList.getMessageList(function(messageList) {
         PushMessageList.generateMessageListHtml(messageList.pushMessageList);
     });

abvw/js/template/template.js

@@ -57,14 +57,43 @@ TEMPLATE.loadNotificationSelect = function(elmentId, selectCallback) {
 }
 
 /**
- * load main title html to a element by id
+ * load main navs title html to a element by id
  * @param {string} elmentId - elementId where contain main title html
- * @param {string} langTitle - title lang message
+ * @param {string} titleLang - lang of title
+ * @param {Array} navs - array nav items (titleLang, href)
  */
-TEMPLATE.loadMainTitle = function(elmentId, langTitle, completeCallback) {
-    $(elmentId).load("../common/main-title.html" , function() {
-        if (langTitle) {
-            $('#mainTitleHeader').attr("lang", langTitle);
+ TEMPLATE.loadMainNavsTitle = function(elmentId, titleLang, navs, completeCallback) {
+    var titleHtmlPath = '../common/main-title.html';
+    if (navs) {
+        titleHtmlPath = '../common/main-nav-title.html';
+    }
+    $(elmentId).load(titleHtmlPath , function(data) {
+        $(elmentId).replaceWith(data);
+        if (titleLang) {
+            $('#mainTitleHeader').attr("lang", titleLang);
+        }
+        if (navs) {
+            var olElm = $('#mainTitleNavs ol');
+            for (var i = 0; i < navs.length; i++) {
+                const nav = navs[i];
+                var liElm = $('<li class="breadcrumb-item" />');
+                if (nav.href) {
+                    var aElm = $('<a class="text-decoration-none text-underline lang" />');
+                    aElm.attr('href', nav.href);
+                    if (nav.titleLang) {
+                        aElm.attr('lang', nav.titleLang);
+                    }
+                    liElm.append(aElm);
+                } else {
+                    liElm.addClass('lang');
+                    liElm.attr('aria-current', 'page');
+                    liElm.append('<span></span>');
+                    if (nav.titleLang) {
+                        liElm.attr('lang', nav.titleLang);
+                    }
+                }
+                olElm.append(liElm);
+            }
         }
         I18N.initi18n();
         if (completeCallback) {