diff options
| author | Factiven <[email protected]> | 2023-09-25 00:44:40 +0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-09-25 00:44:40 +0700 |
| commit | 1a85c2571690ba592ac5183d5eadaf9846fe532b (patch) | |
| tree | 3f3552c00cd49c0eeab5275275cf5cf5666e5027 /components/layout.js | |
| parent | Delete .github/workflows/deploy.yml (diff) | |
| download | moopa-4.1.0.tar.xz moopa-4.1.0.zip | |
Update v4.1.0 (#79)v4.1.0
* Update v4.1.0
* Update pages/_app.js
Diffstat (limited to 'components/layout.js')
| -rw-r--r-- | components/layout.js | 63 |
1 files changed, 0 insertions, 63 deletions
diff --git a/components/layout.js b/components/layout.js deleted file mode 100644 index 49850c9..0000000 --- a/components/layout.js +++ /dev/null @@ -1,63 +0,0 @@ -import Navbar from "./navbar"; -import Footer from "./footer"; -import { useEffect, useState } from "react"; - -function Layout(props) { - const [isAtTop, setIsAtTop] = useState(true); - const [isScrollingDown, setIsScrollingDown] = useState(false); - - useEffect(() => { - const handleScroll = () => { - const scrollY = window.scrollY; - - if (scrollY <= 200) { - setIsAtTop(true); - setIsScrollingDown(false); - } else if (scrollY > lastScrollY) { - setIsAtTop(false); - setIsScrollingDown(true); - } else { - setIsAtTop(false); - setIsScrollingDown(false); - } - - lastScrollY = scrollY; - }; - - let lastScrollY = window.scrollY; - - window.addEventListener("scroll", handleScroll); - - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, []); - - return ( - <> - <main - className={`flex h-auto bg-[#121212] text-white flex-col ${props.className}`} - > - {/* PC/Tablet */} - <Navbar - className={`absolute z-50 hidden w-full duration-500 lg:fixed lg:top-0 lg:block lg:transition-all ${ - isAtTop - ? `px-2 pt-2 transition-all duration-1000 ${props.navTop}` - : isScrollingDown - ? "lg:h-16 lg:translate-y-[-100%] lg:shadow-sm lg:bg-[#0c0d10] " - : "lg:h-16 lg:translate-y-0 lg:shadow-sm lg:bg-[#0c0d10]" - }`} - /> - - {/* Mobile */} - <Navbar - className={`absolute z-50 w-full duration-300 lg:fixed lg:top-0 lg:hidden lg:transition-all`} - /> - <div className="grid items-center justify-center">{props.children}</div> - <Footer /> - </main> - </> - ); -} - -export default Layout; |