Show the search button in narrow view

[olivroy]

When in narrow view, we only see the Content button on the right and the package name.

Imo, there would be plenty of space to at least show the search button there?

Suggestion:

(sorry for my bad drawing)

[hadley]

Would you be willing to have a go at this? I think the basic idea is into bs5/templates/navbar.html to move:

      <form class="form-inline my-2 my-lg-0" role="search">
        <input type="search" class="form-control me-sm-2" aria-label="{{#translate}}{{toggle_nav}}{{/translate}}" name="search-input" data-search-index="{{#site}}{{root}}{{/site}}search.json" id="search-input" placeholder="{{#translate}}{{search_for}}{{/translate}}" autocomplete="off">
      </form>

outside of the div with class="collapse navbar-collapse ms-3", and then mess around with the margin classes (me-, my- etc) to make it look good.

The docs for the collapsing behaviour are at https://getbootstrap.com/docs/5.3/components/navbar/#responsive-behaviors, and the docs for the margin utility classes are at https://getbootstrap.com/docs/5.3/utilities/spacing/.

I don't think I am particularly skilled at this sort of task; I don't understand bootstrap enough to accurately predict what changes I need to make, so I just do a lot of guess and checking 😄.

[olivroy]

I will keep trying to look into it.

Quarto does this by default..

http://www.cranhaven.org/

[hadley]

Hmmm, this might be in direct conflict with #2449, since search is no longer special cased.

[olivroy]

You are right! I generally like how Quarto does things. (doesn't seem possible to select search position exactly, just navbar or sidebar is available) https://quarto.org/docs/websites/website-search.html#search-appearance

[hadley]

I've decided that this probably isn't going to be possible in pkgdown, because we can't just have an icon like quarto, because our search works differently. I think that means it'll generally make the mobile navbar, especially for packages with longer names.