basic UserMenu component reimplemented

src/common/NavBar/NavBar.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const NavBarButton = require('./NavBarButton');
+const UserMenu = require('./UserMenu');
 const styles = require('./styles');
 
 const onBackButtonClick = () => {
@@ -44,7 +45,7 @@ const NavBar = ({ backButton, tabs, title, searchInput, userMenu }) => (
         }
         {
             userMenu ?
-                <div className={styles['user-menu']} />
+                <UserMenu className={styles['user-menu']} />
                 :
                 null
         }

src/common/NavBar/UserMenu/UserMenu.js

@@ -1,25 +1,22 @@
-import React, { PureComponent } from 'react';
-import classnames from 'classnames';
-import Icon from 'stremio-icons/dom';
-import { Popup } from 'stremio-common';
-import styles from './styles';
+const React = require('react');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const Popup = require('../../Popup');
+const { Input } = require('stremio-navigation');
+const styles = require('./styles');
 
-class UserMenu extends PureComponent {
-    render() {
-        return (
-            <Popup>
-                <Popup.Label>
-                    <button className={classnames(this.props.className, styles['popup-label-container'])}>
-                        <Icon className={classnames(styles['user-icon'], styles['icon'])} icon={'ic_user'} />
-                        <Icon className={classnames(styles['arrow-icon'], styles['icon'])} icon={'ic_arrow_down'} />
-                    </button>
-                </Popup.Label>
-                <Popup.Menu width={300}>
-                    <div style={{ background: 'red', width: '100%', height: 300 }}>popup</div>
-                </Popup.Menu>
-            </Popup>
-        );
-    }
-}
+const UserMenu = ({ className }) => (
+    <Popup>
+        <Popup.Label>
+            <Input className={classnames(className, styles['user-menu-button'])} type={'button'}>
+                <Icon className={classnames(styles['icon'], styles['user-icon'])} icon={'ic_user'} />
+                <Icon className={classnames(styles['icon'], styles['arrow-icon'])} icon={'ic_arrow_down'} />
+            </Input>
+        </Popup.Label>
+        <Popup.Menu>
+            <div style={{ background: 'red', width: 400, height: 300 }}>userpanel</div>
+        </Popup.Menu>
+    </Popup>
+);
 
-export default UserMenu;
+module.exports = UserMenu;

src/common/NavBar/UserMenu/index.js

@@ -1,3 +1,3 @@
-import UserMenu from './UserMenu';
+const UserMenu = require('./UserMenu');
 
-export default UserMenu;
+module.exports = UserMenu;

src/common/NavBar/UserMenu/styles.less

@@ -1,23 +1,22 @@
-
-@import 'constants';
-.popup-label-container {
+.user-menu-button {
+    text-align: center;
+    overflow: hidden;
     cursor: pointer;
-    outline: none;
-    background-color: transparent;
-    .icon {
-        height: @nav-bar-height;
-        fill: var(--color-surfacelighter80)
-    }
-    .user-icon {
-        width: 40%;
-    }
-    .arrow-icon {
-        width: 16%;
-    }
-    &:hover, &.active {
+
+    &:hover, &:focus {
         background-color: var(--color-backgrounddark20);
-        .icon {
-           fill: var(--color-surfacelighter);
+    }
+
+    .icon {
+        height: 100%;
+        fill: var(--color-surfacelighter);
+
+        &.user-icon {
+            width: 40%;
+        }
+
+        &.arrow-icon {
+            width: 16%;
         }
     }
 }