Closed vintprox closed 2 years ago
So, I located the file responsible for header navigation: view.jsx. There is no MenuLink component used, but only MenuItem for all these supposed links.
I tried converting "Settings" item from this:
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
<Icon aria-hidden tooltip icon={ICONS.SETTINGS} />
{__('Settings')}
</MenuItem>
to this:
<MenuLink className="menu__link" as={Link} to={`/$/${PAGES.SETTINGS}`}>
<Icon aria-hidden tooltip icon={ICONS.SETTINGS} />
{__('Settings')}
</MenuLink>
which requires two more things: Link
from React Router, and MenuLink
from Reach library.
import { withRouter, Link } from 'react-router';
...
import { Menu, MenuList, MenuButton, MenuItem, MenuLink } from '@reach/menu-button';
The problem is that to
isn't getting recognized as a prop for underlying Link
, instead it's passed as a generic attribute:
According to this example and my feeling it should have been a functioning hyperlink. Although, the documentation is really unclear with drawing expectations...
Need help with making it work.
I see now. I needed to import Link
from react-router-dom
, not react-router
. What a hot mess 🥱
Now my solution works. Shall publish the PR for header navigation soon.
Bug Links seen in navigation menus cannot be open in a new tab. It is because they are not even semantically hyperlinks.
To Reproduce Steps to reproduce the behavior:
Expected behavior Menu items that lead to pages of multi-page application are expected to act as normal HTML hyperlinks. Item's page should open in a new tab when user presses mousewheel (mouse navigation) on item or when, also retaining focus on it, user presses Ctrl + Enter (keyboard navigation). Being the normal hyperlink, it should also be imperative to open in a new tab by just dragging it in the tab drawer.
Screenshots
System Configuration
Additional context Guess, I can solve it. Just need some free time.