pkp/pkp-lib#5199 Set the current page on the top menu - OPS 3.4

plugins/themes/default/DefaultThemePlugin.php

@@ -3,8 +3,8 @@
 /**
  * @file plugins/themes/default/DefaultThemePlugin.php
  *
- * Copyright (c) 2014-2022 Simon Fraser University
- * Copyright (c) 2003-2022 John Willinsky
+ * Copyright (c) 2014-2024 Simon Fraser University
+ * Copyright (c) 2003-2024 John Willinsky
  * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
  *
  * @class DefaultThemePlugin
@@ -17,6 +17,8 @@
 use APP\core\Application;
 use APP\file\PublicFileManager;
 use PKP\config\Config;
+use PKP\plugins\Hook;
+
 use PKP\plugins\ThemePlugin;
 use PKP\session\SessionManager;
 
@@ -210,6 +212,8 @@ public function init()
 
         // Add navigation menu areas for this theme
         $this->addMenuArea(['primary', 'user']);
+
+        Hook::add('TemplateManager::display', [$this, 'checkCurrentPage']);
     }
 
     /**
@@ -253,6 +257,51 @@ public function getDescription()
     {
         return __('plugins.themes.default.description');
     }
+
+    /**
+     * @param $hookname string
+     * @param $args array
+     */
+    public function checkCurrentPage($hookname, $args)
+    {
+        $templateMgr = $args[0];
+        // TODO check the issue with multiple calls of the hook on settings/website
+        if (!isset($templateMgr->registered_plugins['function']['default_item_active'])) {
+            $templateMgr->registerPlugin('function', 'default_item_active', [$this, 'isActiveItem']);
+        }
+    }
+
+    /**
+     * @param $params array
+     * @param $smarty Smarty_Internal_Template
+     *
+     * @return string
+     */
+    public function isActiveItem($params, $smarty)
+    {
+        $navigationMenuItem = $params['item'];
+        $emptyMarker = '';
+        $activeMarker = ' active';
+
+        // Get URL of the current page
+        $request = $this->getRequest();
+        $currentUrl = $request->getCompleteUrl();
+        $currentPage = $request->getRequestedPage();
+
+        // Do not add an active marker if it's a dropdown menu
+        if ($navigationMenuItem->getIsChildVisible()) {
+            return $emptyMarker;
+        }
+
+        // Retrieve URL and its components for a menu item
+        $itemUrl = $navigationMenuItem->getUrl();
+
+        if ($currentUrl === $itemUrl) {
+            return $activeMarker;
+        }
+
+        return $emptyMarker;
+    }
 }
 
 if (!PKP_STRICT_MODE) {

plugins/themes/default/styles/head.less

@@ -97,7 +97,7 @@
 	position: absolute;
 	width: 100%;
 	top: 100%;
-	background:@bg-base;
+	background: @bg-base;
 	left: 0;
 	padding: @base;
 	z-index: 9999;
@@ -117,7 +117,7 @@
 
 	a {
 		display: inline-block;
-		padding: 0.125rem 0;
+		padding: 0.86rem 0;
 		color: @text-bg-base;
 		text-decoration: none;
 
@@ -128,6 +128,20 @@
 		}
 	}
 
+	@media (max-width: @screen-desktop) {
+
+		.active {
+			background-color: @bg-base-border-color;
+
+		}
+
+		.active a {
+			font-weight: bold;
+
+		}
+	}
+
+
 	#siteNav {
 		position: absolute;
 		top: 0;
@@ -358,6 +372,20 @@
 			}
 		}
 
+		// Visualy highlighting the current menu item
+		> li.active {
+			> a {
+				//background: @primary-lift;
+				border-color: @text-bg-base;
+				outline: 0;
+			}
+
+			&:hover {
+				color: @bg-base;
+				border-color: red;
+			}
+		}
+
 		// Reproduce positioning of dropdown menu from Popper.js
 		> li:hover ul {
 			position: absolute;
@@ -377,7 +405,8 @@
 		}
 
 		.dropdown-menu a:focus,
-		.dropdown-menu a:hover {
+		.dropdown-menu a:hover,
+		.dropdown-menu li.active a {
 			border-color: @primary;
 		}
 
@@ -460,13 +489,6 @@
 			will-change: transform;
 		}
 
-		> li > a,
-		> li.in_focus > a,
-		> li > a:hover,
-		> li > a:focus {
-			color: @text-bg-base;
-		}
-
 		// Align to the right edge of the container
 		> li:last-child > a {
 			margin-right: -@base;
@@ -518,4 +540,4 @@
 			}
 		}
 	}
-}
+}