diff --git a/lib/zin/wg/mainnavbar/js/v1.js b/lib/zin/wg/mainnavbar/js/v1.js
index da7725bfa5..6484fb8b53 100644
--- a/lib/zin/wg/mainnavbar/js/v1.js
+++ b/lib/zin/wg/mainnavbar/js/v1.js
@@ -1,23 +1,35 @@
-const allMainNavbarItemIDs = [];
+/**
+ * @type {string[]}
+ */
+const allMainNavbarItemNames = [];
+
+/**
+ * @type {Map<string, any>}
+ */
 const allMainNavbarItemMap = new Map();
 
 $(document).ready(
     function()
     {
-        allMainNavbarItemIDs.length = 0;
+        allMainNavbarItemNames.length = 0;
         allMainNavbarItemMap.clear();
 
         if (typeof allMainNavbarItems !== 'undefined')
         {
             for(const item of allMainNavbarItems)
             {
-                allMainNavbarItemIDs.push(item['data-id']);
+                allMainNavbarItemNames.push(item['data-id']);
                 allMainNavbarItemMap.set(item['data-id'], item);
             }
         }
     }
 );
 
+/**
+ * Get current main navbar items data.
+ *
+ * @returns {Array<{name: string; order: number;}>}
+ */
 function getCurrentMainNavbarItems()
 {
     const items = [];
@@ -38,30 +50,42 @@ function getCurrentMainNavbarItems()
     return items;
 }
 
+/**
+ * Generate main menu nav items to be added.
+ *
+ * @param {(name: string) => void} onClick
+ * @returns {Array<{text: string; onClick: () => void;}>}
+ */
 function generateAddMainNavbarItems(onClick)
 {
     const items = [];
     const allMainNavbarItemIDSet = new Set(allMainNavbarItemMap.keys());
     const curMainNavbarItems = getCurrentMainNavbarItems();
-    for(const id of curMainNavbarItems)
+    for(const {name} of curMainNavbarItems)
     {
-        allMainNavbarItemIDSet.delete(id);
+        allMainNavbarItemIDSet.delete(name);
     }
 
     if(allMainNavbarItemIDSet.size === 0) return items;
-    for(const id of allMainNavbarItemIDSet)
+    for(const name of allMainNavbarItemIDSet)
     {
-        const item = allMainNavbarItemMap.get(id);
+        const item = allMainNavbarItemMap.get(name);
         items.push(
             {
                 text: item.text,
-                onClick: () => onClick(id),
+                onClick: () => onClick(name),
             }
         );
     }
     return items;
 }
 
