generated from acm-ucr/acm-ucr-website
-
Notifications
You must be signed in to change notification settings - Fork 2
/
NavBar.jsx
81 lines (78 loc) · 2.42 KB
/
NavBar.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
"use client";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import logo from "@/public/logo.webp";
import { items } from "@/data/Navigation";
import { IoMdMenu } from "react-icons/io";
const NavBar = () => {
const [selected, setSelected] = useState("");
const [nav, setNav] = useState(false);
const handleNav = () => {
setNav(!nav);
};
return (
<div className="px-8 sticky top-0 z-30 bg-white w-screen flex justify-between items-center text-xl md:text-xl 2xl:text-2xl">
<Link
onClick={() => {
setSelected("");
}}
href="/"
>
<Image
src={logo}
alt="Logo"
className="left-0 w-12 md:w-16 hover:opacity-60 duration-300"
/>
</Link>
<div className="hidden absolute right-0 md:flex justify-evenly w-2/5">
{items.map((item, index) => (
<Link
href={item.link}
key={index}
onClick={() => {
setSelected(item.name);
}}
className={`hover:text-swim-blue-300 duration-300 border-solid font-semibold ${
selected === item.name
? "border-b-2 border-swim-yellow text-swim-blue-300"
: "text-black"
}`}
>
{item.name}
</Link>
))}
</div>
{/* mobile menu */}
<div
className={
nav
? "fixed transition ease-in-out md:hidden flex flex-col items-center justify-evenly w-[100%] duration-500 bg-white top-7 left-0 right-0 -z-10"
: "fixed hidden transition ease-in-out duration-500 top-[-100%]"
}
>
{items.map((item, index) => (
<Link
href={item.link}
key={index}
onClick={() => {
setSelected(item.name);
handleNav();
}}
className={`hover:text-swim-blue-300 duration-300 border-solid font-semibold py-2 ${
selected === item.name
? "border-b-2 border-swim-yellow text-swim-blue-300"
: "text-black"
}`}
>
{item.name}
</Link>
))}
</div>
<div onClick={handleNav}>
<IoMdMenu className="text-3xl flex md:hidden text-black hover:cursor-pointer hover:text-swim-blue-300 justify-self-end" />
</div>
</div>
);
};
export default NavBar;