Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create Final Version #10

Merged
merged 15 commits into from
Nov 3, 2023
Merged

Create Final Version #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e456e19
Add the twitter logo in the navbar
FaranoshAmini Nov 3, 2023
a9114dd
Add the facebook logo in the navbar
FaranoshAmini Nov 3, 2023
f1e5c29
Add the instagram logo in the navbar
FaranoshAmini Nov 3, 2023
d0b1747
Add the pintrest icon in the navbar
FaranoshAmini Nov 3, 2023
7faebd2
Update NavMenu.js
FaranoshAmini Nov 3, 2023
372dec6
Add the logo icon
FaranoshAmini Nov 3, 2023
4ebf833
Add the pinterest icon
FaranoshAmini Nov 3, 2023
3850100
Add the v icon
FaranoshAmini Nov 3, 2023
1906df6
Install the necessary icons
FaranoshAmini Nov 3, 2023
fef244f
Update NavMenu.js
FaranoshAmini Nov 3, 2023
5021117
Update NavMenu.module.css
FaranoshAmini Nov 3, 2023
2660536
Update package-lock.json
FaranoshAmini Nov 3, 2023
6be0d41
Add the style for the social media icon
FaranoshAmini Nov 3, 2023
0a8fc17
Update NavMenu.module.css
FaranoshAmini Nov 3, 2023
417aba5
Add logout feature
hmunish Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 12 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/CSS/NavMenu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

Expand All @@ -13,7 +14,6 @@

.navigation {
width: 75%;
margin-top: 10rem;
}

.navlist {
Expand Down
Binary file added src/assets/google.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/pinterest.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/v.icns
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/v.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 92 additions & 47 deletions src/components/nav/NavMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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>
);
Expand Down