+/**
+ * Checks whether the current navbar item can be hidden.
+ *
+ * @param {Cash} $item
+ * @returns {boolean}
+ */
 function canHideCurrentNavbar($item)
 {
     if($item.is('.active')) return false;
@@ -84,8 +108,8 @@ $(document).on(
         const $li          = $item.closest('li');
         const menu         = $item.data('group');
         const customUrl    = $.createLink('custom', 'ajaxSetMenu');
-        const itemsToAdded = generateAddMainNavbarItems((id) => {
-            const item = allMainNavbarItemMap.get(id);
+        const itemsToAdded = generateAddMainNavbarItems((name) => {
+            const item = allMainNavbarItemMap.get(name);
             const $a = $('<a></a>')
                 .attr('href', item.url)
                 .attr('data-id', item['data-id'])
diff --git a/lib/zin/wg/navbar/js/v1.js b/lib/zin/wg/navbar/js/v1.js
index 73bf707475..8b679f04ca 100644
--- a/lib/zin/wg/navbar/js/v1.js
+++ b/lib/zin/wg/navbar/js/v1.js
@@ -1,35 +1,40 @@
-const allNavbarItemIDs = [];
+/**
+ * @type {string[]}
+ */
+const allNavbarItemNames = [];
+
+/**
+ * @type {Map<string, any>}
+ */
 const allNavbarItemMap = new Map();
 
 $(document).ready(
     function()
     {
-        allNavbarItemIDs.length = 0;
+        allNavbarItemNames.length = 0;
         allNavbarItemMap.clear();
 
         for(const item of allNavbarItems)
         {
             if(item.type === 'divider')
             {
-                allNavbarItemIDs.push('divider');
+                allNavbarItemNames.push('divider');
                 continue;
             }
 
-            const id = item['data-id'] || item.id;
+            const name = item['data-id'] || item.id;
 
-            // if (item.type === 'dropdown')
-            // {
-            //     allNavbarItemIDs.push(item.id);
-            //     allNavbarItemMap.set(item.id, item);
-            //     continue;
-            // }
-
-            allNavbarItemIDs.push(id);
-            allNavbarItemMap.set(id, item);
+            allNavbarItemNames.push(name);
+            allNavbarItemMap.set(name, item);
         }
     }
 );
 
+/**
+ * Get current navbar items data.
+ *
+ * @returns {Array<{name: string; order: number;}>}
+ */
 function getCurrentNavbarItems()
 {
     const items = [];
@@ -45,17 +50,17 @@ function getCurrentNavbarItems()
                     order: index * 5
                 }
             );
-
-            // if($elm.is('.nav-dropdown'))
-            // {
-            //     items[index] = $a.prop('id');
-            //     return;
-            // }
         }
     );
     return items;
 }
 
+/**
+ * Generate navbar items to be added.
+ *
+ * @param {(item: string) => void} onClick click handler of navbar item.
+ * @returns {Array<{text: string; onClick: () => void;}>}
+ */
 function generateAddNavbarItems(onClick)
 {
     const customUrl = $.createLink('custom', 'ajaxSetMenu');
@@ -74,21 +79,21 @@ function generateAddNavbarItems(onClick)
 
     const allNavbarItemIDSet = new Set(allNavbarItemMap.keys());
     const curNavbarItems = getCurrentNavbarItems();
-    for(const id of curNavbarItems)
+    for(const {name} of curNavbarItems)
     {
-        if(id === 'divider') continue;
-        allNavbarItemIDSet.delete(id);
+        if(name === 'divider') continue;
+        allNavbarItemIDSet.delete(name);
     }
 
     if(allNavbarItemIDSet.size === 0) return items;
-    for(const id of allNavbarItemIDSet)
+    for(const name of allNavbarItemIDSet)
     {
-        const item = allNavbarItemMap.get(id);
+        const item = allNavbarItemMap.get(name);
         items.push(
             {
                 text: item.text,
                 onClick: () => {
-                    onClick(id);
+                    onClick(name);
                     const items = getCurrentNavbarItems();
                     const app   = $.apps.getLastApp().code;
                     const menu  = getMenuName(items, app);
@@ -100,6 +105,12 @@ function generateAddNavbarItems(onClick)
     return items;
 }
 
+/**
+ * Checks whether the current navbar item can be hidden.
+ *
+ * @param {Cash} $item
+ * @returns {boolean}
+ */
 function canHideCurrentNavbar($item)
 {
     if($item.is('.nav-divider')) return true;
@@ -112,6 +123,13 @@ function canHideCurrentNavbar($item)
     return true;
 }
 
+/**
+ * Get menu name by items and app.
+ *
+ * @param {Array<{name: string; order: number;}>} items
+ * @param {string} app
+ * @returns {string}
+ */
 function getMenuName(items, app)
 {
     const isHomeMenu = items.length <= 3 && ['program', 'project', 'product', 'execution'].includes(app);
@@ -179,10 +197,10 @@ $(document).on(
             },
             {
                 text: langData.add,
-                items: generateAddNavbarItems((id) => {
-                    if(id === 'divider') return $li.after('<li class="nav-divider item divider"></li>');
+                items: generateAddNavbarItems((name) => {
+                    if(name === 'divider') return $li.after('<li class="nav-divider item divider"></li>');
 
-                    const item = allNavbarItemMap.get(id);
+                    const item = allNavbarItemMap.get(name);
                     const $a = $('<a></a>')
                         .attr('href', item.url)
                         .attr('target', item.target)
diff --git a/module/index/js/index.ui.js b/module/index/js/index.ui.js
index ed1d88c5bf..9de7c7587b 100644
--- a/module/index/js/index.ui.js
+++ b/module/index/js/index.ui.js
@@ -819,6 +819,11 @@ setTimeout(refreshMenu, 500);
 $(document).on('click', '.menu-toggle', () => toggleMenu());
 toggleMenu(!$('body').hasClass('hide-menu'));
 
+/**
+ * Get current menu nav data.
+ *
+ * @returns {Array<{name: string; order: number;}>}
+ */
 function getMenuNavData()
 {
     const data = [];
@@ -835,24 +840,29 @@ function getMenuNavData()
     return data;
 }
 
+/**
+ * Generate menu nav items to be added.
+ *
+ * @param {(item: string) => void} onClick click handler of menu item.
+ * @returns {Array<{icon: string; text: string; onClick: () => void;}>}
+ */
 function generateAddMenuNavItems(onClick)
 {
     const customUrl = $.createLink('custom', 'ajaxSetMenu');
+    const data = getMenuNavData();
     const items = [
         {
             icon: 'icon-minus',
             text: langData.divider,
             onClick: () => {
                 onClick('divider');
-                const data = getMenuNavData();
                 $.ajaxSubmit({url: customUrl, data: {menu: 'nav', items: JSON.stringify(data)}});
             }
         }
     ];
 
     const allAppCodeSet = new Set(allAppsItemsMap.keys());
-    const data = getMenuNavData();
-    for(const name of data)
+    for(const {name} of data)
     {
         if(name === 'divider') continue;
         allAppCodeSet.delete(name);
@@ -909,7 +919,7 @@ $(document).on('contextmenu', '#menuNav .divider', function(event)
                             animation: 150,
                             ghostClass: 'bg-primary-pale',
                         }
-                    )
+                    );
                 }
             }
         );
@@ -1275,6 +1285,12 @@ void function generateAllAppsItemsMap() {
     }
 }();
 
+/**
+ * Get icon and title of app item.
+ *
+ * @param {string} name app name
+ * @returns {[string, string]}
+ */
 function getAppItemIconAndTitle(name)
 {
     if(!allAppsItemsMap.has(name)) return[];
@@ -1292,6 +1308,12 @@ function getAppItemIconAndTitle(name)
     return [];
 }
 
+/**
+ * Add menu item to #mainNav callback, used by generateAddMenuNavItems.
+ *
+ * @param {Cash} $li menu item li
+ * @returns {(name: string) => void}
+ */
 function addMenuToMainNavCb($li) {
     return (name) => {
         if(name === 'divider') return $li.after('<li class="divider"></li>');