improve nav aesthetic

This commit is contained in:
Chuck Dries 2022-10-17 12:42:25 -07:00
parent 339bbee996
commit d43f63e97f
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6

View File

@ -11,7 +11,7 @@ interface NavProps {
internalLinks: { internalLinks: {
href: string; href: string;
label: string; label: string;
}[] }[];
} }
const Nav = ({ isClient, internalLinks, className }: NavProps) => { const Nav = ({ isClient, internalLinks, className }: NavProps) => {
@ -35,14 +35,7 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
ref={observe} ref={observe}
style={{ zIndex: 100 }} style={{ zIndex: 100 }}
> >
<div <div className="p-2">
className={classnames(
"rounded-full p-2",
isClient
? "bg-vibrant-dark cool-border-small-light"
: "border border-white"
)}
>
<ul className="inline-flex flex-wrap justify-center"> <ul className="inline-flex flex-wrap justify-center">
{internalLinks && {internalLinks &&
internalLinks.map(({ href, label }) => ( internalLinks.map(({ href, label }) => (
@ -85,12 +78,22 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
)} )}
> >
<li> <li>
<a className={navClasses} href="https://buzzwords.gg"> {/* eslint-disable-next-line */}
<a
className={navClasses}
href="https://buzzwords.gg"
target="_blank"
>
Buzzwords Buzzwords
</a> </a>
</li> </li>
<li> <li>
<a className={navClasses} href="https://twitter.com/chuckletmilk"> <a
className={navClasses}
href="https://twitter.com/chuckletmilk"
rel="noreferrer"
target="_blank"
>
Twitter Twitter
</a> </a>
</li> </li>
@ -98,6 +101,8 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
<a <a
className={navClasses} className={navClasses}
href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/" href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/"
rel="noreferrer"
target="_blank"
> >
Instagram Instagram
</a> </a>
@ -106,12 +111,19 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
<a <a
className={navClasses} className={navClasses}
href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg" href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg"
rel="noreferrer"
target="_blank"
> >
YouTube YouTube
</a> </a>
</li> </li>
<li> <li>
<a className={navClasses} href="https://github.com/chuckdries"> <a
className={navClasses}
href="https://github.com/chuckdries"
rel="noreferrer"
target="_blank"
>
GitHub GitHub
</a> </a>
</li> </li>