NavMenu adapted to Popup changes

src/common/NavBar/NavMenu/NavMenu.js

@@ -13,17 +13,27 @@ const NavMenu = ({ className }) => {
     const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const user = useUser();
+    const popupLabelOnClick = React.useCallback((event) => {
+        if (!event.nativeEvent.togglePopupPrevented) {
+            toggleMenu();
+        }
+    }, [toggleMenu]);
+    const popupMenuOnClick = React.useCallback((event) => {
+        event.nativeEvent.togglePopupPrevented = true;
+    }, []);
     return (
         <Popup
             open={menuOpen}
+            direction={'bottom'}
             onCloseRequest={closeMenu}
-            renderLabel={(ref) => (
-                <Button ref={ref} className={classnames(className, styles['nav-menu-label-container'], { 'active': menuOpen })} tabIndex={-1} onClick={toggleMenu}>
+            renderLabel={({ ref, className: popupLabelClassName, children }) => (
+                <Button ref={ref} className={classnames(className, popupLabelClassName, styles['nav-menu-label-container'], { 'active': menuOpen })} tabIndex={-1} onClick={popupLabelOnClick}>
                     <Icon className={styles['icon']} icon={'ic_more'} />
+                    {children}
                 </Button>
             )}
             renderMenu={() => (
-                <div className={styles['nav-menu-container']}>
+                <div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
                     <div className={styles['user-info-container']}>
                         <div
                             className={styles['avatar-container']}

src/common/NavBar/NavMenu/styles.less

@@ -18,11 +18,9 @@
         height: 50%;
         fill: var(--color-surfacelighter);
     }
-}
 
-.nav-menu-container {
-    min-width: 20rem;
-    max-width: 30rem;
+    .nav-menu-container {
+        width: 20rem;
         background-color: var(--color-background);
 
         .user-info-container {
@@ -117,4 +115,5 @@
                 }
             }
         }
+    }
 }

src/common/NavBar/styles.less

@@ -5,6 +5,7 @@
     align-items: center;
     height: var(--nav-bar-size);
     background-color: var(--color-secondarydark);
+    overflow: visible;
 
     .nav-tab-button {
         flex: none;