From 342e497df332eaae4cfd9a787fe1364ffd1dc6c9 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 15 Oct 2019 11:13:44 +0300
Subject: [PATCH] NavMenu adapted to Popup changes

---
 src/common/NavBar/NavMenu/NavMenu.js  |  16 ++-
 src/common/NavBar/NavMenu/styles.less | 153 +++++++++++++-------------
 src/common/NavBar/styles.less         |   1 +
 3 files changed, 90 insertions(+), 80 deletions(-)

diff --git a/src/common/NavBar/NavMenu/NavMenu.js b/src/common/NavBar/NavMenu/NavMenu.js
index f49ddf9ec..b8126116a 100644
--- a/src/common/NavBar/NavMenu/NavMenu.js
+++ b/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']}
diff --git a/src/common/NavBar/NavMenu/styles.less b/src/common/NavBar/NavMenu/styles.less
index cf0172b0b..d9be995f3 100644
--- a/src/common/NavBar/NavMenu/styles.less
+++ b/src/common/NavBar/NavMenu/styles.less
@@ -18,101 +18,100 @@
         height: 50%;
         fill: var(--color-surfacelighter);
     }
-}
 
-.nav-menu-container {
-    min-width: 20rem;
-    max-width: 30rem;
-    background-color: var(--color-background);
+    .nav-menu-container {
+        width: 20rem;
+        background-color: var(--color-background);
 
-    .user-info-container {
-        display: grid;
-        height: 7rem;
-        grid-template-columns: 7rem 1fr;
-        grid-template-rows: 50% 50%;
-        grid-template-areas:
-            "avatar-area email-area"
-            "avatar-area logout-button-area";
+        .user-info-container {
+            display: grid;
+            height: 7rem;
+            grid-template-columns: 7rem 1fr;
+            grid-template-rows: 50% 50%;
+            grid-template-areas:
+                "avatar-area email-area"
+                "avatar-area logout-button-area";
 
-        .avatar-container {
-            grid-area: avatar-area;
-            padding: 1rem;
-            border-radius: 50%;
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-origin: content-box;
-            background-clip: content-box;
-        }
-
-        .email-container {
-            grid-area: email-area;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            padding: 1rem 1rem 0 0;
-
-            .email-label {
-                flex: 1;
-                max-height: 2.4em;
-                color: var(--color-surfacelighter);
-                user-select: text;
+            .avatar-container {
+                grid-area: avatar-area;
+                padding: 1rem;
+                border-radius: 50%;
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-origin: content-box;
+                background-clip: content-box;
             }
-        }
 
-        .logout-button-container {
-            grid-area: logout-button-area;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            padding: 0 1em 1rem 0;
+            .email-container {
+                grid-area: email-area;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                padding: 1rem 1rem 0 0;
 
-            &:hover, &:focus {
-                outline: none;
-
-                .logout-label {
+                .email-label {
+                    flex: 1;
+                    max-height: 2.4em;
                     color: var(--color-surfacelighter);
-                    text-decoration: underline;
+                    user-select: text;
                 }
             }
 
-            .logout-label {
-                flex: 1;
-                max-height: 2.4em;
-                color: var(--color-surface);
+            .logout-button-container {
+                grid-area: logout-button-area;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                padding: 0 1em 1rem 0;
+
+                &:hover, &:focus {
+                    outline: none;
+
+                    .logout-label {
+                        color: var(--color-surfacelighter);
+                        text-decoration: underline;
+                    }
+                }
+
+                .logout-label {
+                    flex: 1;
+                    max-height: 2.4em;
+                    color: var(--color-surface);
+                }
             }
         }
-    }
 
-    .nav-menu-section {
-        border-top: thin solid var(--color-surfacedark80);
+        .nav-menu-section {
+            border-top: thin solid var(--color-surfacedark80);
 
-        .nav-menu-option-container {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            height: 4rem;
+            .nav-menu-option-container {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                height: 4rem;
 
-            &:hover {
-                background-color: var(--color-surfacedarker60);
-            }
+                &:hover {
+                    background-color: var(--color-surfacedarker60);
+                }
 
-            .icon {
-                flex: none;
-                width: 1.4rem;
-                height: 1.4rem;
-                margin: 1.3rem;
-                fill: var(--color-secondarylight);
-            }
+                .icon {
+                    flex: none;
+                    width: 1.4rem;
+                    height: 1.4rem;
+                    margin: 1.3rem;
+                    fill: var(--color-secondarylight);
+                }
 
-            .nav-menu-option-label {
-                flex: 1;
-                max-height: 2.4em;
-                padding-right: 1.3rem;
-                color: var(--color-surfacelighter);
+                .nav-menu-option-label {
+                    flex: 1;
+                    max-height: 2.4em;
+                    padding-right: 1.3rem;
+                    color: var(--color-surfacelighter);
 
-                &:only-child {
-                    padding-left: 1.3rem;
+                    &:only-child {
+                        padding-left: 1.3rem;
+                    }
                 }
             }
         }
diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less
index 43a8d3d89..5cb75559e 100644
--- a/src/common/NavBar/styles.less
+++ b/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;