CMS navigation menu: Add active class (#2786)

relates to xibosignage/xibo#3526
xibosignage · Nov 6, 2024 · 164079b · 164079b
1 parent 1c19d67
commit 164079b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;