feat: visually denote active persistent menu item

dimagi · Aug 29, 2024 · 12d01d1 · 12d01d1
1 parent 772c987
commit 12d01d1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/controller.js
@@ -159,7 +159,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", [
         if (!appPreview && menuResponse.persistentMenu) {
             FormplayerFrontend.regions.getRegion('persistentMenu').show(
                 views.PersistentMenuView({
-                    collection: _toMenuCommands(menuResponse.persistentMenu, []),
+                    collection: _toMenuCommands(menuResponse.persistentMenu, [], menuResponse.selections),
                 }).render());
         } else {
             FormplayerFrontend.regions.getRegion('persistentMenu').empty();
@@ -170,7 +170,7 @@ hqDefine("cloudcare/js/formplayer/menus/controller", [
         }
     };
 
-    var _toMenuCommands = function (menuCommands, priorSelections) {
+    var _toMenuCommands = function (menuCommands, priorSelections, activeSelection) {
         return new Backbone.Collection(_.map(menuCommands, function (menuCommand) {
             const command = _.pick(menuCommand, [
                 'index',
@@ -181,7 +181,10 @@ hqDefine("cloudcare/js/formplayer/menus/controller", [
             ]);
             // Store an array of the commands needed to navigate to each nested menu item
             command.selections = priorSelections.concat([command.index]);
-            command.commands = _toMenuCommands(command.commands, command.selections);
+            if (JSON.stringify(command.selections) === JSON.stringify(activeSelection)) {
+                command.isActiveSelection = true;
+            }
+            command.commands = _toMenuCommands(command.commands, command.selections, activeSelection);
             return new Backbone.Model(command);
         }));
     };

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -1499,10 +1499,11 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
         templateContext: function () {
             const appId = formplayerUtils.currentUrlToObject().appId,
                 imageUri = this.model.get('imageUri'),
-                  icons = {JUMP: 'fa-pencil', NEXT: 'fa-regular fa-folder', ENTITY_SELECT: 'fa-list-ul'};
+                icons = {JUMP: 'fa-pencil', NEXT: 'fa-regular fa-folder', ENTITY_SELECT: 'fa-list-ul'};
             return {
                 imageUri: imageUri ? FormplayerFrontend.getChannel().request('resourceMap', imageUri, appId) : "",
                 iconClass: icons[this.model.get('navigationState')] || 'fa-arrow-up-right-from-square',
+                isActive: this.model.get('isActiveSelection'),
             };
         },
         onRender: function () {

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
@@ -41,7 +41,7 @@ <h5 class="offcanvas-title position-relative" id="persistent-menu-label">
     <% } else { %>
       <i class="fa <%- iconClass %> persistent-menu-image" aria-hidden="true"></i>
     <% } %>
-    <a class="align-middle stretched-link text-reset" href="#"
+    <a class="align-middle stretched-link text-reset <%= isActive ? 'fw-bold' : '' %>" href="#"
        data-bs-toggle="offcanvas" data-bs-target="#persistent-menu-container">
       <%- displayText %>
     </a>