Opportunity pages > multi page-menu behaviour

[taisdesouzalessa]

I was wondering if we could fix a behaviour we are currently having in the multi-page menu, since this model of menu will also be used on the Fellowship Pages. The issue is that, once user select a category on the menu, the category doesn't stay visible

Current behaviour (once I click "Video" I still see "Net Neutrality Groups"):

It was designed to have the category replaced on top once users click on that.

If this is too complicated to do, we could just have the word "menu" on top, always visible and as users select their option, it is still highlighted, but hidden under menu.

@alanmoo @xmatthewx I assigned this ticket to you both to : 1. get your opinion on this issue (if you think there is another solution I am not seeing) and 2. triage this ticket

[alanmoo]

As far as I can see, you're absolutely right, this is a bug and should show the current page. I think "Menu" would be too confusing.

Let's figure out #830 first, and then we can tackle this.

[xmatthewx]

I agree totally. 1) Let's attempt to show current selection. If that's impossible for some weird reason, Menu is our best fallback. 2) This is less important than 830, but still pretty important. Thanks @taisdesouzalessa for catching this.

[alanmoo]

I just poked at the code, I don't think it's too difficult to show, we just need the right mezzanine tag swapped out in one file.

[taisdesouzalessa]

@alanmoo I did some studies in how this top menu could behave and talked to @mmmavis about what could be the best behaviour for the users. We both agree that something like the example below would be a better user experience. Wondering if you think it costs lots of time to implement something like that. If so, we can go with original plan and do that later on, after MVP.

Interactive InVision file if you want to click at your own pace:
https://invis.io/Z4FGLVDEP3W#/275358045_TEST2-MOBILE_-_FellowshipsUI_-_Overview_Copy

cc: @xmatthewx

[alanmoo]

Seems reasonable, at first glance anyway.

[muddlebee]

cannot get to this view. Can anyone help ?

[alanmoo]

The pages in screen shots don't specifically exist. https://foundation.mozilla.org/opportunity/miti/ is an example of that kind of page though.

(If you're spinning this up locally, run the command to generate fake data, and look pages under the /opportunity/ route that have subpages.)

[mmmavis]

This PR should address this mobile multi-page nav issue we are trying to fix here. Just a note that this fix is part of the WIP fellowships minisite work so the change won't be live until we are ready to launch the fellowship site.

example: https://foundation-mofostaging-pr-1020.herokuapp.com/fellowships/

[xmatthewx]

I checked the PR. The mobile nav in it works as expected. When that lands, we can double-check and then close this. 🎊

[kristinashu]

@mmmavis since Fellowship pages won't be launching as soon as expected, can this issue become a pull request separate from the fellowship work? This way it can fix the dropdown on the Opportunity pages asap.

[mmmavis]

@kristinashu yup, I'll have a PR by end of the week.

[kristinashu]

Yay! 🥇

[mmmavis]

@taisdesouzalessa @kristinashu I just pushed fix to staging. Let me know if it works as expected. It seems fine on https://foundation.mofostaging.net/opportunity/net-neutrality-groups/ but it's a bit glitchy on /opportunity. Not sure if it's a huge problem though since we never shared that page to users 👀

[kristinashu]

Yay looks good to me @mmmavis but @taisdesouzalessa would know better!

[taisdesouzalessa]

It looks very nice, thanks, Mavis!!! :).

2 things:

• we are having one issue: the menu disappears when we see it on the phone (not responsive mode viewport but in real devices). I remember this is an issue we had in the past with this menu disappearing - Sidebar isn't visible on opportunity pages with children #830
• when the menu item has 2 lines the highlight just shows up in one of them:

[kristinashu]

@taisdesouzalessa are you signed in? I can see the menu items when signed in, this seems to be an issue on staging.

[taisdesouzalessa]

True @kristinashu - I do see when it I am signed in on staging on my phone. If it is just staging maybe it doesn't need to be fixed, for now, I guess?

[kristinashu]

Yeah, let's keep this ticket focused on the menu name update. I believe there are separate tickets for the staging issue.

So just need to fix the two lines of underline issue you spotted!

[mmmavis]

Good catch! I just filed a PR to fix the multi-line text link bug!

[alanmoo]

Changing the pages to "published" on staging (at the bottom of the edit page view in the admin) should make the nav show up when you're logged out.

[mmmavis]

@taisdesouzalessa https://foundation.mofostaging.net/opportunity/mavis-test-a-long-title-page-hello-there/pudding-jelly-o-sugar-plum-wafer-powder/ ready for review again!

[taisdesouzalessa]

Looks good to me! Tks @mmmavis :). Closing this issue since we are focusing on highlight only here. Feel free to reopen it if needed.