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

formatting

Browse Source
This commit is contained in:
Tom Heaton
2024-06-05 23:58:58 +01:00
parent def3e5234b
commit 03c92541ad
27 changed files with 24481 additions and 23650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/NavBar/index.jsx
View File

@@ -1,59 +1,106 @@
import React, {useState, useEffect} from 'react'
import {FaBars} from 'react-icons/fa'
import {IconContext} from 'react-icons/lib'
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
import { animateScroll as scroll } from 'react-scroll'
import { useEffect, useState } from "react";
import { FaBars } from "react-icons/fa";
import { IconContext } from "react-icons/lib";
import { animateScroll as scroll } from "react-scroll";
import {
MobileIcon,
Nav,
NavbarContainer,
NavItem,
NavLinks,
NavLogo,
NavMenu,
} from "./NavbarElements";
const Navbar = ({ toggle }) => {
const [scrollNav, setScrollNav] = useState(false);
const Navbar = ( {toggle} ) => {
const [scrollNav, setScrollNav] = useState(false)
const changeNav = () =>{
if (window.scrollY >= 80){
setScrollNav(true)
}else{
setScrollNav(false)
const changeNav = () => {
if (window.scrollY >= 80) {
setScrollNav(true);
} else {
setScrollNav(false);
}
}
};
useEffect(() =>{
window.addEventListener('scroll', changeNav)
}, [])
useEffect(() => {
window.addEventListener("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>
<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>
</>
);
}
};
export default Navbar
export default Navbar;