-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathNavbar.tsx
More file actions
172 lines (168 loc) · 8.2 KB
/
Navbar.tsx
File metadata and controls
172 lines (168 loc) · 8.2 KB
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { SiDiscord, SiGithub } from "react-icons/si";
// @ts-ignore This is an image import
import FeedrLogo from "../assets/images/feedr.png";
const navbarLinks = [
{ label: "Home", href: "/#home", ariaLabel: "Home" },
{ label: "YouTube", href: "/#youtube", ariaLabel: "YouTube" },
{ label: "Twitch", href: "/#twitch", ariaLabel: "Twitch" },
{ label: "Discord", href: "/#discord", ariaLabel: "Discord" },
{ label: "FAQ", href: "/#FAQ", ariaLabel: "FAQ" },
{ label: "Stats", href: "/stats", ariaLabel: "Stats" },
];
export const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<nav
className="w-full h-20 flex flex-col justify-center items-center fixed bg-bgDark1 lg:bg-bgDarkTransparent z-40 lg:backdrop-blur-xl"
aria-label="Main navigation"
>
<div className="2xl:w-[1280px] xl:w-10/12 w-11/12 flex justify-between items-center relative">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
exit={{ opacity: 0 }}
>
<a href="/" aria-label="Home">
<div className="flex justify-start items-center">
<div className="text-white text-6xl">
<img
src={FeedrLogo.src}
alt="Feedr Logo"
className="w-10 h-10 aspect-square rounded-full"
/>
</div>
<div className="text-white font-bold text-xl">
Feedr
</div>
</div>
</a>
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
exit={{ opacity: 0 }}
>
<div className="hidden lg:flex h-full pl-12 pb-2">
{navbarLinks.map(({ href, label, ariaLabel }) => (
<a
className="text-white lg:text-base text-2xl leading-6 mr-4 ml-4 2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-110 transition h-full pt-2"
href={href}
aria-label={ariaLabel}
key={label}
>
{label}
</a>
))}
</div>
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
exit={{ opacity: 0 }}
>
<div className="grow basis-0 justify-end hidden lg:flex gap-4">
<a
className="text-white main-border-gray rounded-xl
bg-bgDark2 hover:bg-bgDark3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm inline-flex items-center whitespace-nowrap"
href="https://github.com/galvinpython/feedr"
target="_blank"
aria-label="source code"
>
<SiGithub className="mr-2" />
<span className="pt-px">Source code</span>
</a>
<a
className="text-white main-border-gray rounded-xl
bg-bgDark2 hover:bg-bgDark3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm inline-flex items-center whitespace-nowrap"
href="https://github.com/galvinpython/feedr"
target="_blank"
rel="noopener noreferrer"
>
<SiDiscord className="mr-2" />
Add to Discord
</a>
<a
className="text-white main-border-gray rounded-xl
bg-bgDark2 hover:bg-bgDark3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm inline-flex items-center whitespace-nowrap"
href="https://github.com/galvinpython/feedr"
target="_blank"
rel="noopener noreferrer"
>
<SiDiscord className="mr-2" />
Support Server
</a>
</div>
</motion.div>
<div
className="lg:hidden flex flex-col px-2 py-3 border-solid border border-gray-600 rounded-md cursor-pointer hover:bg-bgDark2"
onClick={() => setIsOpen(!isOpen)}
>
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
<div className="w-5 h-0.5 bg-gray-500 "></div>
</div>
</div>
{/* Mobile navbar */}
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
exit={{ opacity: 0 }}
>
<div
className="flex flex-col mt-16 lg:hidden absolute top-4 left-0 bg-bgDark1 z-50 w-full
items-center gap-10 pb-10 border-y border-solid border-bgDark3 pt-10
"
>
{navbarLinks.map(({ label, href, ariaLabel }) => (
<a
key={href}
className="text-white lg:text-base text-2xl leading-6 mr-4 ml-4 2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-110 transition duration-300 h-full pt-2"
href={href}
onClick={() => setIsOpen(false)}
aria-label={ariaLabel}
>
{label}
</a>
))}
<a
className="outlined-button pl-6 pr-8 pt-2 pb-2 flex items-center"
href="https://github.com/galvinpython/feedr"
target="_blank"
rel="noopener noreferrer"
>
<SiGithub className="mr-2" />
Source code
</a>
<a
className="outlined-button pl-6 pr-8 pt-2 pb-2 flex items-center"
href="https://github.com/galvinpython/feedr"
target="_blank"
rel="noopener noreferrer"
>
<SiDiscord className="mr-2" />
Add to Discord
</a>
<a
className="outlined-button pl-6 pr-8 pt-2 pb-2 flex items-center"
href="https://github.com/galvinpython/feedr"
target="_blank"
rel="noopener noreferrer"
>
<SiDiscord className="mr-2" />
Support Server
</a>
</div>
</motion.div>
)}
</AnimatePresence>
</nav>
);
};