[docs][site] Fixes small screen nav

[ronny-mysten]

Description

Fixes broken nav on small screens. Jira DOCS-383 for more info. Also applies tailwind to some styles, which should eventually be used exclusively.

docs/site/src/components/GetStartedLink/index.tsx: Removed the logic that controls the display of the Get Started link on the home page to its own component. This should make changing the location the link navigates to easier and to change the logic behind visible/hidden and other updates. Should make updates easier because only need to change the component reference of the docusaurus component instead of the related logic.

docs/site/src/components/ThemeToggle/index.tsx: Removed the logic for showing or hiding the default theme switcher from the default docusaurus component. Moved to its own component to better support docusaurus updates in the future. Also makes replacing the default switcher in the future easier.

deleted components from theme/Navbar: These components were swizzled from docusaurus theme but only added a style in some cases and didn't change anything in others. The Navbar component was ejected with all its children even though it didn't need to be. The Navbar component (and its children) are labeled as not safe for swizzling. This means that updates to docusaurus can break any changes made to these components, so should only be ejected and changed when necessary and requires checking for updates.

docs/site/src/theme/Navbar/index.js: This component was ejected from Docusaurus 2.x. The changes here are just what docusaurus updated the component to. And now that I type this, I realize that I can just delete it so that the default component gets used instead of the custom one. This means only the default component Navbar/Content is changed by just adding references to the two components mentioned previously (as opposed to the 5 or 6 components that were ejected originally).

Styles: Styles were changed where necessary. If a style was updated, then it was also updated to use tailwind syntax. Two styles were used to remove the need for swizzling default docusaurus components, which as mentioned comes at the cost of maintenance). This approach was necessary because docusaurus reuses a lot of general classes for its components or creates dynamic ones that are suffixed by the relative path to the component.

• This style selects the wrapper around the search bar so that the "get started" button on the home page displays next to the search. Prevents having to eject Navbar/Search component just to add a class.

  [class^="navbarSearchContainer"] {
    @apply min-[997px]:flex min-[997px]:gap-4
  }  
  

• This style selects the theme switch (light/dark). Prevents having to make an additional update to the Navbar/Content component.

  button[title^="Switch between dark and light mode"] {
    @apply !text-white hover:bg-sui-blue-primary
  }
  

Test plan

How did you test the new or updated feature?

---

Release notes

Check each box that your changes affect. If none of the boxes relate to your changes, release notes aren't required.

For each box you select, include information after the relevant heading that describes the impact of your changes that a user might notice and any actions they must take to implement updates.

• Protocol:
• Nodes (Validators and Full nodes):
• Indexer:
• JSON-RPC:
• GraphQL:
• CLI:
• Rust SDK:

[vercel]

@ronny-mysten is attempting to deploy a commit to the Mysten Labs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sui-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 8, 2024 3:59pm

[amnn]

I'm not an expert here, so I'll rely on @wriches to review the CSS and TSX changes -- at the moment, it's difficult to follow which changes correspond to the navbar narrow screen improvement, and which changes are unrelated. Ideally, we could split the PR up into multiple -- one for each logical change -- but if that's difficult, I'll settle for more detail on what the rationale is behind some of the other changes.

The end result does look good though! I can confirm that the sidebar is now visible in the narrow version of the site!

One additional thing I noticed is that from the narrow version of the sidebar, if you hit "Back to main menu", you lose access to the sidebar again, maybe this is avoidable, but it's a bit of a papercut.

[amnn]

It's a bit difficult for me to follow what these changes are intended to do -- could you add some PR comments to explain?

Some of this stuff I would expect to be done a different way, ideally (like by adding extra class names, rather than trying to select the elements using CSS class hierarchies, etc), but I'm not an expert here.

[ronny-mysten]

The reason for that is to minimally change the docusaurus components. This makes upgrades a lot easier. The menu problem is a result of updating to Docusaurus 3 where the changes made to the nav broke the behavior, but only slightly. To add extra class names would mean changing more of the default components.

[amnn]

Similar question here -- how come we are able to replace one component for the other here?

[ronny-mysten]

Oops. I need to delete that comment. The new components just act as wrappers for those same docusaurus components that show or hide based on location. Reason being is that it's easier to change behavior in this way without changing the default docusaurus component.

[ronny-mysten]

it's difficult to follow which changes correspond to the navbar narrow screen improvement, and which changes are unrelated.

They are all related...beyond some formatting like putting a line between css entries. Some of the css had to be updated to support the menu and were converted to Tailwind syntax while there. Tailwind was used in the beginning so it should have been used throughout for consistency. Contractor wasn't familiar with tailwind, apparently. A future PR will update all styles to tailwind.

One additional thing I noticed is that from the narrow version of the sidebar, if you hit "Back to main menu", you lose access to the sidebar again, maybe this is avoidable, but it's a bit of a papercut.

This is the default behavior. "Back to main menu" just means back to the top nav options. So, the side menu that is shown is the side menu that applies to the current section (guides, concepts, etc.). When you click one of those, you open that section's side menu. I think what you want is to have all the side menus available at once. We can change it but wouldnt be an insignificant lift and comes with maintenance overhead.

[amnn]

Thanks for explaining everything in such detail @ronny-mysten ! It looks good to me in that case. I don't know if you want to have a design consult from Jordan or something? Other than that, it looks good to me.