feat: added a dropdown menu under avatar (#1129)

closes #1031
open-sauced · Aug 20, 2021 · fe4df73 · fe4df73
1 parent 097dfaa
commit fe4df73
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 10 deletions.
diff --git a/src/components/DropdownMenu.js b/src/components/DropdownMenu.js
@@ -0,0 +1,37 @@
+import React from "react";
+import {SubtleLink} from "../styles/Typography";
+import {DropdownMenuCard} from "../styles/Card";
+import {getAppVersion} from "../lib/appVersion";
+
+function DropdownMenu({forwardRef, user, _logOutRedirect}) {
+  return (
+    <DropdownMenuCard ref={forwardRef}>
+      <li>
+        <SubtleLink
+          tabIndex={0}
+          className="menu-link"
+          href={`https://github.com/${user.login}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {user.login}
+        </SubtleLink>
+      </li>
+      <li>
+        <SubtleLink
+          tabIndex={0}
+          className="menu-link"
+          href={`https://github.com/open-sauced/open-sauced/releases/tag/v${getAppVersion()}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          v{getAppVersion()}
+        </SubtleLink>
+      </li>
+      <li>
+        <SubtleLink tabIndex={0} className="menu-link" onClick={_logOutRedirect}>Logout</SubtleLink>
+      </li>
+    </DropdownMenuCard>
+  );
+}
+export default DropdownMenu;
diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -1,10 +1,11 @@
-import React, {useState} from "react";
+import React, {useState, useRef, useEffect} from "react";
 import {logo} from "../logos";
 import {FloatLeftMobileNav, FloatRight} from "../styles/Grid";
 import {SubtleLink} from "../styles/Typography";
 import {AppNav, HomeNav} from "../styles/Header";
 import {SpaceBetween, Logo} from "../styles/Grid";
 import ProfileAvatar from "../styles/ProfileAvatar";
+import DropdownMenu from "./DropdownMenu";
 import AdminStatsBar from "./AdminStatsBar";
 import Hotkeys from "react-hot-keys";
 import {useHistory, Link} from "react-router-dom";
@@ -72,7 +73,7 @@ function LeftSide({isLoggedIn, user, handleLogIn, handleLogOut}) {
         <li>
           {isLoggedIn ? (
             <div>
-              <SubtleLink tabIndex={0} onClick={_logOutRedirect}>Logout</SubtleLink>
+              <SubtleLink className="mobile-link" tabIndex={0} onClick={_logOutRedirect}>Logout</SubtleLink>
             </div>
           ) : (
             <div>
@@ -85,15 +86,50 @@ function LeftSide({isLoggedIn, user, handleLogIn, handleLogOut}) {
   );
 }
 
-function RightSide({user}) {
+function RightSide({user, handleLogOut}) {
+  const [drawer, setDrawerOpen] = useState(false);
+
+  const history = useHistory();
+  const _logOutRedirect = () => {
+    handleLogOut();
+    history.push("/");
+  };
+
+  const dropdownMenuRef = useRef(null);
+  const ProfileAvatarRef = useRef(null);
+
+  const handleClickOutside = (event) => {
+    if (dropdownMenuRef.current && !dropdownMenuRef.current.contains(event.target)) {
+      if (ProfileAvatarRef.current && !ProfileAvatarRef.current.contains(event.target)) {
+        setDrawerOpen(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      setDrawerOpen(false);
+    };
+  }, []);
+
   return (
     <FloatRight>
       <SpaceBetween>
         <ThemeButtonGroup />
         {user && (
-          <SubtleLink alt="user login name" className="nav-link" href={`https://github.com/${user.login}`}>
-            <ProfileAvatar alt="avatar" src={`https://github.com/${user.login}.png`} />
-          </SubtleLink>
+          <div className="show-avatar">
+            <ProfileAvatar alt="avatar" src={`https://github.com/${user.login}.png`} title={`${user.login}`}
+              onClick={() => setDrawerOpen(!drawer)} ref={ProfileAvatarRef} />
+            {drawer &&
+            <DropdownMenu
+              forwardRef={dropdownMenuRef}
+              user={user}
+              _logOutRedirect={_logOutRedirect}
+            />
+            }
+          </div>
         )}
       </SpaceBetween>
     </FloatRight>
@@ -121,7 +157,7 @@ function Header({user, handleLogOut, handleLogIn, isAdmin, isLoggedIn}) {
       )}
       <Nav>
         <LeftSide handleLogOut={handleLogOut} handleLogIn={handleLogIn} isLoggedIn={isLoggedIn} user={user} />
-        <RightSide user={user} />
+        <RightSide user={user} handleLogOut={handleLogOut} />
       </Nav>
     </div>
   );

diff --git a/src/styles/Card.js b/src/styles/Card.js
@@ -270,6 +270,42 @@ const OnBoardStyle = styled(Card)`
   }
 `;
 
+const DropdownMenuCard = styled(Card)`
+  position: absolute;
+  box-shadow: 0px 0px 8px rgba(214, 214, 214, 0.78);
+  padding: 0 20px; 
+  width: fit-content;
+  right: 15px;
+  display: flex; 
+  flex-direction: column;
+  z-index: 1;
+ 
+  li {
+    padding: 0px;
+    line-height: 47px;
+    border-bottom: 1px solid rgba(215, 215, 215, 0.17);
+    &:last-child {
+      border-bottom: 0px;
+    }
+  }
+
+  .menu-link{
+    color: ${colors.grey} !important;
+    padding: ${size.tiny} ${size.small} ${size.tiny} ${size.micro};
+    &:hover {
+        color:${colors.lightGrey} !important;
+      }
+  }
+    body.dark & {
+    .menu-link {
+      color: ${colors.offWhite} !important;
+      &:hover {
+        color:${colors.lightGrey} !important;
+      }
+    }
+  }
+`;
+
 export {
   Card,
   ButtonBoard,
@@ -280,4 +316,5 @@ export {
   HintStyle,
   OnBoardStyle,
   RepositoryContext,
+  DropdownMenuCard
 };
diff --git a/src/styles/Header/HomeNav.js b/src/styles/Header/HomeNav.js
@@ -34,11 +34,20 @@ const Container = styled.nav`
     margin-right: ${size.micro};
   }
 
+  .mobile-link {
+    display: none;
+  }
+
   ${MEDIA.TABLET`
     .nav-link {
       display: none;
     }
-
+    .show-avatar {
+      display: none;
+    }
+    .mobile-link {
+      display: inline-block;
+    }
     ul {
       padding: 2px;
     }

diff --git a/src/styles/ProfileAvatar.js b/src/styles/ProfileAvatar.js
@@ -8,6 +8,7 @@ const ProfileAvatar = styled.img`
   border-radius: 5px;
   margin-right: 10px;
   border: 2px solid white;
+  cursor: pointer;
 `;
 
 export default ProfileAvatar;
diff --git a/stories/2-Card.stories.js b/stories/2-Card.stories.js
@@ -1,9 +1,9 @@
 import React from "react";
 import Card from "../src/components/Card";
 import Button, {InputButton} from "../src/styles/Button";
-import {AccentLink, MicroFont} from "../src/styles/Typography";
+import {AccentLink, MicroFont, SubtleLink} from "../src/styles/Typography";
 import {PrimaryWithText} from "./1-Button.stories";
-import {CardPadding, CardHeader, ContextStyle, HintStyle} from "../src/styles/Card";
+import {CardPadding, CardHeader, ContextStyle, HintStyle, DropdownMenuCard} from "../src/styles/Card";
 import Avatar from "../src/styles/Avatar";
 import Input from "../src/styles/Input";
 import {Container} from "../src/styles/ListItem";
@@ -49,6 +49,20 @@ export const ContextCard = () => (
   </ContextStyle>
 );
 
+export const DropdownMenu = () => (
+  <DropdownMenuCard>
+    <li>
+      <SubtleLink href="#" className="menu-link">OpenSaucedUser</SubtleLink>
+    </li>
+    <li>
+      <SubtleLink href="#" className="menu-link">v0.01</SubtleLink>
+    </li>
+    <li>
+      <SubtleLink href="#"className="menu-link">Logout</SubtleLink>
+    </li>
+  </DropdownMenuCard>
+);
+
 export const HintCard = () => (
   <React.Fragment>
     <HintStyle style={{minWidth: "33%", width: "33%"}}>