109 lines
3.8 KiB
JavaScript
Executable File
109 lines
3.8 KiB
JavaScript
Executable File
import {
|
|
MobileIcon,
|
|
Nav,
|
|
NavbarContainer,
|
|
NavItem,
|
|
NavLinks,
|
|
NavLogo,
|
|
NavMenu,
|
|
} from "@/components/NavBar/NavbarElements";
|
|
import { useEffect, useState } from "react";
|
|
import { FaBars } from "react-icons/fa";
|
|
import { IconContext } from "react-icons/lib";
|
|
import { animateScroll as scroll } from "react-scroll";
|
|
|
|
export default function NavBar({ toggle }) {
|
|
const [scrollNav, setScrollNav] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const changeNav = () => {
|
|
if (window.scrollY >= 80) {
|
|
setScrollNav(true);
|
|
} else {
|
|
setScrollNav(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", changeNav);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", changeNav);
|
|
};
|
|
}, []);
|
|
|
|
const toggleHome = () => {
|
|
scroll.scrollToTop();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<IconContext.Provider value={{ color: "#fff" }}>
|
|
<Nav scrollNav={scrollNav}>
|
|
<NavbarContainer>
|
|
<NavLogo to="/udlbook/" onClick={toggleHome}>
|
|
<h1> Understanding Deep Learning </h1>
|
|
</NavLogo>
|
|
<MobileIcon onClick={toggle}>
|
|
<FaBars />
|
|
</MobileIcon>
|
|
<NavMenu>
|
|
<NavItem>
|
|
<NavLinks
|
|
to="Notebooks"
|
|
smooth={true}
|
|
duration={500}
|
|
spy={true}
|
|
exact="true"
|
|
offset={-80}
|
|
activeClass="active"
|
|
>
|
|
Notebooks
|
|
</NavLinks>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLinks
|
|
to="Instructors"
|
|
smooth={true}
|
|
duration={500}
|
|
spy={true}
|
|
exact="true"
|
|
offset={-80}
|
|
activeClass="active"
|
|
>
|
|
Instructors
|
|
</NavLinks>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLinks
|
|
to="Media"
|
|
smooth={true}
|
|
duration={500}
|
|
spy={true}
|
|
exact="true"
|
|
offset={-80}
|
|
activeClass="active"
|
|
>
|
|
Media
|
|
</NavLinks>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLinks
|
|
to="More"
|
|
smooth={true}
|
|
duration={500}
|
|
spy={true}
|
|
exact="true"
|
|
offset={-80}
|
|
activeClass="active"
|
|
>
|
|
More
|
|
</NavLinks>
|
|
</NavItem>
|
|
</NavMenu>
|
|
</NavbarContainer>
|
|
</Nav>
|
|
</IconContext.Provider>
|
|
</>
|
|
);
|
|
}
|