Header Layout & Button Fixes

[OmarAglan]

Summary

This PR refines the header layout to achieve a "perfect" aesthetic, ensuring all elements are balanced, aligned, and never break across common resolutions.

Key Changes

• Structural Grouping: Split the header into nav-links and nav-actions for better logical separation.
• Zero-Wrap Buttons: Added white-space: nowrap and flex-shrink: 0 to "Log in" and "Sign up" buttons to prevent them from ever wrapping text.
• Visual Baseline Harmony: Aligned all header actions (buttons and search) with a consistent 42px height.
• Balanced Visual Weight: Optimized the search bar's max-width (220px) and simplified the "GitHub" link to create more breathing room.
• Refined Hierarchy: Updated the "Log in" button to a ghost style to emphasize the primary "Sign up" action.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refines the website's header, focusing on aesthetic balance, responsiveness, and an improved user experience. It introduces structural changes to the navigation, ensures consistent sizing and alignment of interactive elements, and enhances the search functionality with better visual feedback and URL formatting. The changes aim to create a more polished and user-friendly header across various screen resolutions.

Highlights

• Header Structure Refactored: Navigation links and action buttons are now logically grouped into nav-links and nav-actions containers within the header for improved organization and styling.
• Button Text Wrapping Prevented: "Log in" and "Sign up" buttons are configured with white-space: nowrap and flex-shrink: 0 to prevent text wrapping and maintain their size, ensuring consistent visual presentation.
• Consistent Vertical Alignment: Key header elements, including buttons and the search input, now share a uniform height of 42px for visual harmony and a consistent baseline.
• Optimized Search Bar Presentation: The search bar's maximum width has been adjusted to 220px, and the "View on GitHub" link simplified to "GitHub" to enhance visual balance and provide more breathing room in the header.
• Visual Hierarchy Refinement: The "Log in" button now uses a ghost style with a transparent border to visually de-emphasize it, drawing more attention to the primary "Sign up" action.
• Enhanced Search Experience: The search functionality now includes a search icon, improved result formatting with user-friendly titles and short URLs, better handling for no-match scenarios, and an escape key listener to close results.
• Improved Mobile Navigation: The mobile menu layout has been updated to better accommodate grouped navigation links and actions, enhancing responsiveness and user experience on smaller screens.

Changelog

• index.html
  • Wrapped navigation links and action buttons within new nav-links and nav-actions div elements.
  • Simplified the "View on GitHub" text to "GitHub".
  • Adjusted formatting for "Start Lesson" links in featured learning paths.
  • Removed trailing newline character at the end of the file.
• nav-xml-search.js
  • Removed embedded CSS styles, delegating styling to style.css.
  • Introduced a formatUrlToTitle utility function to generate user-friendly titles from URLs for search results.
  • Integrated a search icon and wrapped the input in a search-wrapper div.
  • Increased the number of displayed search results from 6 to 8.
  • Enhanced search result display to show both a formatted title and a short URL.
  • Added trim() to the search query for better matching.
  • Implemented an "Escape" key listener to close search results and blur the input.
  • Updated the search component initialization to target .nav-actions instead of nav.
• style.css
  • Adjusted header padding and added gap for better spacing.
  • Refactored nav styling to use flex: 1 and justify-content: flex-end.
  • Introduced new styles for .nav-links and .nav-actions to manage their layout and spacing.
  • Modified general nav a styles to exclude buttons and adjusted font size.
  • Updated .button styles to include height: 42px, font-size: 14px, white-space: nowrap, and flex-shrink: 0.
  • Revised .btn-ghost styles for transparent border and subtle hover effect.
  • Added comprehensive styling for .nav-xml-search, including max-width, search-wrapper, search-icon, input padding, border, shadow, and focus states.
  • Styled .nav-xml-results for positioning, appearance, and individual result items (item-title, item-url).
  • Added styling for a "No matches found" message in search results.
  • Updated media queries for mobile navigation, adjusting nav positioning, nav-links, nav-actions layout, and button sizing for full width.

Activity

• No specific activity (comments, reviews, approvals) was provided in the context for this pull request.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request refactors the header layout and enhances search functionality. However, it introduces two Cross-Site Scripting (XSS) vulnerabilities in nav-xml-search.js due to the use of innerHTML for user-supplied data. Additionally, there's a minor bug where the URL formatting logic doesn't handle .htm file extensions.

[OmarAglan]

Based On the Review, I've updated the search system to address the review feedback:

• Security (XSS): Replaced all innerHTML usage with textContent and createElement to eliminate DOM-based XSS risks in search results and "no matches" messages.
• URL Sanitization: Added protocol validation to ensure only http, https, and relative paths are used, blocking potential javascript: URIs.
• Logic Support: Updated the title formatter to handle both [.html] and .htm file extensions correctly.
• Integration: Fixed the search bar injection to target the new .nav-actions container in the header.