Add ability to do nested dropdowns in navbar

docs/conf.py

@@ -18,7 +18,7 @@
 
 project = "sunpy-sphinx-theme test docs"
 author = "The SunPy Community"
-copyright = f"{datetime.datetime.now(datetime.UTC).year}, {author}"  # NOQA: A001
+copyright = f"{datetime.datetime.now(datetime.timezone.utc).year}, {author}"  # NOQA: A001
 extensions = [
     "sphinx_automodapi.automodapi",
     "sphinx_automodapi.smart_resolver",
@@ -70,6 +70,9 @@
 }
 html_theme = "sunpy"
 html_static_path = [str(_sunpy_static_path), "_static"]
+html_js_files = [
+    "js/submenu-toggle.js",
+]
 html_extra_path = ["_static/img"]
 html_theme_options = {
     "footer_links": [

src/sunpy_sphinx_theme/__init__.py

@@ -36,21 +36,37 @@ def default_navbar():
         (
             "Documentation",
             [
+                # Core packages shown directly
                 ("sunpy", "https://docs.sunpy.org/", 3),
-                ("ndcube", "https://docs.sunpy.org/projects/ndcube/", 3),
+                ("aiapy", "https://aiapy.readthedocs.io/", 3),
                 ("drms", "https://docs.sunpy.org/projects/drms/", 3),
-                ("sunraster", "https://docs.sunpy.org/projects/sunraster/", 3),
+                ("dkist", "https://docs.dkist.nso.edu/projects/python-tools", 3),
+                ("ndcube", "https://docs.sunpy.org/projects/ndcube/", 3),
+                ("roentgen", "https://roentgen.readthedocs.io/", 3),
                 ("sunkit-image", "https://docs.sunpy.org/projects/sunkit-image/", 3),
-                ("aiapy", "https://aiapy.readthedocs.io/", 3),
+                ("sunkit-instruments", "https://docs.sunpy.org/projects/sunkit-instruments/", 3),
+                ("sunkit-magex", "https://docs.sunpy.org/projects/sunkit-magex/", 3),
                 ("sunpy-soar", "https://docs.sunpy.org/projects/soar/", 3),
-                ("roentgen", "https://roentgen.readthedocs.io/", 3),
-                ("sunkit-instruments ", "https://docs.sunpy.org/projects/sunkit-instruments/", 3),
-                ("demcmc", "https://demcmc.readthedocs.io/en/latest/", 3),
-                ("dkist", "https://docs.dkist.nso.edu/projects/python-tools", 3),
                 ("solarmach", "https://solarmach.readthedocs.io/en/stable/", 3),
-                ("sunkit-magex", "https://docs.sunpy.org/projects/sunkit-magex/", 3),
-                ("pyflct", "https://pyflct.readthedocs.io/", 3),
-                ("radiospectra", "https://docs.sunpy.org/projects/radiospectra/", 3),
+                ("sunraster", "https://docs.sunpy.org/projects/sunraster/", 3),
+                # Provisional packages submenu
+                (
+                    "Provisional",
+                    [
+                        ("pyflct", "https://pyflct.readthedocs.io/", 3),
+                        ("radiospectra", "https://docs.sunpy.org/projects/radiospectra/", 3),
+                    ],
+                ),
+                # Tools submenu
+                (
+                    "Tools",
+                    [
+                        ("ablog", "https://ablog.readthedocs.io/en/stable/", 3),
+                        ("demcmc", "https://demcmc.readthedocs.io/en/stable/", 3),
+                        ("mpl-animators", "https://docs.sunpy.org/projects/mpl-animators/", 3),
+                        ("streamtracer", "https://docs.sunpy.org/projects/streamtracer/", 3),
+                    ],
+                ),
             ],
         ),
         ("Packages", "affiliated/", 2),

src/sunpy_sphinx_theme/conf.py

@@ -26,6 +26,7 @@
     "svg_icon",
 ]
 
+
 html_theme = "sunpy"
 html_theme_options = {}
 

src/sunpy_sphinx_theme/theme/sunpy/components/navbar_center.html

@@ -8,31 +8,56 @@
 {% set toggle="collapse" %}
 {% set list_class="collapse" %}
 {% endif %}
+{% macro render_nav_item(item, depth=0) %}
+  {% set is_leaf = item[1] is string %}
+  {% set is_nested = item[1] is iterable and (item[1]|length > 0) and (item[1][0] is sequence or item[1][0] is mapping) %}
+
+  {% if is_leaf %}
+    <li class="nav-item{% if depth > 0 %} dropdown-submenu{% endif %} ms-2">
+      <a
+        class="{% if depth == 0 %}nav-link{% else %}dropdown-item{% endif %}"
+        href="{{ sst_pathto(*item[1:]) }}">
+        {{ item[0] }}
+      </a>
+    </li>
+
+  {% elif is_nested %}
+    {% set submenu_id = item[0]|replace(" ", "_")|lower %}
+    <li class="nav-item dropdown{% if depth > 0 %} dropdown-submenu{% endif %} ms-2">
+      <a
+        href="#"
+        class="dropdown-toggle {% if depth > 0 %}dropdown-item{% else %}nav-link{% endif %}"
+        id="dropdownMenu_{{ submenu_id }}"
+        {% if depth == 0 %} data-bs-toggle="dropdown" {% endif %}
+        role="button"
+        aria-expanded="false">
+        {{ item[0] }}
+      </a>
+      <ul
+        class="dropdown-menu{% if depth > 0 %} dropdown-submenu-menu{% endif %}"
+        aria-labelledby="dropdownMenu_{{ submenu_id }}">
+        {% for subitem in item[1] %}
+          {{ render_nav_item(subitem, depth + 1) }}
+        {% endfor %}
+      </ul>
+    </li>
+  {% endif %}
+{% endmacro %}
 
 <nav class="navbar-nav">
   <ul class="bd-navbar-elements navbar-nav">
     {% if theme_navbar_links %}
-      {%- for navlink in theme_navbar_links %}
-        {% if navlink[1] is not string %}
-          <li class="nav-item dropdown ms-2 has-children">
-              <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="{{ toggle }}" data-bs-target="#{{ navlink[0] }}" aria-haspopup="true" aria-expanded="false">{{ navlink[0] }}<b class="caret"></b></a>
-              <ul class="{{ list_class }}" id="{{ navlink[0] }}" aria-labelledby="dropdownMenuLink">
-              {%- for link in navlink[1] %}
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ sst_pathto(*link[1:]) }}">{{ link[0] }}</a>
-                </li>
-              {%- endfor %}
-              </ul>
-          </li>
-        {% else %}
-          <li class="nav-item ms-2"><a class="nav-link" role="button" href="{{ sst_pathto(*navlink[1:]) }}">{{ navlink[0] }}</a></li>
-        {% endif %}
-      {%- endfor %}
+      {% for navlink in theme_navbar_links %}
+        {{ render_nav_item(navlink) }}
+      {% endfor %}
     {% endif %}
