Merge pull request #10 from hmunish/create-final-version

Create Final Version
hmunish · Nov 3, 2023 · 9f4d4a2 · 9f4d4a2
2 parents 8c1d651 + 417aba5
commit 9f4d4a2
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@iconscout/react-unicons": "^2.0.2",
     "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

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 {

diff --git a/src/assets/google.png b/src/assets/google.png
diff --git a/src/assets/pinterest.png b/src/assets/pinterest.png
diff --git a/src/assets/v.icns b/src/assets/v.icns
diff --git a/src/assets/v.png b/src/assets/v.png
diff --git a/src/components/nav/NavMenu.js b/src/components/nav/NavMenu.js
@@ -1,6 +1,11 @@
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
+// eslint-disable-next-line import/no-extraneous-dependencies
+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";
+import pinterest from "../../assets/pinterest.png";
 import menu from "../../assets/menu.png";
 import logo from "../../assets/logo.jpg";
 
@@ -11,59 +16,99 @@ const NavMenu = () => {
     setIsOpen(!isOpen);
   };
 
+  const signout = () => {
+    localStorage.removeItem("authKey");
+    window.location.pathname = "/";
+  };
+
   return (
     <section className="sidebar">
       <button className="mobmenu" type="button" onClick={toggleMenu}>
         <img src={menu} alt="menu" />
       </button>
       {isOpen && (
-        <div className={styles.sidebarMenu}>
-          <img alt="Logo" src={logo} className={styles.logo} />
-          <nav className={styles.navigation}>
-            <ul className={styles.navlist}>
-              <li>
-                <NavLink
-                  className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
-                  to="/"
-                >
-                  Cars
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
-                  to="/reservations"
-                >
-                  Reservations
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
-                  to="/cars/new"
-                >
-                  New Car
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
-                  to="/reservation/new"
-                >
-                  New Reservation
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
-                  to="/cars/delete"
-                >
-                  Delete Car
-                </NavLink>
-              </li>
-            </ul>
-          </nav>
-        </div>
+        <>
+          <div className={styles.sidebarMenu}>
+            <img alt="Logo" src={logo} className={styles.logo} />
+            <nav className={styles.navigation}>
+              <ul className={styles.navlist}>
+                <li>
+                  <NavLink
+                    className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
+                    to="/"
+                  >
+                    Cars
+                  </NavLink>
+                </li>
+                <li>
+                  <NavLink
+                    className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
+                    to="/reservations"
+                  >
+                    Reservations
+                  </NavLink>
+                </li>
+                <li>
+                  <NavLink
+                    className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
+                    to="/cars/new"
+                  >
+                    New Car
+                  </NavLink>
+                </li>
+                <li>
+                  <NavLink
+                    className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
+                    to="/reservation/new"
+                  >
+                    New Reservation
+                  </NavLink>
+                </li>
+                <li>
+                  <NavLink
+                    className={({ isActive }) => (isActive ? styles.activeLink : "inactive")}
+                    to="/cars/delete"
+                  >
+                    Delete Car
+                  </NavLink>
+                </li>
+              </ul>
+            </nav>
+            <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>
+          </div>
+          <div />
+        </>
       )}
     </section>
   );