Feat: refactor menu / popover

[nonissue]

Don't really need anything as complex as what I have, simplify, and maybe remove hamburger menu comp altogether.

[nonissue]

Also, the hack I implemented for next.js & headlessui & focus indexing working is janky, and not really a fix.

[nonissue]

See:

tailwindlabs/headlessui#479
tailwindlabs/headlessui#653 -> wontfix?
tailwindlabs/headlessui#358 (comment)

Possible solution wrapping 'next/link'? I think I already tried this though.
https://codesandbox.io/s/elegant-dirac-tmkc4?file=/pages/index.js

Main Requirements:

• Popover Button should be tabbable
• Popover Button and links in Popover should be tabbable
• Popover Button and links in Popover should show focus outline when selected with tab (Note: this is an issue in safari)
• Popover should close when PopoverButton is clicked a second time, or when a link within the popover is clicked (eg. Projects).
• Links in Popover should use next/link (See this]

[nonissue]

   <li>
      <button
        onClick={() => closePopover()}
        className="hover:text-red-500 dark:hover:text-red-400 transition-colors duration-250 ease-in"
        tabIndex={NEGATIVE_ONE}
      >
        <Link href={href}>
          <a tabIndex={-1}>{title}</a>
        </Link>
      </button>
    </li>

Shows focus outline correctly in Safari, but 'invoking' the link does not do anything. This must be because the button has a higher tabIndex, and it is trapping the click from the nested next/link child.

[nonissue]

It's kinda awkward on small screens not to use a hamburger style menu though.

[nonissue]

Eh, it's fine. Fixed in main.