Add logout feature

hmunish · Nov 3, 2023 · 417aba5 · 417aba5
1 parent 0a8fc17
commit 417aba5
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/src/App.css b/src/App.css
@@ -74,6 +74,18 @@ main {
   width: 100%;
 }
 
+div.signout {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+div.footer-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+
 /* Add reservation page starts here */
 
 section.add-reservation,

diff --git a/src/CSS/NavMenu.module.css b/src/CSS/NavMenu.module.css
@@ -4,6 +4,7 @@
   background-color: #fff;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   align-items: center;
 }
 
@@ -13,7 +14,6 @@
 
 .navigation {
   width: 75%;
-  margin-top: 10rem;
 }
 
 .navlist {
@@ -38,7 +38,3 @@ a {
   background-color: #97bf0f;
   color: #fff;
 }
-
-.icons {
-  margin-top: 10rem;
-}
diff --git a/src/components/nav/NavMenu.js b/src/components/nav/NavMenu.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { UilTwitter, UilFacebookF } from '@iconscout/react-unicons';
+import { UilTwitter, UilFacebookF, UilSignout } from "@iconscout/react-unicons";
 import styles from "../../CSS/NavMenu.module.css";
 import v from "../../assets/v.png";
 import google from "../../assets/google.png";
@@ -16,6 +16,11 @@ const NavMenu = () => {
     setIsOpen(!isOpen);
   };
 
+  const signout = () => {
+    localStorage.removeItem("authKey");
+    window.location.pathname = "/";
+  };
+
   return (
     <section className="sidebar">
       <button className="mobmenu" type="button" onClick={toggleMenu}>
@@ -69,15 +74,38 @@ const NavMenu = () => {
                 </li>
               </ul>
             </nav>
-            <div className={styles.icons}>
-              <UilTwitter />
-              <UilFacebookF />
-              <img style={{ width: '20px', height: '20px' }} src={v} alt="v icon" />
-              <img style={{ width: '30px', height: '20px', marginLeft: '5px' }} src={google} alt="google icon" />
-              <img style={{ width: '30px', height: '20px', marginLeft: '5px' }} src={pinterest} alt="pinterest icon" />
+            <div className="footer-wrapper">
+              <div
+                className="signout"
+                onClick={() => signout()}
+                role="link"
+                tabIndex={-1}
+                aria-hidden="true"
+              >
+                <UilSignout />
+                <p>Sign Out</p>
+              </div>
+              <div className={styles.icons}>
+                <UilTwitter />
+                <UilFacebookF />
+                <img
+                  style={{ width: "20px", height: "20px" }}
+                  src={v}
+                  alt="v icon"
+                />
+                <img
+                  style={{ width: "30px", height: "20px", marginLeft: "5px" }}
+                  src={google}
+                  alt="google icon"
+                />
+                <img
+                  style={{ width: "30px", height: "20px", marginLeft: "5px" }}
+                  src={pinterest}
+                  alt="pinterest icon"
+                />
+              </div>
+              <p>2023 All right reserved</p>
             </div>
-            <p />
-            2023 All right reserved
           </div>
           <div />
         </>