Add Submenus to mobile about owasp-layout

[scorchingoyster]

This is a big item since the current mobile menu is a static component. Might have to look into reworking it and importing a third-party library so I won't have to script it from the ground up.

[mikemccamon]

Okay, push to bottom of list if we need a new library. Any other ideas on how we might solve the issue? Right now there would be no way to get to say "Board and Staff" for instance in the About menu when on mobile. I'm open to ideas....

[scorchingoyster]

I think it comes down to optimizing for mobile content strategy: we can throw in a few more links in the mobile menu, but only focus the most important pages that people want to get to, the ones that would be hard to get to (without digging around) and are relatively important, or the ones that can link to other high demand pages.

Ideally, we wouldn't want to fully mirror the desktop submenu structure on mobile regardless, since the Project submenu has ~11 items for instance, and that makes scanning the links and toggling the accordion fairly challenging in itself since people would have to scroll upward/downward back and forth.

The other idea is to use sitemap page and lists all the key links in categories, so that it can serve both as a site map and as sort of a link portal when people are on mobile.

As of this moment, I'd say that adding the accordion could still be feasible, but it's likely not the most time-efficient thing for now. If none of the other options will work, we can always circle back to this when we have time.

[mikemccamon]

I like the site map idea (also had it in the draft designs. My worry there is curation. When we add an important page - maybe doesn't happen so often - we need to remember to update site map as well. Automated curation might be a v2 feature.

I do agree that mobile experience is more deterministic and not necessarily the browsing experience.

[scorchingoyster]

So, for now, I will create a sitemap layout that can be used for this purpose, since the other option (link curation) is your decision to make.

[scorchingoyster]

How's this for a simple sitemap layout? Shows 3 columns by default and collapses into 1 column upon reaching certain screen width.

[scorchingoyster]

Adding live link here for viewing https://scorchingoyster.github.io/owasp-layout/sitemap

[mikemccamon]

This works, thanks!