+
     {% if theme_external_links %}
-      {%- for external_link in theme_external_links %}
-          <li class="nav-item ms-2"><a class="nav-link nav-external" role="button" href="{{ external_link['url'] }}">{{ external_link['name'] }}</a></li>
-      {%- endfor %}
+      {% for external_link in theme_external_links %}
+        <li class="nav-item ms-2">
+          <a class="nav-link nav-external" href="{{ external_link['url'] }}">{{ external_link['name'] }}</a>
+        </li>
+      {% endfor %}
     {% endif %}
   </ul>
 </nav>

src/sunpy_sphinx_theme/theme/sunpy/static/js/submenu-toggle.js

@@ -0,0 +1,54 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Setup toggle for nested submenus
+  const triggers = document.querySelectorAll(
+    ".dropdown-submenu > .dropdown-toggle",
+  );
+
+  triggers.forEach(function (trigger, i) {
+    trigger.dataset.bound = "true";
+    trigger.addEventListener("click", function (e) {
+      if (trigger.dataset.processing === "true") return;
+
+      trigger.dataset.processing = "true";
+      setTimeout(() => delete trigger.dataset.processing, 100);
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const submenu = trigger.nextElementSibling;
+
+      // Close other submenus at this level
+      const parent = trigger.closest(".dropdown-menu");
+      if (parent) {
+        parent.querySelectorAll(".dropdown-menu.show").forEach(function (open) {
+          if (open !== submenu) {
+            open.classList.remove("show");
+          }
+        });
+      }
+
+      submenu.classList.toggle("show");
+    });
+  });
+
+  // Close all open submenus when a top-level dropdown is closed
+  document.querySelectorAll(".dropdown").forEach(function (dropdown) {
+    dropdown.addEventListener("hide.bs.dropdown", function () {
+      dropdown
+        .querySelectorAll(".dropdown-menu.show")
+        .forEach(function (submenu) {
+          submenu.classList.remove("show");
+        });
+    });
+  });
+
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape") {
+      document
+        .querySelectorAll(".dropdown-menu.show")
+        .forEach(function (submenu) {
+          submenu.classList.remove("show");
+        });
+    }
+  });
+});

src/sunpy_sphinx_theme/theme/sunpy/static/sunpy_style.css

@@ -412,3 +412,26 @@ html[data-theme="dark"] .search-button-field:hover {
     align-items: center;
   }
 }
+
+/* Position submenu beside parent */
+.dropdown-submenu {
+  position: relative;
+}
+
+.navbar-nav .dropdown-item {
+  color: var(--sst-header-text);
+}
+
+/* Initially hidden */
+.dropdown-submenu > .dropdown-menu {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  display: none;
+  z-index: 1000;
+}
+
+/* Show when toggled */
+.dropdown-submenu > .dropdown-menu.show {
+  display: block;
+}