diff --git a/src/common/NavBar/UserMenu/UserMenu.js b/src/common/NavBar/UserMenu/UserMenu.js index 7d4b7d6b1..354484ffc 100644 --- a/src/common/NavBar/UserMenu/UserMenu.js +++ b/src/common/NavBar/UserMenu/UserMenu.js @@ -7,6 +7,13 @@ const { Input } = require('stremio-navigation'); const styles = require('./styles'); const UserMenu = ({ className, email, avatar, logout }) => { + const [active, setActive] = React.useState(false); + const onPopupOpen = React.useCallback(() => { + setActive(true); + }, []); + const onPopupClose = React.useCallback(() => { + setActive(false); + }, []); const [fullscreen, setFullscreen] = React.useState(document.fullscreenElement instanceof HTMLElement); const toggleFullscreen = React.useCallback(() => { if (fullscreen) { @@ -26,9 +33,9 @@ const UserMenu = ({ className, email, avatar, logout }) => { }, []); return ( - + - + diff --git a/src/common/NavBar/UserMenu/styles.less b/src/common/NavBar/UserMenu/styles.less index 24bc4ee93..aca602051 100644 --- a/src/common/NavBar/UserMenu/styles.less +++ b/src/common/NavBar/UserMenu/styles.less @@ -8,8 +8,12 @@ overflow: hidden; cursor: pointer; - &:hover, &:focus { - background-color: var(--color-backgrounddark20); + &:hover { + background-color: var(--color-secondary); + } + + &:global(.active) { + background-color: var(--color-background); } .icon {