import React, { useEffect, useState } from "react";

import { Drawer } from "antd";

import { GiHamburgerMenu } from "react-icons/gi";
import { RxCross2 } from "react-icons/rx";
// @ts-ignore
import logo from "../../assets/org-logo.png";
import "./Navbar.scss";
import { useLocation } from "react-router-dom";
import { HashLink } from "react-router-hash-link";
import NavMenu from "./Menu";

const Navbar = () => {

const [showNav, setShowNav] = useState(false);
const [navBackground, setNavBackground] = useState(false);
const location = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
if (location.pathname !== "/") {
setNavBackground(true);
return;
} else {
setNavBackground(false);
}
window.addEventListener("scroll", changeBackground);

return () => {
window.removeEventListener("scroll", changeBackground);
};
}, [location.pathname]);

useEffect(() => {
window.addEventListener("resize", changeSize);
return () => {
window.removeEventListener("resize", changeSize);
};
}, []);
function changeBackground() {
if (window.scrollY >= 290) {
setNavBackground(true);
} else {
setNavBackground(false);
}
}
function changeSize() {
if (window.innerWidth > 900) {
setShowNav(false);
}
}
function closeNavMenu() {
setShowNav(false);
}

return (
<>
<div className={navBackground ? "navbar active" : "navbar"}>
<div className="menuIcon" onClick={() => setShowNav(!showNav)}>
{!showNav ? <GiHamburgerMenu /> : <RxCross2 />}
</div>
 <div className="logo">
<img className="logoImg" src={logo} alt="logo" />
<HashLink smooth to="/#top" onClick={closeNavMenu}>
<h1>Winter Of Code</h1>
</HashLink>
</div>
<NavMenu />
</div>
<Drawer
height={260}
closeIcon={false}
placement="bottom"
style={{
backgroundColor: "white",
border: "none",
borderRadius: "20px 20px 0px 0px",
boxShadow: "15px 15px 15px 15px black",
overflow: "hidden",
}}
open={showNav}
onClose={() => setShowNav(false)}
>
<NavMenu isInline={true} closeNavMenu={closeNavMenu} />
</Drawer>
</>
);
};

export default Navbar;

import React, { useState } from "react";

import { HashLink } from "react-router-hash-link";
import { Menu } from "antd";
import { useNavigate } from "react-router-dom";

// eslint-disable-next-line react/prop-types
export default function NavMenu({ isInline = false, closeNavMenu = null }) {
const navigate = useNavigate();
const [showSubMenu, setShowSubMenu] = useState(false);
function getItem(label, key, children, type) {
return {
key,
children,
label,
type,
};
}
const items = [
getItem("Navigation One", "/faq", [
getItem(
null,
null,
[
<HashLink
smooth
to="/#faq"
 scroll={(el) => scrollWithOffset(el)}
onClick={closeNavMenu}
key=""
>
FAQ
</HashLink>,
<a href="" key="">
Brochure
</a>,
],
"group"
),
]),
];

const mobileStyle = {
listStyle: "none",
flexDirection: "column",
fontWeight: 700,
color: "#505050",
};
const style = isInline ? mobileStyle : {};
function scrollWithOffset(el) {
const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
const yOffset = -90;
window.scrollTo({ top: yCoordinate + yOffset, behavior: "smooth" });
}
return (
<div className="menu" style={style}>
<a
href="https://dscnsec.com/"
target="_blank"
rel="noreferrer"
onClick={closeNavMenu}
>
GDSC NSEC
</a>
<HashLink
smooth
to="/team"
scroll={(el) => scrollWithOffset(el)}
onClick={closeNavMenu}
>
Team
</HashLink>
<HashLink
smooth
to="/#organization"
scroll={(el) => scrollWithOffset(el)}
onClick={closeNavMenu}
>
Organization
</HashLink>
<HashLink
smooth
to="/#timeline"
scroll={(el) => scrollWithOffset(el)}
onClick={closeNavMenu}
>
 Timeline
</HashLink>
{!isInline ? (
<Menu
className="sub"
mode="horizontal"
items={items}
style={{
background: "transparent",
padding: 0,
margin: 0,
}}
/>
) : (
<div>
<HashLink smooth to="/#faq" scroll={(el) => scrollWithOffset(el)}>
FAQ
</HashLink>
<a href="">Brochure</a>
</div>
)}
</div>
);
}

a {
text-decoration: none;
color: #fff;
}
.navbar {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 4rem;
z-index: 4;
width: 100%;
position: fixed;
margin: auto;
top: 0;
left: 0;
transition: background 0.3s ease-in-out;
}
.active {
// background: linear-gradient(
// 135deg,
// rgba(8, 14, 44, 0.7),
// rgba(37, 41, 88, 0.85)
// );
// backdrop-filter: blur(10px);
// -webkit-backdrop-filter: blur(10px);
background: rgb(45, 84, 139);

box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);

}
.menuIcon {
display: none;
}
.logoImg {
width: 45px;
}
.logo {
display: flex;
align-items: center;
}
.logo h1 {
font-size: 1.2em;
padding: 0 0.5em;
}
.menu {
color: white;
list-style: none;
display: flex;
align-items: center;
}
.menu a,
.menu div p {
margin-left: 1.5em;
padding: 10px 10px;
cursor: pointer;
}
.navbar > .menu a {
color: white;
}
.sub-container {
position: relative;
overflow: visible;
}
.sub-menu {
display: flex;
flex-direction: column;
position: absolute;
top: 30px;
right: 0;
padding: 10px;
// margin-top: 1.8rem;
background: red;

a {
margin: 0;
padding: 5px 15px 5px 5px;
}
}

.sub a {
color: black;
}
@media (max-width: 900px) {
.navbar {
padding: 1.5rem 2rem;
}
.navbar > .menu {
display: none;
}
.menu a {
padding: 0.9em 0em;
 color: #505050;
}
.logoImg {
width: 40px;
}

.menuIcon {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 8%;
border: 1px solid #fff;
border-radius: 5px;
padding: 0.5em;
cursor: pointer;
}
}