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;