[web-php] PR #1084: Update navbar design and improve search UI

Pull Request: https://github.com/php/web-php/pull/1084 Author: lhsazevedo > [!TIP] > You can view this proposal live at: > https://php-navbar.lhsazevedo.dev/ ## Intro Over the years, the PHP webpage has seen various design proposals, some of which didn't gain traction due to their drastic nature or departure from PHP's established branding style. However, our community has shown that we can successfully implement design improvements when they're thoughtful and incremental – the PHP 8 [release pages](https://github.com/php/web-php/pull/350), [homepage hero](https://github.com/php/web-php/pull/459) and [thanks page](https://github.com/php/web-php/pull/684) are great examples of this approach. Inspired by these successful updates and the valuable discussions they sparked, I'd like to propose some updates to the navbar design and introduces a new search dialog to enhance the user experience on php.net. These changes are inspired by modern web design principles while respecting PHP's established branding and build upon [previous community discussions](https://github.com/php/web-php/pull/602). By focusing on targeted enhancements rather than a full redesign, we hope to improve the site's usability and aesthetics without disrupting its familiar layout and branding. ## UI/UX Scope It's worth noting that while the current client-side search implementation could be considered outdated, replacing it would be beyond the scope of this design improvement. Such a change would require a separate, focused effort. This proposal aims to enhance the user interface and experience while maintaining the existing search functionality, setting the stage for potential future improvements to the search implementation itself. ## Enhancements and Rationale 1. **Modernized Navbar Design**: - A responsive navbar with improved mobile navigation. - Ensures a consistent experience across devices, addressing the growing mobile user base while maintaining PHP's established visual identity. 2. **New Search Dialog**: - A sleek, user-friendly search modal with keyboard navigation and enhanced UI. - Improves accessibility with proper ARIA attributes and keyboard navigation, making php.net more inclusive. 3. **Retained Search Functionality**: - Integration of the existing FuzzySearch with the new UI. - Maintains familiar search behavior while setting the stage for future improvements to the search implementation. 4. **Code Improvements** - CSS refactoring and removal of outdated libraries (Hogan.js, typeahead.js). - Improves maintainability, making future enhancements easier to implement. 5. **Enhanced Reliability** - Introduction of Playwright tests for the new search modal. - Ensures the changes don't introduce regressions, maintaining the site's reliability. These changes are designed to be minimally disruptive while offering significant improvements: - Existing users will find a familiar but enhanced experience. - New users will benefit from improved navigation and search. ## Impact and Adoption These changes are designed to be minimally disruptive while offering significant improvements: - Existing users will find a familiar but enhanced experience - New users will benefit from improved navigation and search UI - Developers will appreciate the cleaner, more maintainable codebase ## Preview Please note that the preview site uses an improved search index generated by a companion change I'm proposing to the PHP documentation generator (phd). While both PRs can be merged independently, I've captured the screenshots and recordings using the new index to showcase the full potential of these improvements. You can find the companion PR for the phd changes here: _coming soon_ ### Preview Site You can view this proposal live at: https://php-navbar.lhsazevedo.dev/ ### Desktop preview https://github.com/user-attachments/assets/8137fb65-1e90-4b93-a185-708aa766e79b ### Mobile preview https://github.com/user-attachments/assets/ad25d7e4-8ad2-4ca6-99a5-f92c49266d75 ## Comparison <details> <summary>View GIF comparisons (image heavy)</summary> ### Desktop comparison #### Navbar  #### Search modal dialog  ### Mobile comparison #### Navbar  #### Navigation  #### Search  </details> ## Final thoughts I believe these improvements will benefit the PHP community while respecting the site's established design principles. I look forward to your feedback and collaboration in refining this proposal. If you find this proposal valuable or have any concerns, I'd greatly appreciate your feedback. Please consider leaving a 👍 or 👎 to help gauge the community's interest in these changes.