chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

nav design

Browse Source
This commit is contained in:
Chuck Dries 2022-10-20 21:47:27 -07:00
parent 44b4332583
commit 59a59337af
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 76 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/Nav.tsx
View File

@ -5,84 +5,20 @@ import useDimensions from "react-cool-dimensions";
import Menu from "@spectrum-icons/workflow/Menu";
interface NavProps {
isClient?: boolean;
className?: string;
internalLinks: {
href: string;
label: string;
}[];
}
const navClasses = "hover:underline hover:bg-gray-900 block p-3 text-gray-200";
const Nav = ({ isClient, internalLinks, className }: NavProps) => {
const { observe, currentBreakpoint } = useDimensions({
breakpoints: { XS: 0, LG: 690 },
updateOnBreakpointChange: true,
});
const [linksMenu, setLinksMenu] = useState(false);
const navClasses = classnames(
"hover:underline mx-2 md:mx-3 text-gray-200"
);
return (
<nav
className={classnames(
"p-2 mt-0 flex justify-center w-full font-serif",
"text-gray-200 bg-black border-b border-b-white",
className
)}
ref={observe}
style={{ zIndex: 100 }}
>
<div className="p-2">
<ul className="inline-flex flex-wrap justify-center">
{internalLinks &&
internalLinks.map(({ href, label }) => (
<li key={href}>
<Link
activeClassName="font-bold underline"
className={navClasses}
to={href}
>
{label}
</Link>
</li>
))}
</ul>
{internalLinks && currentBreakpoint !== "XS" && <span className={navClasses}>|</span>}
{currentBreakpoint === "XS" && (
<button
className="mx-2 hover:underline inline-flex align-middle"
onClick={() => setLinksMenu(!linksMenu)}
>
<Menu
UNSAFE_className="mr-1"
aria-label="show external links"
size="S"
/>
Links
</button>
)}
{(currentBreakpoint !== "XS" || linksMenu) && (
const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
<ul
className={classnames(
"z-30",
currentBreakpoint !== "XS"
"z-30 bg-black rounded overflow-hidden",
isVertical
? "inline-flex flex-wrap justify-center"
: "absolute p-2 rounded-md mt-2",
currentBreakpoint === "XS" &&
(isClient
? "bg-vibrant-dark cool-border-small-light"
: "bg-black border border-white")
: "absolute rounded-md top-[40px] border border-white"
)}
>
<li>
{/* eslint-disable-next-line */}
<a
className={navClasses}
href="https://buzzwords.gg"
target="_blank"
>
<a className={navClasses} href="https://buzzwords.gg" target="_blank">
Buzzwords
</a>
</li>
@ -132,6 +68,69 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
</a>
</li>
</ul>
);
interface NavProps {
className?: string;
internalLinks: {
href: string;
label: string;
}[];
}
const Nav = ({ internalLinks, className }: NavProps) => {
const { observe, currentBreakpoint } = useDimensions({
breakpoints: { XS: 0, LG: 690 },
updateOnBreakpointChange: true,
});
const [linksMenu, setLinksMenu] = useState(false);
return (
<nav
className={classnames(
"mt-0 flex justify-center w-full font-serif",
"text-gray-200 bg-black border-b border-b-white",
className
)}
ref={observe}
style={{ zIndex: 100 }}
>
<div className="flex">
<ul className="inline-flex flex-wrap justify-center">
{internalLinks &&
internalLinks.map(({ href, label }) => (
<li key={href}>
<Link
activeClassName="font-bold underline"
className={navClasses}
to={href}
>
{label}
</Link>
</li>
))}
</ul>
{internalLinks && currentBreakpoint !== "XS" && (
<span className="block p-3 text-gray-200">|</span>
)}
{currentBreakpoint === "XS" && (
<button
className={classnames(
"mx-2 hover:underline inline-flex align-middle items-center",
navClasses
)}
onClick={() => setLinksMenu(!linksMenu)}
>
<Menu
UNSAFE_className="mr-1"
aria-label="show external links"
size="S"
/>
Links
</button>
)}
{(currentBreakpoint !== "XS" || linksMenu) && (
<ExternalLinks isVertical={currentBreakpoint !== "XS"} />
)}
</div>
</nav>