dr_domi/udlbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename NavBar to NavBar_temp

Browse Source
This commit is contained in:
Tom Heaton
2024-06-19 15:15:45 +01:00
parent 5534df187e
commit 9176623331
2 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/NavBar_temp/index.jsx Executable file
View File

@@ -0,0 +1,108 @@
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>
</>
);
}