How to customize the wiki header search field to be centered?

Some use cases of XWiki can benefit from a centered search field in the header.

However, this does not benefit all instances, so this feature is not included in XWiki standard. Here is a description on how to customize your own wiki to have this centered search.

1. Edit the objects of the page XWiki.QuickSearchUIX to remove the "hiding the input" logic
   1. Update the default template of the Search in the content of the UIExtensionClass object:
      1. Remove the globalsearch-close class from the form.
      2. Remove the aria-expanded='false' attribute from the button.
      3. Remove the disabled attribute from the input.
         
         You should end up with something similar to:
         <form class='navbar-form globalsearch form-inline' id='globalsearch' action='$searchURL' role='search'>
           <label class='hidden' for='headerglobalsearchinput'>$services.localization.render('search')</label>
           <button type='submit' class='btn' title="$services.localization.render('search')">$services.icon.renderHTML('search')</button>
           <input type='text' name='text' placeholder="$services.localization.render('panels.search.inputText')" id='headerglobalsearchinput' />
         </form>
   2. Replace the event listeners in the JavascriptExtension object.
      1. Update the search button click . You should simplify it to remove any call to the showSearchInput and hideSearchInput functions. The listener should look like this after your changes:
         globalSearchButton.on('click', function() {return globalSearchInput.val().length > 0});
      2. Update the focusout event listener and replace the call to hideSearchInput with a simple fire of the event used to close the suggestion dropdown. The listener should look like this after your changes:
         globalSearch.on('focusout', function() {
           setTimeout( function () {
            document.fire('xwiki:suggest:collapsed');
           }, 1);
         });
         At this point, the search should look like this as soon as you reload the page:
         
2. Update the style of the search box so that it's actually centered:
   1. Create a StyleSheetExtension object on the page XWiki.QuickSearchUIX . Configure it as a LESS type, and use this extension On demand only. Then fill this extension content with:
      #globalsearch > button.btn {
       background-color: @navbar-default-bg;
      }
      form#globalsearch.navbar-form {
       margin-left: -50vw;
       flex-direction: row;
      }
   2. Add a line to the UIExtensionClass template you already updated above to make sure your pages uses your new StyleSheetExtension:
      #set ($discard = $xwiki.ssx.use('XWiki.QuickSearchUIX'))
      You should add this line after the very similar jsx use.
      After this last step, you should obtain a centered and always expanded search field: