Feat/header refactoring

[pReya]

closes #2363

From the linked ticket it seems, that the "arrow" indicators which were appearing in the mobile version should've also been added to the desktop version. This has now been added. While I did this, I added/changed some minor things in the header:

• Optimized SVGs
• Added arrow indicators with animation
• Added a second, lower header height on mobile devices
• Added a little bit more shadow/border around the white hover "main menu overlay" elements
• Reduced the size of the primary button in the header a little bit
• Fixed some spacing values

Desktop

Before:

After:

Mobile

Before:

After:

✔️ Checklist

• Check for common mistakes:
  • Wrap plain URLs in <> to linkify them (learn more).
  • Use the right level of headings: The page title will use a level 1 headings, so your headings should use level 2 and below.
  • Use internal links: when linking to another page on https://matrix.org, use the Zola [label](@/target.md) syntax.
• For blog posts:
  • Verify the date and post ordering on the /blog page, especially for multiple posts on the same day. Prefer UTC format, e.g. 2025-12-01T14:00:00Z for Dec 1st, 2025, 2pm UTC.
  • Set the correct author and category. Browse existing ones at https://matrix.org/author/ and https://matrix.org/category/ to match them.
• Let us know if you are contributing in a specific role, such as on behalf of an organisation or team, for example.
• Let us know if your PR is time-sensitive in any way.
• Mention any issues related to the PR. Use GitHub keywords as appropriate.
• Your individual commits or pull request is signed off.

[HarHarLinks]

(for context: the referenced issue predates my involvement)

the button shape should probably remain aligned with the rest of the website (e.g. the homepage).

the direction of the dropdown arrows seems odd to me.

the animation of the dropdown arrows does not match the menu appearing on desktop.

this is how it looks for me. a bit of vshift in any text is "expected" since i don't have helvetica.

what do you think about re-adjusting the media queries to match the new header "width" more closely? similar to how we expanded them when we added the homeserver section in https://github.com/matrix-org/matrix.org/pull/2818/files#diff-0482eaf67dabfe24441fa69f3d1e754089479ce3c572f586b57591bf5a93db05R44

[pReya]

@HarHarLinks Thanks for the review!

the button shape should probably remain aligned with the rest of the website (e.g. the homepage).

Done

the direction of the dropdown arrows seems odd to me.

Sorry, I did not check the "old" arrow rotation. It should now match the "old" state.

the animation of the dropdown arrows does not match the menu appearing on desktop.

I don't understand this. Can you elaborate, what you mean?

this is how it looks for me. a bit of vshift in any text is "expected" since i don't have helvetica.

Can you check again?

what do you think about re-adjusting the media queries to match the new header "width" more closely? similar to how we expanded them when we added the homeserver section in https://github.com/matrix-org/matrix.org/pull/2818/files#diff-0482eaf67dabfe24441fa69f3d1e754089479ce3c572f586b57591bf5a93db05R44

I've updated the screen sizes to align with the mentioned changed.

[pReya]

@HarHarLinks Could you take another look?

[HarHarLinks]

Hi, let's do the following:

1. keep desktop as it was before (without arrow indicators) - yes despite the (old) design file in the ticket saying otherwise.

the animation of the dropdown arrows does not match the menu appearing on desktop.

I don't understand this. Can you elaborate, what you mean?

let's somehow match the arrow animation duration with the menu expansion animation, i.e. there is currently a mismatch of the submenu appearing immediately while the arrow continues to spin for 0.3s. The animation can probably also be even faster, maybe 1.5s?

3. can we find a way to vertically center the arrows on mobile? they appear ~baseline aligned to me

Thanks!

[pReya]

Hi, let's do the following:

1. keep desktop as it was before (without arrow indicators) - yes despite the (old) design file in the ticket saying otherwise.

That's literally, what the whole PR is about. Currently it's pretty weird UX to not being able to distinguish between which menu items will show a popover on hover, and which don't. It's basically a random/surprise UX experience – which is bad. This should really be fixed.