Feature/SignoutFrontend

src/components/UI/dropdown/dropdown.module.scss

@@ -0,0 +1,143 @@
+// scss variables
+$border-color: #000000;
+$text-color-2: #000000;
+$text-color: #ffffff;
+$hover-color: #49a82e;
+$background-color: #ffffff;
+
+.userGreet {
+  color: $text-color;
+  margin: 23px;
+}
+
+.userGreet a {
+  padding: 0px;
+}
+
+.userProfilePic {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: inline;
+  vertical-align: middle;
+}
+.dropdownHeader {
+  margin: 10px;
+  cursor: pointer;
+}
+
+.userGreetMsg {
+  display: inline;
+  vertical-align: middle;
+  margin-right: 10px;
+  color: $text-color;
+}
+
+.userGreetMsg:hover {
+  color: $hover-color;
+}
+
+.myProfileWrapper {
+  padding-bottom: 15px;
+  text-align: center;
+  border-bottom: 1px solid $border-color;
+}
+
+.myProfile:hover {
+  color: $hover-color;
+}
+
+.myProfile {
+  color: $text-color-2;
+  text-decoration: none;
+}
+
+.signOutWrapper {
+  padding-top: 15px;
+  text-align: center;
+  border-top: 1px solid $border-color;
+}
+
+.signOutWrapper > button {
+  all: unset;
+  cursor: pointer;
+}
+
+.signOutWrapper button:focus-visible {
+  outline: $border-color 5px auto;
+}
+
+.signOut:hover {
+  color: $hover-color;
+  cursor: pointer;
+}
+
+.dropdownContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: $text-color-2;
+  border: 2px solid $border-color;
+  height: 100%;
+  border-radius: 8px;
+  width: 100%;
+  justify-items: center;
+}
+
+.dropDownContentWrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.dropDownContentWrapper div {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropDown {
+  background-color: $background-color;
+  width: 180px;
+  position: absolute;
+  overflow: hidden;
+  right: 35px;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px #0000001a;
+}
+
+.dropDownOpen {
+  height: 115px;
+  transition: height 0.25s ease;
+  z-index: 50;
+}
+
+.dropDownClose {
+  pointer-events: none;
+  transition: height 0.25s ease;
+  height: 0;
+  z-index: 0;
+}
+
+@media screen and (max-width: 970px) {
+  .userGreet {
+    margin: 0px;
+  }
+
+  .dropDown {
+    width: 130px;
+    right: 15px;
+    top: 45px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .dropDown {
+    width: 110px;
+    right: 15px;
+    top: 45px;
+  }
+}

src/components/UI/dropdown/index.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Link from 'next/link';
+import styles from './dropdown.module.scss';
+
+const Dropdown = ({
+  isLoggedIn,
+  USER_PROFILE_URL,
+  SIGN_OUT_URL,
+  userData,
+  DEFAULT_AVATAR,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleDropdown = () => setIsOpen((prevState) => !prevState);
+  const modalClose = useRef();
+
+  const signOut = () => {
+    fetch(SIGN_OUT_URL, {
+      method: 'GET',
+      credentials: 'include',
+    }).then(() => {
+      window.location.reload();
+    });
+  };
+
+  useEffect(() => {
+    const handler = (event) => {
+      if (!modalClose.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+    };
+  });
+
+  return (
+    <div className={styles.userGreet} ref={modalClose}>
+      <div
+        role="button"
+        tabIndex={0}
+        className={styles.dropdownHeader}
+        onClick={toggleDropdown}
+        onKeyDown={toggleDropdown}
+      >
+        <div className={styles.userGreetMsg}>
+          {isLoggedIn ? `Hello, ${userData.firstName}!` : `Hello, User!`}
+        </div>
+        <img
+          className={styles.userProfilePic}
+          src={isLoggedIn ? `${userData.profilePicture}` : `${DEFAULT_AVATAR}`}
+          alt="Profile Pic"
+        />
+      </div>
+
+      <div
+        className={` ${styles.dropDown} ${
+          isOpen ? styles.dropDownOpen : styles.dropDownClose
+        }`}
+      >
+        <div className={styles.dropdownContent}>
+          <div className={styles.dropDownContentWrapper}>
+            <div className={styles.myProfileWrapper}>
+              <Link href={USER_PROFILE_URL}>
+                <a className={styles.myProfile}>My profile</a>
+              </Link>
+            </div>
+            <div className={styles.signOutWrapper}>
+              <button
+                type="submit"
+                className={styles.signOut}
+                onClick={signOut}
+              >
+                Sign Out
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/UI/navbar/index.js

@@ -7,8 +7,10 @@ import {
   USER_DATA_URL,
   USER_PROFILE_URL,
   NAVMENU,
+  SIGN_OUT_URL,
 } from '@constants/AppConstants';
 import Link from 'next/link';
+import Dropdown from '../dropdown';
 
 import styles from './navbar.module.scss';
 
@@ -112,26 +114,13 @@ const Navbar = () => {
                 </Link>
               )}
               {isLoggedIn && (
-                <div className={styles.userGreet}>
-                  <Link href={USER_PROFILE_URL}>
-                    <a>
-                      <div className={styles.userGreetMsg}>
-                        {`Hello ${
-                          isLoggedIn ? `${userData.firstName}` : 'User'
-                        }!`}
-                      </div>
-                      <img
-                        className={styles.userProfilePic}
-                        src={
-                          isLoggedIn
-                            ? `${userData.profilePicture}`
-                            : `${DEFAULT_AVATAR}`
-                        }
-                        alt="Profile pic"
-                      />
-                    </a>
-                  </Link>
-                </div>
+                <Dropdown
+                  isLoggedIn={isLoggedIn}
+                  USER_PROFILE_URL={USER_PROFILE_URL}
+                  userData={userData}
+                  DEFAULT_AVATAR={DEFAULT_AVATAR}
+                  SIGN_OUT_URL={SIGN_OUT_URL}
+                />
               )}
             </div>
           )}
@@ -187,26 +176,13 @@ const Navbar = () => {
                   </Link>
                 )}
                 {isLoggedIn && (
-                  <div className={styles.userGreet}>
-                    <Link href={USER_PROFILE_URL}>
-                      <a>
-                        <div className={styles.userGreetMsg}>
-                          {isLoggedIn
-                            ? `Hello, ${userData.firstName}!`
-                            : `Hello, User!`}
-                        </div>
-                        <img
-                          className={styles.userProfilePic}
-                          src={
-                            isLoggedIn
-                              ? `${userData.profilePicture}`
-                              : `${DEFAULT_AVATAR}`
-                          }
-                          alt="Profile Pic"
-                        />
-                      </a>
-                    </Link>
-                  </div>
+                  <Dropdown
+                    isLoggedIn={isLoggedIn}
+                    USER_PROFILE_URL={USER_PROFILE_URL}
+                    userData={userData}
+                    DEFAULT_AVATAR={DEFAULT_AVATAR}
+                    SIGN_OUT_URL={SIGN_OUT_URL}
+                  />
                 )}
               </li>
             )}

src/components/UI/navbar/navbar.module.scss

@@ -5,7 +5,7 @@
   top: 0px;
 }
 
-.navBar li a {
+.navBar li > a {
   margin: 10px;
   display: block;
   border-radius: 0.5rem;
@@ -182,7 +182,7 @@
 
   .navBarLogin {
     display: block;
-    margin: 20px;
+    margin: 10px;
     position: absolute;
     top: 0;
     right: 0px;

src/constants/AppConstants.js

@@ -12,6 +12,7 @@ const PATHS = {
 };
 const LOGIN_URL =
   'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97';
+const SIGN_OUT_URL = 'https://api.realdevsquad.com/auth/signout';
 const USER_PROFILE_URL = 'https://my.realdevsquad.com/profile';
 const SEARCHBOX_PLACEHOLDER = 'search members here';
 const NAVMENU = [
@@ -51,6 +52,7 @@ export {
   BASE_API_URL,
   USER_DATA_URL,
   LOGIN_URL,
+  SIGN_OUT_URL,
   PATHS,
   USER_PROFILE_URL,
   NAVMENU,