chore: restructure website menu

[thepassle]

Made a new branch because the old one was a hot mess

Based the discussion here: #947 (comment)

Preview deploy:
https://deploy-preview-1078--open-wc-org.netlify.com/guide/

(browserstack is failing, i'll retry it again later)

[Westbrook]

Lit Helpers is listed under Configs & Recommendations and Tools, but when I click on the link in Tools is goes to the Configs & Recommendations page, and opens that part of the navigation. Is that expected?

[thepassle]

@Westbrook Fixed

What do you think of the overall structure vs the old structure?

[Westbrook]

Does this URl count as "in the Guide"? https://deploy-preview-1078--open-wc-org.netlify.com/developing/es-dev-server.html#getting-started It's not got it in the path structure and causes the UI not to highlight "Guide" the way that it does for say: https://deploy-preview-1078--open-wc-org.netlify.com/guide/#available-recommendations Is there some other way to use the top right navigation if we move to this approach? Or maybe the situation is the it's called "Introduction" on the left when "Guide" on the right is highlighted? Not sure which part I'm most reacting to here.

Overall, I think I like this breakdown. I'm very used to the old version, so I'll need to get used to it. It should have more room to move things like: https://deploy-preview-1078--open-wc-org.netlify.com/faq/component-libraries.html which will definitely be a plus!

[daKmoR]

Overall I like the structure a lot 🤗 good job 💪

Some notes:

• linting seems to have been lost in the move? 😅

[thepassle]

Oops, readded linting again 😅

[LarsDenBakker]

When I wrote out the structure in the previous thread, I meant for the top level menu items to go into the overall site menu (top right on desktop). Is that somethinf we can try?

[thepassle]

@Westbrook Good catch, about the underlining of 'guide'. I checked the current site, and the same thing seems to happen there as well

I also added the component libraries page to guides & docs too

[thepassle]

@LarsDenBakker like this?

I think I'd prefer to keep the 'nested' sidebar menu, I think the top bar nav is a bit harder to spot, and people that used our site will probably be familiar/used to the sidebar menu, and may miss it? Not sure if thats super biased, but just my 2c

[LarsDenBakker]

Yeah its harder to find, but I prefer the idea of a full switch. 2 nestings is pretty fiddly I think.

Do we have any other options in this template?

[thepassle]

Before I refactor the whole config again ( 🙈 ), what do you guys think @bennypowers @daKmoR @Westbrook ?

[Westbrook]

I'm not the biggest fan of needing ALL of the main nav items in the right and not duplicated on the left. I experience many users having issues with finding content there, and while it's "cleaner" I'm not sure it's "clearer". However, I'm not sure that I can see a better approach within the confines of the theme as I've seen it...

[jorenbroekema]

I found myself very often not being able to find guides & docs easily, same for es-dev-server at one point (because it was tucked away into some sub-section).

All in all, I believe this is a huge improvement to what it was before! And to me it makes sense that FAQ, About and Github are not in that sidebar but on the top bar.

👍

---

I have one thing to critique though and that is the wording of "Guide" in the top-bar. A guide to me is like a tutorial or a walk-through or something like that, so to me it is the wrong name for the link in the top-bar.

However, "Guides & Docs" in the sidebar IS proper wording in my opinion, because it refers to actual guides/tutorials/walkthrough/docs.

I had pretty often that I wanted to go to open-wc.org and go to testing helpers ASAP, and "Guide" in the top bar just confused me. "Guide" in the top bar is actually referring to a collection of the stuff that you guys have created and bring to the users. Ultimately, they are a collection of Tools in one way or another, and therefore, if I had to suggest a new name for it, it would be "tools".

But I will note that I think it's not the perfect name either, in terms of what users will expect. Perhaps "Overview" or "Product" (although that is probably waaay too corporate sounding). Just food for thought I guess. Sorry if it is not relevant to this sidebar PR.

[daKmoR]

I am fully on board as well 👍

one click on the front page and then you should see all that is available in the left menu 💪

are you fully done? or is there still something you wanna do?

[thepassle]

I think this should be good yeah. Maybe someone can do a sanity check to be on the safe side?

[LarsDenBakker]

I still think the double nested menus is fiddly, you need to do a lot of clicking to get around. Especially on desktop, when you open one the other closes and the entire menu moves up again. But it's a big improvement already, so we should merge this :)

Ill check if we can do something about it later, maybe keep the menus open all the time.

Though I agree guide is not the right name, home would actually be good but its already taken. Maybe just docs?

[daKmoR]

awesome - merged 🎉

very good job @thepassle 💪