Skip to content

Commit

Permalink
fix: menu state
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpvalery
jpvalery committed Dec 23, 2021
1 parent 2c27457 commit 614f9dd
Showing 1 changed file with 29 additions and 20 deletions.
49 changes: 29 additions & 20 deletions components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@ import {
XIcon,
} from "@heroicons/react/outline";

function Mlink(props) {
let { href, children, ...rest } = props;
return (
<NextLink href={href}>
<a {...rest}>{children}</a>
</NextLink>
);
}

export default function Header() {
const [isMobileOpen, setIsMobileOpen] = useState(false);
return (
Expand Down Expand Up @@ -58,7 +67,7 @@ export default function Header() {
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-90"
>
<Menu.Items static as={React.Fragment}>
<Menu.Items static>
<div className="absolute z-50 mt-12 outline-none -ml-80">
<div className="w-screen max-w-md overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-8 px-8 py-8 bg-zinc-900">
Expand Down Expand Up @@ -190,13 +199,13 @@ export default function Header() {
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-90"
>
<Menu.Items static as={React.Fragment}>
<Menu.Items static>
<div className="absolute z-50 mt-12 outline-none -ml-96">
<div className="w-screen max-w-md overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-8 px-8 py-8 bg-zinc-900">
<Menu.Item>
{({ active }) => (
<NextLink href="/about">
<Mlink href="/about">
<span className="flex items-start p-3 -m-3 rounded-lg cursor-pointer hover:bg-zinc-800">
<UserCircleIcon className="flex-shrink-0 w-8 h-8 text-about-500" />
<div className="ml-4">
Expand All @@ -208,13 +217,13 @@ export default function Header() {
</p>
</div>
</span>
</NextLink>
</Mlink>
)}
</Menu.Item>

<Menu.Item>
{({ active }) => (
<NextLink href="/now">
<Mlink href="/now">
<span className="flex items-start p-3 -m-3 rounded-lg cursor-pointer hover:bg-zinc-800">
<StatusOnlineIcon className="flex-shrink-0 w-8 h-8 text-now-500" />
<div className="ml-4">
Expand All @@ -226,13 +235,13 @@ export default function Header() {
</p>
</div>
</span>
</NextLink>
</Mlink>
)}
</Menu.Item>

<Menu.Item>
{({ active }) => (
<NextLink href="/stack">
<Mlink href="/stack">
<span className="flex items-start p-3 -m-3 rounded-lg cursor-pointer hover:bg-zinc-800">
<CollectionIcon className="flex-shrink-0 w-8 h-8 text-stack-500" />
<div className="ml-4">
Expand All @@ -244,13 +253,13 @@ export default function Header() {
</p>
</div>
</span>
</NextLink>
</Mlink>
)}
</Menu.Item>

<Menu.Item>
{({ active }) => (
<NextLink href="/dashboard">
<Mlink href="/dashboard">
<span className="flex items-start p-3 -m-3 rounded-lg cursor-pointer hover:bg-zinc-800">
<ChartSquareBarIcon className="flex-shrink-0 w-8 h-8 text-dashboard-500" />
<div className="ml-4">
Expand All @@ -262,13 +271,13 @@ export default function Header() {
</p>
</div>
</span>
</NextLink>
</Mlink>
)}
</Menu.Item>

<Menu.Item>
{({ active }) => (
<NextLink href="/cemetery">
<Mlink href="/cemetery">
<span className="flex items-start p-3 -m-3 rounded-lg cursor-pointer hover:bg-zinc-800">
<MoonIcon className="flex-shrink-0 w-8 h-8 text-cemetery-500" />
<div className="ml-4">
Expand All @@ -280,7 +289,7 @@ export default function Header() {
</p>
</div>
</span>
</NextLink>
</Mlink>
)}
</Menu.Item>

Expand Down Expand Up @@ -413,41 +422,41 @@ export default function Header() {
</span>
</a>

<NextLink href="/now">
<Mlink href="/now">
<span className="flex items-center p-3 -m-3 rounded-md cursor-pointer hover:bg-zinc-800">
<StatusOnlineIcon className="flex-shrink-0 w-8 h-8 text-now-500" />
<span className="ml-3 text-base font-medium text-stone-100">
/now
</span>
</span>
</NextLink>
</Mlink>

<NextLink href="/stack">
<Mlink href="/stack">
<span className="flex items-center p-3 -m-3 rounded-md cursor-pointer hover:bg-zinc-800">
<CollectionIcon className="flex-shrink-0 w-8 h-8 text-stack-500" />
<span className="ml-3 text-base font-medium text-stone-100">
/stack
</span>
</span>
</NextLink>
</Mlink>

<NextLink href="/dashboard">
<Mlink href="/dashboard">
<span className="flex items-center p-3 -m-3 rounded-md cursor-pointer hover:bg-zinc-800">
<ChartSquareBarIcon className="flex-shrink-0 w-8 h-8 text-dashboard-500" />
<span className="ml-3 text-base font-medium text-stone-100">
/dashboard
</span>
</span>
</NextLink>
</Mlink>

<NextLink href="/cemetery">
<Mlink href="/cemetery">
<span className="flex items-center p-3 -m-3 rounded-md cursor-pointer hover:bg-zinc-800">
<MoonIcon className="flex-shrink-0 w-8 h-8 text-cemetery-500" />
<span className="ml-3 text-base font-medium text-stone-100">
/cemetery
</span>
</span>
</NextLink>
</Mlink>

<a href="https://contact.jpvalery.me">
<span className="flex items-center p-3 -m-3 rounded-md hover:bg-zinc-800">
Expand Down

1 comment on commit 614f9dd

@vercel
Copy link

@vercel vercel bot commented on 614f9dd Dec 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.