Navbar Word Wrap on Small Screens

RudraSen2 commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

Names on the Navbar Wrap when using website on smaller screens (i.e. 13" Laptop, Tablet, iPad)

Screenshot below:

Reproducible demo

https://github.com/Comp-Labs/comp-labs-website

Steps to reproduce

Run the website on a smaller screen (13" Laptop, Tablet, iPad).
See the Navbar.

Expected behavior

The Navbar should look the same whether it is Small Laptop or a Big 24" Desktop.

Actual behavior

Navbar Items Wrap up on small screens as in the screenshot below.

Your environment

Public source code: https://github.com/Comp-Labs/comp-labs-website
Public site URL: https://complabs.in
Docusaurus version used: 2.0.0-beta.21 (latest)
Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Version 102.0.5005.115 (Official Build) (64-bit) | Node v17.2.0
Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11 Pro Dev Insider Build 25140.2000

Self-service

[ ] I'd be willing to fix this bug myself.

Josh-Cena commented 2 years ago

Somehow duplicates of https://github.com/facebook/docusaurus/issues/3820 and https://github.com/facebook/docusaurus/issues/3958. For now, the only solution is to reduce the number of navbar items. One possible fix is to allow you to declare an icon to be used on medium-sized screens (#7566). Another one is to simply make it scrollable horizontally.

Do you have a good UX in mind?

RudraSen2 commented 2 years ago

I thought of an idea: When Navbar items Excess, create an arrow slider automatically.

By the time this issue is fixed, I'll use the workaround of minifying navbar items.

slorber commented 2 years ago

Expected behavior: The Navbar should look the same whether it is Small Laptop or a Big 24" Desktop.

Hmmmm, no? Conceptually it seems perfectly reasonable to change the display according to the available space.

How can you expect us to "look the same" here?

Can you fix it manually and post a screenshot of your visual expectation?

Now I understand that your navbar looks ugly on small, non-mobile widths. And most likely it is because we actually don't change the design according to the available space (ie for example reducing font size or paddings for small widths or whatever). Ultimately, if you use 100th navbar items, we can't do much for you, and you'll have to consider using a shorter navbar or hiding yourself some items for small devices.

I thought of an idea: When Navbar items Excess, create an arrow slider automatically.

We have to support progressive enhancement and avoid hydration FOUC. Detecting "excess" probably requires JS, that might not be easy. Also not sur what you mean by "arrow slider", do you have any example site implementing a similar UX in a navbar?

Josh-Cena commented 2 years ago

Just an overflow-x: scroll or something similar, maybe? I'm not sure what "arrow slider" is either.

RudraSen2 commented 2 years ago

Just an overflow-x: scroll or something similar, maybe? I'm not sure what "arrow slider" is either.

I think so similar to this

RudraSen2 commented 2 years ago

I tested overflow-x: scroll and it works but in * CSS class. Does anyone know the CSS class for the navbar?

RudraSen2 commented 2 years ago

How can I set CSS classes for the navbar? If there is a class for the navbar, I'll put an overflow-x: scroll below the navbar.

RudraSen2 commented 2 years ago

I need a scrollbar automatically below the navbar if on a laptop or a smaller screen. Can anyone tell me how to do that?

slorber commented 2 years ago

I don't understand the question. It's impossible to help you: please invest some time to help us help you.

Which DOM element can't you target with custom CSS and you would like to?

The navbar has a class, you can easily see it by inspecting the DOM, and it can be targetted with nav.navbar

Now adding overflow-x: scroll doesn't seem to work well for me, so I'm not sure why you concludes it's the solution to your problems 🤷‍♂️ this looks more complex to me.

CleanShot 2022-06-29 at 13 35 07@2x

RudraSen2 commented 2 years ago

I don't understand the question. It's impossible to help you: please invest some time to help us help you.

Which DOM element can't you target with custom CSS and you would like to?

The navbar has a class, you can easily see it by inspecting the DOM, and it can be targetted with nav.navbar

Now adding overflow-x: scroll doesn't seem to work well for me, so I'm not sure why you concludes it's the solution to your problems 🤷‍♂️ this looks more complex to me.

Can you tell me how to add scrollbar below the navbar and in a way that it looks good?

slorber commented 2 years ago

Can you tell me how to add scrollbar below the navbar and in a way that it looks good?

No: this seems more complex than just adding a single CSS rule and requires investigation. I can't dedicate time to this right now. Please try to investigate what is the CSS required to make it look good, using DevTools or custom stylesheets locally.

RudraSen2 commented 2 years ago

I am now trying to mess up with the React Native website navbar. When I tested it on smaller screens, it automatically shows an option to scroll using the mouse. Will find out how it does that. Please tell me if anyone gets it.

RudraSen2 commented 2 years ago

Can anyone help with making my navbar like React Native Site navbar? It looks like this on smaller screens:

TL;DR, I want to make a touch slider navbar like in picture above.

RudraSen2 commented 2 years ago

I know this is off-topic, but How do I Put a Button or a component or something on every bottom of blog posts or docs?

slorber commented 2 years ago

@RudraSen2 please don't use issues as a support forum. I deleted your unrelated comment.

Thanks for referencing the ReactJS website UX: this would definitively be useful to implement it on Docusaurus.

However, we don't know yet how to implement it

You have 3 choices here:

Implement the solution you want, on your own (we can't spend our time to help you specifically)
Help us implement a generic solution for Docusaurus (it may take time until we prioritize this feature)
Submit a PR with a generic solution that works for all Docusaurus sites (not just yours)

RudraSen2 commented 2 years ago

Got better with this:

* {
  white-space: nowrap;
}

RudraSen2 commented 2 years ago

Got better with this:
* {
  white-space: nowrap;
}

Navbar is almost fixed, but the other stuff on my website is not looking good. Can you tell me the CSS class for the navbar, like for the table, we use table {css-class: value;}. Is there something like this for the navbar?

slorber commented 2 years ago

Whenever you look for a class, open the dev tools and inspect the DOM to find it

anniepauline commented 1 year ago

I am a new bie to open source. What is the last task in this issue! I am up to work on it

facebook / docusaurus