-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
set up navbar to hide when scrolling
- Loading branch information
1 parent
b32c3a2
commit fe611da
Showing
2 changed files
with
108 additions
and
56 deletions.
There are no files selected for viewing
30 changes: 22 additions & 8 deletions
30
frontend/src/components/main-header/main-header.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,31 @@ | ||
| .navbarItem { | ||
| color: #A1A1AA; | ||
| font-weight: 500; | ||
| color: #a1a1aa; | ||
| font-weight: 500; | ||
|
|
||
| &:hover { | ||
| font-weight: 600; | ||
| } | ||
| &:hover { | ||
| font-weight: 600; | ||
| } | ||
| } | ||
|
|
||
| .logo { | ||
| display: flex | ||
| display: flex; | ||
| } | ||
|
|
||
| .logo img { | ||
| width: 8em; | ||
| height: auto; | ||
| width: 8em; | ||
| height: auto; | ||
| } | ||
|
|
||
| .navbar { | ||
| transition: top 0.3s; | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| background-color: white; | ||
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .hidden { | ||
| top: -60px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,93 @@ | ||
| 'use client'; | ||
| "use client"; | ||
| import { useEffect, useState } from "react"; // Import useEffect and useState | ||
| import Link from "next/link"; | ||
| import Image from "next/image"; | ||
| import logoImg from "@/assets/logo.jpg" | ||
| import classes from './main-header.module.css'; | ||
| import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from "@nextui-org/navbar"; | ||
| import { usePathname } from "next/navigation"; | ||
| import logoImg from "@/assets/logo.jpg"; | ||
| import classes from "./main-header.module.css"; | ||
| import { | ||
| Navbar, | ||
| NavbarBrand, | ||
| NavbarContent, | ||
| NavbarItem, | ||
| } from "@nextui-org/navbar"; | ||
| import { usePathname, useRouter } from "next/navigation"; | ||
|
|
||
| type NavbarItem = { | ||
| label: string, | ||
| href: string | ||
| } | ||
| label: string; | ||
| href: string; | ||
| }; | ||
|
|
||
| export default function MainHeader() { | ||
| const pathname = usePathname(); | ||
|
|
||
| const navbarItems: NavbarItem[] = [ | ||
| { label: "Home", href: "/" }, | ||
| { label: "About", href: "/about" }, | ||
| { label: "Feedback", href: "/feedback" } | ||
| ] | ||
|
|
||
| return ( | ||
| <> | ||
| <Navbar | ||
| classNames={{ | ||
| item: [ | ||
| "flex", | ||
| "relative", | ||
| "h-full", | ||
| "items-center", | ||
| "data-[active=true]:after:bg-primary", | ||
| "data-[active=true]:after:text-blue-600", | ||
| "data-[active=true]:after:font-extrabold", | ||
| ], | ||
| }} | ||
| > | ||
| <NavbarBrand> | ||
| <Link className={classes.logo} href="/"> | ||
| <Image src={logoImg} alt="Schemes SG logo" width={120} height={30} priority/> | ||
| </Link> | ||
| </NavbarBrand> | ||
| <NavbarContent className="hidden sm:flex gap-4" justify="end"> | ||
| {navbarItems.map((item, idx) => { | ||
| return ( | ||
| <NavbarItem className={classes.navbarItem} key={idx} isActive={pathname === item.href ? true : undefined}> | ||
| <Link href={item.href}>{item.label}</Link> | ||
| </NavbarItem> | ||
| ) | ||
| })} | ||
| </NavbarContent> | ||
| </Navbar> | ||
| </> | ||
| ) | ||
| const pathname = usePathname(); | ||
| const router = useRouter(); | ||
| const [hidden, setHidden] = useState(false); | ||
| let lastScrollTop = 0; | ||
|
|
||
| const navbarItems: NavbarItem[] = [ | ||
| { label: "Home", href: "/" }, | ||
| { label: "About", href: "/about" }, | ||
| { label: "Feedback", href: "/feedback" }, | ||
| ]; | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const currentScroll = | ||
| window.pageYOffset || document.documentElement.scrollTop; | ||
|
|
||
| if (currentScroll > lastScrollTop) { | ||
| // Scrolling down | ||
| setHidden(true); | ||
| } else { | ||
| // Scrolling up | ||
| setHidden(false); | ||
| } | ||
| lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; | ||
| }; | ||
|
|
||
| window.addEventListener("scroll", handleScroll); | ||
| return () => { | ||
| window.removeEventListener("scroll", handleScroll); | ||
| }; | ||
| }, []); | ||
|
|
||
| const handleLinkClick = (href: string) => { | ||
| router.push(href); | ||
| window.scrollTo(0, 0); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Navbar className={`${classes.navbar} ${hidden ? "hidden" : ""}`}> | ||
| <NavbarBrand> | ||
| <Link className={classes.logo} href="/"> | ||
| <Image | ||
| src={logoImg} | ||
| alt="Schemes SG logo" | ||
| width={120} | ||
| height={30} | ||
| priority | ||
| /> | ||
| </Link> | ||
| </NavbarBrand> | ||
| <NavbarContent className="hidden sm:flex gap-4" justify="end"> | ||
| {navbarItems.map((item, idx) => { | ||
| return ( | ||
| <NavbarItem | ||
| className={classes.navbarItem} | ||
| key={idx} | ||
| isActive={pathname === item.href ? true : undefined} | ||
| > | ||
| <Link | ||
| href={item.href} | ||
| onClick={() => handleLinkClick(item.href)} | ||
| > | ||
| {item.label} | ||
| </Link> | ||
| </NavbarItem> | ||
| ); | ||
| })} | ||
| </NavbarContent> | ||
| </Navbar> | ||
| </> | ||
| ); | ||
| } |