Docusaurus: [v2] Mobile navbar is cut in small viewport

[endiliey]

Tip: This task is targeted towards potential contributor to Docusaurus project.

🚀 Motivation

See https://v2.docusaurus.io/feedback/p/resposive-top-bar for context

Where to start

1. Fork the repository and create your branch from master.
2. Clone the repository
3. Read instruction on how to run Docusaurus 2 website
4. The related codes for the NavBar is https://github.com/facebook/docusaurus/tree/master/packages/docusaurus-theme-classic/src/theme/Navbar
5. Propose a fix and send a Pull Request :)

P.S: make sure to comment on this issue first and propose a solution before working on a fix

Have you read the Contributing Guidelines on issues?

Yes

[shirshendubhowmick]

Fix 1: Moving search to a new line i.e. below the logo
Fix 2: Opening a small modal popup on focus of the search input box
Fix 3: Replace search box with a search icon, on tap of the icon expand it to search box and hide the "Docusaurus" text beside the logo, it will remain hidden while the search box is expanded.

Also may i know the min view port width that needs to be supported ?

[endiliey]

wdyt @yangshun @wgao19 ?

i think fix 3 can be nice. any recommendation on the min view port that needs to be supported ?

[shirshendubhowmick]

Can we limit it to 320px width ? I believe this will be enough to support devices that are pretty old like iPhone 5.

[endiliey]

was thinking of 320px too. lets go ahead

send PR :)

[wgao19]

thanks for the actionable suggestions @shirshendubhowmick @endiliey im also ok with 3 with 320px as min width, lets fix this :)

[shirshendubhowmick]

@endiliey Need little help, where can i find the current search icon ?

[endiliey]

@shirshendubhowmick

https://github.com/facebook/docusaurus/blob/95ace0e4eba1f5b2bc0f9ced8ec703e01aa73d0a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js#L152-L157

https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js

the css is from https://infima-dev.netlify.com/
check infima/dist/css/default/default.css

[shirshendubhowmick]

PR #1741