diff --git a/src/gui/src/UI/Dashboard/UIDashboard.js b/src/gui/src/UI/Dashboard/UIDashboard.js index 131b8e41..8f7380f8 100644 --- a/src/gui/src/UI/Dashboard/UIDashboard.js +++ b/src/gui/src/UI/Dashboard/UIDashboard.js @@ -146,6 +146,7 @@ async function UIDashboard (options) { // User options button click handler $el_window.on('click', '.dashboard-user-btn', function (e) { const $btn = $(this); + const $chevron = $btn.find('.dashboard-user-chevron'); const pos = this.getBoundingClientRect(); // Don't open if already open @@ -153,6 +154,9 @@ async function UIDashboard (options) { return; } + // Rotate chevron to point upwards + $chevron.addClass('open'); + let items = []; // Save Session (if temp user) @@ -275,7 +279,11 @@ async function UIDashboard (options) { top: pos.top - 8, left: pos.left }, - items: menuItems + items: menuItems, + onClose: () => { + // Rotate chevron back to point downwards + $chevron.removeClass('open'); + } }); }); diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index c42ec290..92d93212 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -5626,6 +5626,11 @@ html.dark-mode .usage-table-show-less:hover { height: 16px; color: #888; flex-shrink: 0; + transition: transform 0.1s ease; +} + +.dashboard-user-chevron.open { + transform: rotate(180deg); } .dashboard-content {