Differential D13770 Diff 39995 web/e.cash/components/navbar/index.js

Changeset View

Standalone View

web/e.cash/components/navbar/index.js

import s from './navbar.module.css';
import Link from 'next/link';		import Link from 'next/link';
import Image from 'next/image';		import Image from 'next/image';
import { useEffect, useState } from 'react';		import { useEffect, useState } from 'react';
import { navitems } from '../../data/navitems';		import { navitems } from '../../data/navitems';
		import { NavbarOuter, NavbarCtn } from './styles';

export default function Navbar({ announcementbar }) {		export default function Navbar({ announcementbar }) {
const [priceLinkText, setPriceLinkText] = useState('Buy XEC');		const [priceLinkText, setPriceLinkText] = useState('Buy XEC');
const [mobileMenu, setMobileMenu] = useState(false);		const [mobileMenu, setMobileMenu] = useState(false);
const [selectedDropDownMenu, setSelectedDropDownMenu] = useState(-1);		const [selectedDropDownMenu, setSelectedDropDownMenu] = useState(-1);
const [windowWidth, setWindowWidth] = useState('');		const [windowWidth, setWindowWidth] = useState('');

const handleResize = () => {		const handleResize = () => {
Show All 20 Lines	useEffect(() => {
getPrice();		getPrice();
// remove the event listener after mount to avoid memory leak		// remove the event listener after mount to avoid memory leak
return () => {		return () => {
window.removeEventListener('resize', handleResize);		window.removeEventListener('resize', handleResize);
};		};
}, []);		}, []);

return (		return (
<div className={s.navbar_outer}>		<NavbarOuter>
{announcementbar && (		{announcementbar && (
<Link		<Link
href={announcementbar.link}		href={announcementbar.link}
className={s.announcementbar_ctn}		className="announcementbar_ctn"
target="_blank"		target="_blank"
rel="noreferrer"		rel="noreferrer"
>		>
{announcementbar.text}		{announcementbar.text}
</Link>		</Link>
)}		)}
<div className={s.navbar_ctn}>		<NavbarCtn>
<div className={s.navbar}>		<div className="navbar">
<Link href="/" className={s.nav_logo}>		<Link href="/" className="nav_logo">
<Image		<Image
src="/images/ecash-logo.svg"		src="/images/ecash-logo.svg"
alt="ecash logo"		alt="ecash logo"
fill		fill
/>		/>
</Link>		</Link>
<nav		<nav
role="navigation"		role="navigation"
className={s.navbar_links_ctn}		className="navbar_links_ctn"
style={{ left: mobileMenu ? '0' : '-400px' }}		style={{ left: mobileMenu ? '0' : '-400px' }}
>		>
{navitems.map((navitem, index) => (		{navitems.map((navitem, index) => (
<div className={s.nav_outer} key={navitem.nav_item}>		<div className="nav_outer" key={navitem.nav_item}>
{navitem.link ? (		{navitem.link ? (
<Link		<Link
className={s.nav_item}		className="nav_item"
href={navitem.link}		href={navitem.link}
>		>
{navitem.nav_item}		{navitem.nav_item}
<div className={s.majabar} />		<div className="majabar" />
</Link>		</Link>
) : (		) : (
<>		<>
<div		<div
className={s.nav_item}		className="nav_item"
onClick={		onClick={
windowWidth < 920		windowWidth < 920
? () =>		? () =>
setSelectedDropDownMenu(		setSelectedDropDownMenu(
selectedDropDownMenu ===		selectedDropDownMenu ===
index		index
? -1		? -1
: index,		: index,
)		)
: null		: null
}		}
>		>
{navitem.nav_item}		{navitem.nav_item}
</div>		</div>
<div		<div
className={s.nav_dropdown_ctn}		className="nav_dropdown_ctn"
style={		style={
selectedDropDownMenu ===		selectedDropDownMenu ===
index && windowWidth < 920		index && windowWidth < 920
? { display: 'flex' }		? { display: 'flex' }
: null		: null
}		}
>		>
{navitem.dropdown_items.map(		{navitem.dropdown_items.map(
dropdownitem => (		dropdownitem => (
<div		<div
key={dropdownitem.title}		key={dropdownitem.title}
>		>
<Link		<Link
className={		className="dropdown_nav_item"
s.dropdown_nav_item
}
href={		href={
dropdownitem.link		dropdownitem.link
}		}
target={		target={
dropdownitem.link.substring(		dropdownitem.link.substring(
0,		0,
8,		8,
) === 'https://'		) === 'https://'
? '_blank'		? '_blank'
: null		: null
}		}
rel={		rel={
dropdownitem.link.substring(		dropdownitem.link.substring(
0,		0,
8,		8,
) === 'https://'		) === 'https://'
? 'noreferrer'		? 'noreferrer'
: null		: null
}		}
>		>
<div		<div className="dropdown_icon_ctn">
className={
s.dropdown_icon_ctn
}
>
<Image		<Image
src={		src={
dropdownitem.icon		dropdownitem.icon
}		}
alt={		alt={
dropdownitem.title		dropdownitem.title
}		}
fill		fill
/>		/>
</div>		</div>
{dropdownitem.title}		{dropdownitem.title}
</Link>		</Link>
</div>		</div>
),		),
)}		)}
</div>		</div>
</>		</>
)}		)}
</div>		</div>
))}		))}
</nav>		</nav>
<Link href="/" className={s.pricelink_ctn}>		<Link href="/" className="pricelink_ctn">
<div className={s.righttop}></div>		<div className="righttop"></div>
<div className={s.rightdown}></div>		<div className="rightdown"></div>
<div className={s.leftdown}></div>		<div className="leftdown"></div>
<div className={s.lefttop}></div>		<div className="lefttop"></div>
<div>{priceLinkText}</div>		<div>{priceLinkText}</div>
</Link>		</Link>
<div className={s.menubtn_ctn_outer}>		<div className="menubtn_ctn_outer">
<input		<input
id="menu__toggle"		id="menu__toggle"
className={s.menubtn_ctn}		className="menubtn_ctn"
type="checkbox"		type="checkbox"
onClick={() => setMobileMenu(!mobileMenu)}		onClick={() => setMobileMenu(!mobileMenu)}
/>		/>
<label className={s.menu_btn} htmlFor="menu__toggle">		<label className="menu_btn" htmlFor="menu__toggle">
<span></span>		<span></span>
</label>		</label>
</div>		</div>
</div>		</div>
</div>		</NavbarCtn>
</div>		</NavbarOuter>
);		);
}		}