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

Standardize Navbar #241

Merged
merged 19 commits into from
Dec 31, 2021
Merged

Standardize Navbar #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ecf048c
Changes in navbar UI and content
shubham-y Oct 18, 2021
a08c02e
Change in navbar UI
shubham-y Oct 18, 2021
1f39daf
Change in navbar UI as per new design
shubham-y Dec 18, 2021
26a5f51
Add login url from constants
shubham-y Dec 19, 2021
7db6477
Added changes to fetch and display data for signed-in users
shubham-y Dec 19, 2021
6f21386
Fixed display data for signed-out users
shubham-y Dec 19, 2021
6a371bb
Added mobile UI change for currency exchange page
shubham-y Dec 19, 2021
229305d
Added changes to use Link component for anchor tags
shubham-y Dec 19, 2021
fa950d0
Remove commented code
shubham-y Dec 19, 2021
6e23e6a
css code refactor changes
shubham-y Dec 20, 2021
49e06d5
Add and load paths from constants file
shubham-y Dec 20, 2021
49a8890
Remove !important property from navbar css
shubham-y Dec 20, 2021
9f51ca9
Refactor css code
shubham-y Dec 20, 2021
6946565
Add UI changes in navbar
shubham-y Dec 21, 2021
f7c164e
Add default avatar for user profile picture
shubham-y Dec 22, 2021
c58540a
Add UI changes in navbar
shubham-y Dec 22, 2021
9ccb644
Add UI changes in navbar
shubham-y Dec 23, 2021
9b5d2e1
Add profile link on greet message & error handling in fetch user
shubham-y Dec 27, 2021
c82d48e
Fix profile url
shubham-y Dec 28, 2021
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
270 changes: 222 additions & 48 deletions components/NavBar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,242 @@
import Link from 'next/link';
import React, { useState, useRef } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/router';
import styles from './navbar.module.css';
import Link from 'next/link';
import Image from 'next/image';
import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
import { USER_DATA_URL, LOGIN_URL, PATHS } from 'constants.js';

