Doc menu items are not collapsible #24963 (#641)

* Created globaltoc.js file that makes the sidebar's active submenus collapsible

* fix pre-commit errors + excluded sphinx_airflow_theme folder from being linted

.pre-commit-config.yaml

@@ -139,6 +139,7 @@ repos:
  entry: ./site.sh lint-js
  language: system
  files: \.js$
+ exclude: ^sphinx_airflow_theme/
  - repo: https://github.com/pre-commit/pre-commit-hooks
  rev: v2.3.0
  hooks:

sphinx_airflow_theme/sphinx_airflow_theme/__init__.py

@@ -37,5 +37,6 @@ def setup_my_func(app, config):
 def setup(app: Sphinx):
  app.add_html_theme('sphinx_airflow_theme', path.abspath(path.dirname(__file__)))
  app.add_css_file('_gen/css/main-custom.min.css')
+ app.add_js_file('js/globaltoc.js')
  app.connect("config-inited", setup_my_func)
  return {"version": "__version__", "parallel_read_safe": True, "parallel_write_safe": True}

sphinx_airflow_theme/sphinx_airflow_theme/static/js/globaltoc.js

@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// The script adds a 'click' eventListener to the 'span.toctree-expand' element that makes the active submenus collapsible.
+// To make the submenus collapsible is sufficient to add/remove the 'current' class to the active 'li.toctree-l1' element.
+$("span.toctree-expand").on("click", function() {
+ $(this).closest("li").toggleClass("current");
+});