[MetaOS] MetaMenu mega menu

[peth-yursick]

We need to get rid of that horrible app drawer that I've "designed" & move on with building the freshly designed menu.
Can't find the link to it though @davort https://www.notion.so/Mega-menu-c9af02b75c504a26aea92fecb13288a9

The menu is the first step towards a unified MetaGame experience 😱

[davort]

Here's the "dirty" Figma file, that @blake-hunsicker is using as a reference for his work: MegaMenu on Figma

What's still to come:

1. Mobile version of the MegaMenu
2. Icons (from Trolleo, as soon as they are finalised)

[blake-hunsicker]

The branch for this feature is feature/mega-menu. I just pushed the desktop version (minus a few pieces of visual design). Here is the preview build.

Visual design topics to discuss:

1. The Exo font used in the nav bar — is it an official Metagame font or a new one? I can’t find it anywhere
2. Styles
   • Hover state for menu buttons — it looks like just underline? If so, that’s all good!
   • Hover state for menu items — right now it is default (the background turns gray-blue
   • Menu open/close animation - right now is Cahkra or Metagame default, let me know if you’d like to polish
3. Missing elements I owe the design
   • Menu triangles
   • SEED/XP icons

[peth-yursick]

2\. Hover state for menu buttons — it looks like just underline? If so, that’s all good!

I think it would be cool if the menu was opening on hover rather than click
Would also like to see buttons have some sort of a highlighted square or whatever effect other than underline, but I'm guessing that's just due to design not being finished yet.

[davort]

2\. Hover state for menu buttons — it looks like just underline? If so, that’s all good!

I think it would be cool if the menu was opening on hover rather than click

Sure. What should happen when you click a top-level link in the menu, in that case? E.g. when the user clicks on "Community"?

Otherwise, these are some of the reasons why relying on hover for mega-menus might be problematic:

• https://medium.com/simple-human/why-hover-menus-are-problematic-b21d6c7de91c
• https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/

IMHO, on-click is just safer than on-hover, even if it comes with the cost of some extra clicking. But that's just me.
If we decide to go with on-hover, as an absolute minimum, we should add hover-intent delay of around 0.5 sec, as described here: https://nngroup.com/articles/mega-menus-work-well/ (scroll down to Timing Considerations for Mega menus Displayed on Hover).

And if we really want to make it frustration-free, we should also consider ensuring the menu has More Forgiving Mouse Movement Paths.

Would also like to see buttons have some sort of a highlighted square or whatever effect other than underline, but I'm guessing that's just due to design not being finished yet.

Yeah, let's focus on this once we have the MVP of the MegaMenu ready to go. Designs are always better estimated when observed in a larger context, so probably better to build this as is, and then take the time to perfect it.
One thing to keep in mind is to keep it accessible, especially for people with vision impairments. This is where an underline is unmistakable as a signal that something is interactive, hence why I went with that. But granted, it's possible to make it look more attractive, and still keep it accessible 👍

[blake-hunsicker]

Hi all, here is the latest build: https://the-game-fmaxi8fty-metafam.vercel.app/players

If anyone has a moment to help me with the items below, I'd really appreciate it:

I am having a little trouble with two small UI issues:

• Images: I can't seem to import two .png files to use as icons. I put them both in /assets (here and here) alongside the Metagame logo, and tried to import them into mega-menu.tsx but they won't render. It seems like this should be an easy fix and I am just missing something small.
• Fonts: I want to use a Google font called Exo, but haven't seen where we import our current fonts (if we do that to begin with). Any advice here on where to import or add the font would be very much appreciated.

Two other issues regarding how to structure the project:

• Web3: I don't have any experience with web3 integrations. The design does involve the user connecting their wallet and rendering their avatar and XP/SEED count.
• Menu text/links: I've put the text and links for the menu in an object inside mega-menu.tsx. Is this an alright place to keep it?

[dan13ram]

@blake-hunsicker

• Images: You gotta import them as import XPStar from '/assets/xp-star.png';
  But I'd suggest to import them as SVG if available :)

• Fonts: The tag that Google Fonts provides can be added here.
  https://github.com/MetaFam/TheGame/blob/feature/mega-menu/packages/web/pages/_document.tsx
  You can combine the existing fonts with the new Exo with the weights you need here. Once you've added them then you should mention the fonts in the theme here under fonts
  https://github.com/MetaFam/TheGame/blob/feature/mega-menu/packages/design-system/src/theme/index.ts
  Lets say you set it as

exo: '"Exo", sans-serif',

then you just have to use fontFamily="exo" in your chakra components

• Web3: Here you can use the useUser hook in
  https://github.com/MetaFam/TheGame/blob/feature/mega-menu/packages/web/lib/hooks/index.ts
  This will return a user object and you can fetch the xp as follows:

const { user } = useUser();
const player_xp = user?.player?.total_xp || 0;

The seed balance is slightly more complex:
You can do it two ways:
you can do a graphql query to fetch it from our database or fetch it directly using a web3 call. Let me know the route you wanna take and I can guide you to it. But I wonder here if SEED balance is needed here. If so then we should also show pSEED balance cause most of my SEED is in the balancer pool.

• Menu text/links: Looks like the file is becoming too large. Maybe you could move this to a file under utils/menuLinks.ts or something.

[peth-yursick]

Any update on this @blake-hunsicker?

[davort]

From design's side there have been some changes, namely with adding "search" functionality into the menu, with the idea of users being able to search "for anything from anywhere". Hence having it in the header/menu, at the top level of the website, made perfect sense. Not sure how much it complicates things for @blake-hunsicker — please let me know if it does, and we'll find a way to make it work.

The latest designs can be found here: Mega Menu and Playbooks UI in Figma

It's fully responsive, as visible in this video demo:

ECaa9EH1Q6yJPNvHpWvGC.mp4

As for various different states of the menu, respective of the viewport size, the same Figma file contains a bunch of examples (below the artboard I linked to above). If you can't find them, just ping me.

I still owe some parts for the menu — "panels" that open up when any of the following elements are pressed:

1. player's avatar → player menu,
2. seeds tab → player's seeds with stats and such,
3. XP tab → player's XP with stats,
4. Search button/field → Search UI with List of results,
5. mobile menu icon → mobile menu panel.

Just FYI, I will be on vacation Jul 31 - Aug 16, and probably won't be able to do work during that time. With this in mind, I wanted to ask @blake-hunsicker if you would be able to keep working on bringing these latest updates, with what we have in the Figma file linked above, until I'm back in action? Or is anything from the above list—stuff that yet needs to be designed—a blocker for you?

Feel free to put some placeholders in those places for now, or just skip those parts. I should be able to finish the designs by end of August. Hopefully, we can have it built and refined in September. How does that sound?

[blake-hunsicker]

@davort The designs look great! Here is the latest build: https://the-game-gamlcu1n4-metafam.vercel.app/players

• The UI looks solid on my end, but of course it needs your and others' feedback
• What should we do/show when the user searches? A drawer like our hamburger menu, or another page?
• Please double check the links in the menu. I couldn't find optimal links for "Skill Trees", "Asketh", or "Grants."
• I think the bottom-of-screen player stats bar differs a bit from your design -- I kept the stats pills there because I had a hard time making them full-height and adding the borders you made. Let me know what you think. I also added extra padding below them to make room for iOS/Android's swipe-up home indicator.

Going to be offline the rest of this week and all of next week, and will be back on September 6. Thanks for all your help...
@peth-yursick mentioned that someone else may work on this. If they do not I will pick it back up when I return.

[lucidcyborg]

Closed by #758