Add mobile navbar functionality
This commit is contained in:
parent
6a433b3f32
commit
773cba6838
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { Image } from "./Image";
|
||||
|
@ -13,6 +13,16 @@ interface NavLink {
|
|||
}[];
|
||||
}
|
||||
|
||||
interface NavItemProps {
|
||||
name: string;
|
||||
route: string;
|
||||
submenu?: {
|
||||
name: string;
|
||||
route: string;
|
||||
}[];
|
||||
closeMenu: () => void;
|
||||
}
|
||||
|
||||
const menu: NavLink[] = [
|
||||
{
|
||||
name: "Home",
|
||||
|
@ -72,10 +82,19 @@ const menu: NavLink[] = [
|
|||
},
|
||||
];
|
||||
|
||||
function NavItem(props: NavLink) {
|
||||
function NavItem(props: NavItemProps) {
|
||||
const router = useRouter();
|
||||
const externalLink =
|
||||
props.route.includes("http://") || props.route.includes("https://");
|
||||
const [mobileDropdownOpen, setMobileDropdownOpen] = useState(false);
|
||||
|
||||
function handleClick() {
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
props.closeMenu();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{externalLink ? (
|
||||
|
@ -83,11 +102,7 @@ function NavItem(props: NavLink) {
|
|||
href={props.route}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => {
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
}}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{props.name}
|
||||
</a>
|
||||
|
@ -102,11 +117,7 @@ function NavItem(props: NavLink) {
|
|||
? styles.currentPage
|
||||
: ""
|
||||
}
|
||||
onClick={() => {
|
||||
if (document.activeElement instanceof HTMLElement) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
}}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{props.name}
|
||||
</a>
|
||||
|
@ -114,14 +125,31 @@ function NavItem(props: NavLink) {
|
|||
)}
|
||||
{(props.submenu?.length ?? 0) > 0 ? (
|
||||
<>
|
||||
<button className={`${styles.dropdownIcon} ${styles.rotate}`}>
|
||||
<button
|
||||
className={
|
||||
mobileDropdownOpen
|
||||
? `${styles.dropdownIcon} ${styles.rotate}`
|
||||
: styles.dropdownIcon
|
||||
}
|
||||
onClick={() => setMobileDropdownOpen(!mobileDropdownOpen)}
|
||||
>
|
||||
<Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
|
||||
</button>
|
||||
<ul className={`${styles.dropdown} ${styles.show}`}>
|
||||
<ul
|
||||
className={
|
||||
mobileDropdownOpen
|
||||
? `${styles.dropdown} ${styles.show}`
|
||||
: styles.dropdown
|
||||
}
|
||||
>
|
||||
{props.submenu?.map((item) => {
|
||||
return (
|
||||
<li className={styles.itemWrapper} key={item.name}>
|
||||
<NavItem name={item.name} route={item.route} />
|
||||
<NavItem
|
||||
name={item.name}
|
||||
route={item.route}
|
||||
closeMenu={props.closeMenu}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
@ -133,6 +161,7 @@ function NavItem(props: NavLink) {
|
|||
}
|
||||
|
||||
export function Navbar() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
return (
|
||||
<nav className={styles.navbar}>
|
||||
<div className={styles.navContent}>
|
||||
|
@ -141,13 +170,29 @@ export function Navbar() {
|
|||
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
|
||||
</a>
|
||||
</Link>
|
||||
<button className={styles.hamburger}>
|
||||
<button
|
||||
className={styles.hamburger}
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
>
|
||||
<Image src="/images/hamburger.svg" alt="Menu" />
|
||||
</button>
|
||||
<div className={`${styles.navMobileBackground} ${styles.show}`}>
|
||||
<div className={styles.navMenuWrapper}>
|
||||
<div
|
||||
className={
|
||||
mobileMenuOpen
|
||||
? `${styles.navMobileBackground} ${styles.show}`
|
||||
: styles.navMobileBackground
|
||||
}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<div
|
||||
className={styles.navMenuWrapper}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Link href="/">
|
||||
<a className={styles.logoMobile}>
|
||||
<a
|
||||
className={styles.logoMobile}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
|
||||
</a>
|
||||
</Link>
|
||||
|
@ -159,6 +204,9 @@ export function Navbar() {
|
|||
name={item.name}
|
||||
route={item.route}
|
||||
submenu={item.submenu}
|
||||
closeMenu={() => {
|
||||
setMobileMenuOpen(false);
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue