Nest guide categories in dropdown

[zapaul]

The navigation currently looks something like this:

On bigger devices, the items are still kinda misplaced, and it generally has a look of being overfilled. I suggested nesting the guide categories into a dropdown. Marvin agreed.

It should now look something like this (including the color change from my other PR https://github.com/zaphosting/docs/pull/1241):

[fgalz]

@zapaul I fully get the problem and this is definitely something that needs to be optimized, but simply doing it with a nested navbar is not really a good solution. Especially with the new Docusaurus version, we have the possibility to use several items at the top of the navbar, which makes the overview much more user-friendly. Back in the old Docusaurus versions, we only had the sidebar.

Moreover, a dropdown for the individual navbar items is planned for the future when we have even more content and can divide it more specifically. This will be necessary sooner or later if we want to continue to fill the docs so that we can generate more traffic. We would then also have the problem of not being able to implement this, as no nested dropdowns are allowed.

Wouldn't it make more sense to reduce the spacing, shorten the language title and remove additional links such as "Rent a server" or "Back to ZAP-Hosting" or hide them when they reach a certain size?

Zoomed example (not perfect yet):

We could, for example, also reduce the font size slightly or make the search bar smaller.

[ThatGuyJacobee]

I also agree with Florian, having it all lumped into one single dropdown is not too great of a solution. It reduces the visibility to the wide scope of categories that our docs cover and adds an unnecessary extra interaction each time a category switch needs to happen. And as Florian mentioned, there are plans to make use of dropdowns which cannot be nested.

Instead, I have drafted up a small change which makes use of breakpoints and grids. I believe this is the best solution to the problem because it is scalable, so can be easily adapted when adding or removing categories in the future. It is also reactive so dynamically changes to what we set it to.

See the clip: https://screensaver01.zap-hosting.com/index.php/s/iWpqWns6ioNoZdS

This is just a rough draft, but something along these lines is the best solution for the navbar. I'll still have to do some tweaks to ensure that the right-side items look better, as well as paddings and sizes, but I think overall it's the best design.

[zapaul]

Thanks for checking this out. Sorry, I was working on some other stuff in the meantime. The comment is a little longer, but just saying I disagree wouldn't be useful, so I'm trying to explain why I think so. Maybe you agree afterwards, let me know :)

This is my personal opinion:

Wouldn't it make more sense to reduce the spacing, shorten the language title and remove additional links such as "Rent a server" or "Back to ZAP-Hosting" or hide them when they reach a certain size?

I like the idea of making the language label shorter. I think you already implemented this, which is nice. But for this issue, even if we do all of this and more, we will not be making enough room for the entire navigation in the smallest screen size before the mobile navigation is being displayed. It barely fits in the screenshot you sent, but the breakpoint for mobile devices is quite a bit smaller than that. On top of that, I don't know if removing the two links you mentioned is wanted by higher ups. It might when my two other PRs are being merged (1. coupon in the sidebar, 2. links to the products used at the beginning of every doc - yet to be completed and pushed).

Especially with the new Docusaurus version, we have the possibility to use several items at the top of the navbar, which makes the overview much more user-friendly. It reduces the visibility to the wide scope of categories that our docs cover

I personally think it might even improve the UX. In my mind, it gives the links context. If you look at them right now, especially with the two unrelated links right next to them without any visual difference, I think it's not unlikely that you will have to think what the link does when you first visit the site (does it take you to the gameserver page on the marketing site? is it a category for the guides?). A user shouldn't have to think in an ideal scenario. If you put them in a dropdown named (f.e.) Guides or Guide categories, it is clear what they do.

adds an unnecessary extra interaction each time a category switch needs to happen

I don't think this happens often enough to say "each time" is a hassle for moving your mouse over the link. A lot of users enter the site via Google, so they end up not only in the right category already, but the exact guide they are looking for. Others receive a link from the support team, for example. Even if they enter just the main docs page and don't use the search, they hover over it (without having to think if the list of links they see are categories or something different), click on the category and are usually done for the rest of their stay I'd assume. And even if they switch the category every few minutes, it's just a dropdown. I personally don't agree here.

I think the dropdown has more benefits: With all the links, the navigation is pretty packed. The left sidebar is packed, and there is another sidebar on the right. I think not showing all the links in the navigation by default is a plus for UX in this regard too, so the page is easier to grasp in its entirety when first visiting it.

See the clip: https://screensaver01.zap-hosting.com/index.php/s/iWpqWns6ioNoZdS I believe this is the best solution to the problem because it is scalable, so can be easily adapted when adding or removing categories in the future.

It solves the problem that the links all overlap currently, but I do not agree that this is the best solution. I personally think this hurts UX by adding to a possible confusion of what links belong together and what a link does. You have the logo on the top left, the links start right next to it, then they wrap under the logo. I think this disrupts a normal flow of visually scanning the page. The right part of the navigation is only slightly different by size and positioning. When scanning it in the first moment, the links might as well be continuing at "Rent a server". Also, coming back to my previous point of the site containing a lot to look at and process, this got worse too. The header is kinda big vertically now. The main content, which is the most important part of the site, is becoming smaller and smaller above the fold.

This will be necessary sooner or later if we want to continue to fill the docs so that we can generate more traffic. We would then also have the problem of not being able to implement this, as no nested dropdowns are allowed.

Oh, Docusaurus didn't implement this suggestion yet. Docs often only have a sidebar though if I'm not mistaken, and we even have categories in the navbar on top of it. Can you give me an example of what additional sub-categorization is needed beyond the categories outside of the sidebar we have already? Maybe I have an idea for this :) I think with good and clear categorization in the sidebars of the main categories, this should be doable without creating additional nesting in the nav bar. Most sidebars don't have much in it in the first level yet, the others could just be put into proper categories. The only exception from this is gameservers because of all the games. Maybe we can find some different solution for these.

[fgalz]

We currently have the product categories at the top of the navbar, which each have their own sidebar. These are currently the following sidebars:

• guidesSidebar
• gameserverSidebar
• vpsrootSidebar
• dedicatedserverSidebar
• domainwebspaceSidebar
• voiceserverbotSidebar

All guides are located in these sidebars. In certain areas and especially in the game server sidebar, you can see how full this sidebar already is. We can subdivide these sidebars so that the sidebars are generally less cluttered and clearer. Examples:

Game server sidebar:

• Sub-Sidebar: General
• Sub-sidebar: Known game 1
• Sub-sidebar: Known game 2
• Sub-sidebar: Known game 3
• Sub-Sidebar: Other games (A-Z)

Dedicated server sidebar:

• Sub-Sidebar: General
• Sub-Sidebar: Operating system
• Sub-Sidebar: Linux
• Sub-Sidebar: Windows
• etc...

Dropdowns can generally also be made more extensive. An example of what such a dropdown could look like can be seen at the Dyte Docs (SDKs Dropdown): https://docs.dyte.io/guides There would already be corresponding possibilities to make something practical and beautiful with the HTML type and some CSS.

The whole thing could be subdivided more specifically. If we were to implement this now as suggested, then we would completely remove the possibility, at least for the time being. There will be a lot more content in the future and then at some point all the lists will get very long.

That's why I personally think that we should still find another solution that is optimal in terms of clarity, simplicity and without restricting the possibilities.

[ThatGuyJacobee]

Some responses from me on the big reply, thanks for going into detail :)

I don't think this happens often enough to say "each time" is a hassle for moving your mouse over the link.

These are some valid points, I agree a lot of the traffic is presumably from Google and our site/socials so it shouldn't be too detrimental all things considered.

It solves the problem that the links all overlap currently, but I do not agree that this is the best solution.

Some of the points I can agree with, but a lot of this can still be resolved by further refining the layout, for example forcing the logo in place to keep it central as usual, and only placing the actual categories into 2-height grids. I can agree that a 3-height grid is too much and can cause confusion + looks unappealing.

Going onto Florian's reply to the last point, I fully agree that implementing custom dropdowns via CSS as in the example provided would be a fantastic addition. which is why it would be important to keep separate categories in the navbar.

I have been working on refining the grid idea further. I've created a few samples with slight differences:

• Categories freely center and move: https://screensaver01.zap-hosting.com/index.php/s/Cm64jE4c68C6jf4
• Categories stick to the left: https://screensaver01.zap-hosting.com/index.php/s/N4JFD6Kwor3686Y
• More breakpoints to make efficient use of space + stick to left: https://screensaver01.zap-hosting.com/index.php/s/BwQwDRsZfP8nqzk

I believe that I have resolved some of the points you have made regarding the logo and visual items. I've also adjusted it a lot to reduce confusion, placing the right side into an appropriate layout with the Docu-features on top, and our hyperlinks below. I've further reduced potential confusion by keeping most of the same layout from the moment the small desktop breakpoint is reached, all the way until the mobile view breakpoint. This way, stuff doesn't shift around and doesn't disrupt the UX.

Let me know what you think about the above example, perhaps it looks more appealing now as an option :)

[ThatGuyJacobee]

Superseded by https://github.com/zaphosting/docs/pull/1263.