Use navbar-nav class on text links only (#1846)

This pull request fixes #1839 while also trying to simplify the way we
use the Boostrap "navbar-nav" class.

Prior to this PR, we have both:

1. "navbar-nav" **class** applied to **text** links rendered by
"navbar-nav" **template**
2. "navbar-nav" class applied to **icon** links rendered by
"navbar-icon-links" template

This is what led to the bug in #1839 because I must have thought that
the .navbar-nav selector was for the text links, **not** the icon links.

I see two possible ways of resolving this ambiguity:

1. Keep the navbar-nav class on the text links, but remove it from the
icon links. This requires adding some style rules to the icon links so
they look the same with and without the class. This is the option shown
in this PR.
3. Keep the navbar-nav class on both sets of links, but change the name
of the navbar-nav template to something else. This would require
updating the docs, and I think it would also require theme adopters to
update their theme config files, which is why I didn't choose this
option.

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>

Author: gabalafou

src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss

@@ -7,6 +7,10 @@
   flex-flow: row wrap;
   column-gap: 1rem;
   justify-content: space-evenly;
+  align-items: center;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
 
   // Remove the padding so that we can define it with flexbox gap above
   li.nav-item a.nav-link {

src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss

@@ -1,7 +1,8 @@
 /**
- * Navigation text links in the navbar
+ * Navigation links in the navbar and icon links
  */
-.navbar-nav {
+.navbar-nav,
+.navbar-icon-links {
   ul {
     display: block;
     list-style: none;

src/pydata_sphinx_theme/assets/styles/sections/_header.scss

@@ -85,7 +85,7 @@
     display: flex;
 
     @include media-breakpoint-up($breakpoint-sidebar-primary) {
-      // Center align on wide screens so the dropdown button is centered properly
+      // Align on wide screens so the dropdown button is centered properly
       align-items: baseline;
     }
 

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html

@@ -27,7 +27,7 @@
   {%- endif -%}
 {%- endmacro -%}
 {%- if theme_icon_links -%}
-<ul class="navbar-icon-links navbar-nav"
+<ul class="navbar-icon-links"
     aria-label="{{ theme_icon_links_label }}">
   {%- for icon_link in theme_icon_links -%}
     {{ icon_link_nav_item(icon_link["url"], icon_link["icon"], icon_link["name"], icon_link.get("type", "fontawesome"), icon_link.get("attributes", {})) -}}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-nav.html

@@ -1,5 +1,5 @@
 {# Displays links to the top-level TOCtree elements, in the header navbar. #}
-<nav class="navbar-nav">
+<nav>
   <ul class="bd-navbar-elements navbar-nav">
     {{ generate_header_nav_html(n_links_before_dropdown=theme_header_links_before_dropdown, dropdown_text=theme_header_dropdown_text) }}
   </ul>

tests/test_build/navbar_icon_links.html

@@ -1,4 +1,4 @@
-<ul aria-label="Icon Links" class="navbar-icon-links navbar-nav">
+<ul aria-label="Icon Links" class="navbar-icon-links">
  <li class="nav-item">
   <a class="nav-link" data-bs-placement="bottom" data-bs-toggle="tooltip" href="https://site1.org" rel="noopener" target="_blank" title="FONTAWESOME">
    <span>

tests/test_build/navbar_ix.html

@@ -1,6 +1,6 @@
 <div class="me-auto navbar-header-items__center">
  <div class="navbar-item">
-  <nav class="navbar-nav">
+  <nav>
    <ul class="bd-navbar-elements navbar-nav">
     <li class="nav-item pst-header-nav-item">
      <a class="nav-link nav-internal" href="page1.html">

tests/test_build/sidebar_subpage.html

@@ -2,7 +2,7 @@
  <div class="sidebar-header-items sidebar-primary__section">
   <div class="sidebar-header-items__center">
    <div class="navbar-item">
-    <nav class="navbar-nav">
+    <nav>
      <ul class="bd-navbar-elements navbar-nav">
       <li class="nav-item pst-header-nav-item">
        <a class="nav-link nav-internal" href="../page1.html">