From fc6d4b02d639fbbc65a28bcb953c30e06353b63f Mon Sep 17 00:00:00 2001
From: maurofmferrao <maurofmferrao@gmail.com>
Date: Fri, 1 Nov 2024 15:07:08 +0000
Subject: [PATCH] CMS navigation menu: Add active class relates to
 xibosignage/xibo#3526

---
 ui/src/core/xibo-cms.js             | 14 ++++++++++++++
 web/theme/compact/css/dashboard.css | 10 ++++++++++
 web/theme/default/css/dashboard.css | 10 ++++++++++
 3 files changed, 34 insertions(+)

diff --git a/ui/src/core/xibo-cms.js b/ui/src/core/xibo-cms.js
index 001badd5f8..d5179a48db 100644
--- a/ui/src/core/xibo-cms.js
+++ b/ui/src/core/xibo-cms.js
@@ -73,6 +73,20 @@ $(function() {
     }());
   }
 
+  // Highlight navigation
+  const $sideBarWrapperScroll = $('#sidebar-wrapper ul.sidebar');
+  const $selectedMenu = $sideBarWrapperScroll.find('li.sidebar-list a[href="' +
+    window.location.pathname +
+    '"]').addClass('sidebar-list-selected');
+
+  // Scroll into view if needed
+  if (
+    $selectedMenu.offset().top + $selectedMenu.height() >
+    $sideBarWrapperScroll.height() - $sideBarWrapperScroll[0].scrollTop
+  ) {
+    $selectedMenu[0].scrollIntoView();
+  }
+
   // Every minute
   setInterval('XiboPing(\'' + clockUrl + '\')', 1000 * 60);
 
diff --git a/web/theme/compact/css/dashboard.css b/web/theme/compact/css/dashboard.css
index d271b85cfa..7f1b107d6c 100644
--- a/web/theme/compact/css/dashboard.css
+++ b/web/theme/compact/css/dashboard.css
@@ -131,6 +131,12 @@ ul.sidebar .sidebar-list a {
 ul.sidebar .sidebar-list a:hover {
   color: #fff;
   border-left: 3px solid #e99d1a;
+  text-indent: 13px;
+}
+ul.sidebar .sidebar-list a.sidebar-list-selected {
+  color: #fff;
+  border-left: 3px solid #e99d1a;
+  text-indent: 13px;
 }
 #page-wrapper:not(.active) ul.sidebar .sidebar-list a:hover span {
   border-left: 3px solid #e99d1a;
@@ -421,6 +427,10 @@ ul.sidebar .sidebar-list a:hover,
   /* Sidebar header and footer color */
   background: #273759;
 }
+.sidebar-list a.sidebar-list-selected {
+  /* Sidebar selected */
+  background: #2c3d63;
+}
 #sidebar-wrapper {
   /* Sidebar background color */
   background: #30426a;
diff --git a/web/theme/default/css/dashboard.css b/web/theme/default/css/dashboard.css
index 6facaf5cdf..79ea657bbd 100644
--- a/web/theme/default/css/dashboard.css
+++ b/web/theme/default/css/dashboard.css
@@ -133,6 +133,12 @@ ul.sidebar .sidebar-list a {
 ul.sidebar .sidebar-list a:hover {
   color: #fff;
   border-left: 3px solid #e99d1a;
+  text-indent: 13px;
+}
+ul.sidebar .sidebar-list a.sidebar-list-selected {
+  color: #fff;
+  border-left: 3px solid #e99d1a;
+  text-indent: 13px;
 }
 #page-wrapper:not(.active) ul.sidebar .sidebar-list a:hover span {
   border-left: 3px solid #e99d1a;
@@ -417,6 +423,10 @@ ul.sidebar .sidebar-list a:hover,
   /* Sidebar header and footer color */
   background: #273759;
 }
+.sidebar-list a.sidebar-list-selected {
+  /* Sidebar selected */
+  background: #2c3d63;
+}
 #sidebar-wrapper {
   /* Sidebar background color */
   background: #30426a;