const NavBar = ({ personData: { photo } }) => {
const RDSLogo = '/assets/Real-Dev-Squad1x.png';
const NavBar = () => {
const router = useRouter();

const RDS_LOGO = '/assets/Real-Dev-Squad1x.png';
const GITHUB_LOGO = '/assets/github.png';
const DEFAULT_AVATAR = '/assets/default_avatar.jpg';
const [userData, setUserData] = useState({});
const [toggle, setToggle] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [mountedComponent, setMountedComponent] = useState(false);
const navbarRef = useRef();
GenericClosePopUp(navbarRef, () => {
setToggle(false);
});

return (
<nav className={styles.navBar}>
<ul>
<li>
<div className={styles.logo}>
<Link href="https://realdevsquad.com">
<Image src={RDSLogo} alt="Navbar Logo" width="50" height="50" />
</Link>
</div>
</li>
{/* <li>
<Link href="/shop">
<a>Shop</a>
</Link>
</li>
<li>
<Link href="/cart">
<a>Cart</a>
</Link>
</li> */}
<li>
<Link href="/auction">
<a>Auction</a>
</Link>
</li>
<li>
<Link href="/trading">
<a>Stocks</a>
</Link>
</li>
</ul>
useEffect(() => {
const fetchData = async () => {
await fetch(USER_DATA_URL, { credentials: 'include' })
.then((response) => {
if (!response.ok) {
setIsLoggedIn(false);
throw new Error(`${response.status} (${response.statusText})`);
}
return response.json();
})
.then((responseJson) => {
if (responseJson.incompleteUserDetails) {
return window.location.replace(
'https://my.realdevsquad.com/signup'
);
}
shubham-y marked this conversation as resolved.
Show resolved Hide resolved
setIsLoggedIn(true);
setUserData({
userName: responseJson.username,
firstName: responseJson.first_name,
});
})
.catch((err) => {
console.error(err);
shubham-y marked this conversation as resolved.
Show resolved Hide resolved
});
setMountedComponent(true);
};

fetchData();
}, []);

<div
className={styles.profilePic}
ref={navbarRef}
onClick={() => setToggle(!toggle)}
>
<img src={photo} alt="Profile Image" height="70" width="70" />
return (
<div className={styles.wrapper}>
<nav className={styles.navBar}>
<div
className={styles.hamburger}
ref={navbarRef}
onClick={() => setToggle(!toggle)}
>
<span className={styles.bar}></span>
<span className={styles.bar}></span>
<span className={styles.bar}></span>
</div>
<div
className={
toggle ? styles.dropdownContent : styles.dropdownContentHide
mountedComponent
? `${styles.navBarLogin}`
: `${styles.navBarLogin} d-none`
}
>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<Link href={LOGIN_URL}>
<a
className={
isLoggedIn ? `${styles.btnLogin} d-none` : `${styles.btnLogin}`
}
>
<button className={styles.btnLoginText}>
Sign In
<img
className={styles.githubLogo}
src={GITHUB_LOGO}
alt="GitHub Icon"
height="15px"
width="15px"
/>
</button>
</a>
</Link>
<div
className={
isLoggedIn ? `${styles.userGreet}` : `${styles.userGreet} d-none`
}
>
<Link href={PATHS.PROFILE}>
<a>
<div className={styles.userGreetMsg}>
{isLoggedIn
? `Hello, ${userData.firstName}!`
: `Hello, User!`}
</div>
<img
className={styles.userProfilePic}
src={
isLoggedIn
? `https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members/${userData.userName}/img.png`
: `${DEFAULT_AVATAR}`
rohan09-raj marked this conversation as resolved.
Show resolved Hide resolved
}
alt="Profile Picture"
/>
</a>
</Link>
</div>
</div>
<ul
className={
toggle ? `${styles.navBarMenu} ${styles.active}` : styles.navBarMenu
}
>
<li className={styles.navBarLogoLi}>
<Link href={PATHS.HOME}>
<a>
<img
src={RDS_LOGO}
alt="home nav logo"
height="50px"
width="50px"
/>
</a>
</Link>
</li>
<li className={styles.homeTab}>
<Link href={PATHS.HOME}>Home</Link>
</li>
<li>
<Link href={PATHS.WELCOME}>Welcome</Link>
</li>
<li>
<Link href={PATHS.EVENTS}>Events</Link>
</li>
<li>
<Link href={PATHS.MEMBERS}>Members</Link>
</li>
<li>
<Link href={PATHS.CRYPTO}>
<a className={styles.activeTab}>Crypto</a>
</Link>
</li>
<li>
<Link href={PATHS.STATUS}>Status</Link>
</li>
shubham-y marked this conversation as resolved.
Show resolved Hide resolved
<li
className={
mountedComponent
? `${styles.navBarLoginLi}`
: `${styles.navBarLoginLi} d-none`
}
>
<Link href={LOGIN_URL}>
<a
className={
isLoggedIn
? `${styles.btnLogin} d-none`
: `${styles.btnLogin}`
}
>
<button className={styles.btnLoginText}>
Sign In With GitHub
<img
className={styles.githubLogo}
src={GITHUB_LOGO}
alt="GitHub Icon"
height="15px"
width="15px"
/>
</button>
</a>
</Link>
<div
className={
isLoggedIn
? `${styles.userGreet}`
: `${styles.userGreet} d-none`
}
>
<Link href={PATHS.PROFILE}>
<a>
<div className={styles.userGreetMsg}>
{isLoggedIn
? `Hello, ${userData.firstName}!`
: `Hello, User!`}
</div>
<img
className={styles.userProfilePic}
src={
isLoggedIn
? `https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members/${userData.userName}/img.png`
: `${DEFAULT_AVATAR}`
}
alt="Profile Picture"
/>
</a>
</Link>
</div>
</li>
</ul>
</nav>
<div className={styles.header}>
<Link href="/auction">
<a>
<button
type="button"
tabIndex="0"
className={`${styles.link} ${
router.pathname === '/auction' ? styles.active : ''
}`}
>
Auctions
</button>
</a>
</Link>
|
<Link href="/trading">
<a>
<button
type="button"
tabIndex="0"
className={`${styles.link} ${
router.pathname === '/trading' ? styles.active : ''
}`}
>
Stocks
</button>
</a>
</Link>
</div>
</nav>
</div>
);
};

Expand Down
Loading