Pricing header link does not load pricing

[turtleyacht]

Repro steps:

1. Visit https://umami.is/
2. Click Pricing in header

Expected: Pricing page loads.

Actual: Nothing happens.

The Pricing link in the footer loads pricing info as expected.

[mikecao]

Just tested and it works fine for me. What browser are you using?

[turtleyacht]

In Safari (desktop), the pricing link in header does not load the pricing info.

The version I have is 16.2 (16614.3.7.1.7, 16614) on Mac OS Big Sur 11.7.1 (20G918).

It works fine in Chrome and Firefox.

Sorry about that. I should have mentioned the browser and platform.

[turtleyacht]

I have more details. In Safari, when bookmarks sidebar is open, then Pricing link only highlights blue in the upper left portion of the text. Then the rest of the text is "unclickable." I admit it's a bit obscure of a bug.

If the issue isn't closed, I'd like to try my hand at a hack for it, a proper fix notwithstanding--or if a PR comes in for it, at any rate.

[turtleyacht]

The <a> anchor tag is not triggering by itself; it's based on its <div> parent.

When Safari sidebar is closed, the parent's "hitbox" envelops the entire menu items, so there's no issue.

When Safari sidebar is open, since the hitbox is centered, the "Fe" portion of "Features" text is excluded (but still highlights starting from the beginning).

On the right side of the menu, the text "Pric" (and some of the "i") in Pricing is included and "ng" is excluded. Link highlighting only happens once we move more to the left.

I can repro the issue by the following steps:

1. Adding these lines to pages/index.tsx:

import React from 'react';
import { NextPage } from 'next';
+import Inline from 'components/Inline';
...
+      <Inline />
    </>
  );
};

2. And in the new file components/Inline.tsx,

import Script from 'next/script'

export default function Inline() {
  return (
    <>
    <Script id="diagnosis">
      {`
        let pricingElement = document.querySelector('header a:nth-child(4)'),
            menu = pricingElement.parentElement

        // destroys responsive mode
        // menu.style.flex = "0 0 100%"

        pricingElement.addEventListener("mouseenter", (e) => { pricingElement.style.border = '5px dotted orange' })
        pricingElement.addEventListener("mouseleave", (e) => { pricingElement.style.border = '' })
      }`
    </Script>
    </>
  )
}

The Pricing link highlights as expected when flex is changed from auto to 100%, but that destroys responsive mode and takes up the rest of the row, dropping the GitHub icon to the next line. So we can't have that.

That's what I've found so far. Here is a gif:

[turtleyacht]

Figured it out :) Sent up a PR #109. Thank-you.