Add animations to navbar dropdowns on mobile

.github/CHANGELOG.md

@@ -6,6 +6,9 @@
   text and ARIA labels and fixing issues with keyboard navigation.
   [(#43)](https://github.com/XanaduAI/xanadu-sphinx-theme/pull/43)
 
+* Added transition animations to the navbar dropdowns on mobile.
+  [(#44)](https://github.com/XanaduAI/xanadu-sphinx-theme/pull/44)
+
 ### Bug fixes
 
 * Obviated the need for horizontal scrolling on mobile.

xanadu_sphinx_theme/header.html

@@ -118,32 +118,34 @@
           </a>
         </button>
       {% endif %}
-      <ul class="navbar-dropdown mobile">
-        {% if dropdown %}
-          <li>
-            <a href="{{ pathto(href, 1) }}" {% if external %} target="_blank" {% endif %}>
-              {%- if name -%}
-                {{ name }}
-              {%- endif -%}
-              {% if external %}
-                <i class="bx bx-link-external"></i>
-              {% endif %}
-            </a>
-          </li>
-        {% endif %}
-        {% for link in dropdown %}
-          <li>
-            <a href="{{ pathto(link.href, 1) }}" {% if link.external %} target="_blank" {% endif %}>
-              {%- if link.name -%}
-                {{ link.name }}
-              {%- endif -%}
-              {% if link.external %}
-                <i class="bx bx-link-external"></i>
-              {% endif %}
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
+      <div class="navbar-dropdown mobile">
+        <ul>
+          {% if dropdown %}
+            <li>
+              <a href="{{ pathto(href, 1) }}" {% if external %} target="_blank" {% endif %}>
+                {%- if name -%}
+                  {{ name }}
+                {%- endif -%}
+                {% if external %}
+                  <i class="bx bx-link-external"></i>
+                {% endif %}
+              </a>
+            </li>
+          {% endif %}
+          {% for link in dropdown %}
+            <li>
+              <a href="{{ pathto(link.href, 1) }}" {% if link.external %} target="_blank" {% endif %}>
+                {%- if link.name -%}
+                  {{ link.name }}
+                {%- endif -%}
+                {% if link.external %}
+                  <i class="bx bx-link-external"></i>
+                {% endif %}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
     </li>
   {% endmacro %}
 

xanadu_sphinx_theme/layout.html

@@ -515,8 +515,32 @@
 
   <!-- Toggles whether the dropdown from a navbar link is displayed on mobile. -->
   <script type="text/javascript">
+    function getIntStyleProperty(element, property) {
+      const style = window.getComputedStyle(element);
+      return parseInt(style.getPropertyValue(property), 10);
+    }
+
+    function getDropdownHeight(dropdown) {
+      const dropdown_list = dropdown.querySelector("ul");
+      const dropdown_list_items = dropdown_list.querySelectorAll("li");
+      const dropdown_list_gap = getIntStyleProperty(dropdown_list, "gap");
+
+      let dropdown_list_height = -dropdown_list_gap;
+      for (const list_item of dropdown_list_items) {
+        dropdown_list_height += getIntStyleProperty(list_item, "height");
+        dropdown_list_height += dropdown_list_gap
+      }
+      return dropdown_list_height + "px";
+    }
+
     function toggleMobileNavbarLink(button) {
-      button.parentElement.classList.toggle("open");
+      const item = button.parentElement;
+      const dropdown = item.querySelector(".mobile.navbar-dropdown");
+      if (dropdown !== null) {
+        const hidden = button.getAttribute("aria-expanded") === "true";
+        dropdown.style.height = hidden ? "0px" : getDropdownHeight(dropdown);
+      }
+      item.classList.toggle("open");
       toggleAriaAttributes(button);
     }
   </script>

xanadu_sphinx_theme/static/xanadu.css_t

@@ -2081,12 +2081,17 @@ nav {
 
 .mobile.navbar-links {
   background-color: #FFFFFF;
-  display: none;
+  display: block;
   left: 0;
-  height: calc(100% - 50px);
+  height: 0;
   margin-bottom: 0;
+  overflow-y: hidden;
   position: fixed;
   top: 54px;
+  transition-delay: 0, 350ms;
+  transition-duration: 350ms;
+  transition-property: height, visibility;
+  visibility: hidden;
   width: 100%;
   z-index: 3000;
 }
@@ -2104,8 +2109,13 @@ nav {
   border-bottom: 1px solid #CFCFCF;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 0px;
   padding: 16px 0;
+  transition-duration: 350ms;
+}
+
+.mobile.navbar-link.open {
+  gap: 16px;
 }
 
 .mobile.navbar-link-heading {
@@ -2183,7 +2193,17 @@ nav {
 ----------------------------------------------------------------------------- */
 
 .mobile.navbar-link .navbar-dropdown {
-  display: none;
+  display: block;
+  height: 0px;
+  overflow-y: hidden;
+  transition-delay: 0s, 350ms;
+  transition-duration: 350ms;
+  transition-property: height, visibility;
+  visibility: hidden;
+}
+
+.mobile.navbar-link .navbar-dropdown ul {
+  display: flex;
   flex-direction: column;
   list-style-type: none;
   gap: 8px;
@@ -2192,7 +2212,9 @@ nav {
 }
 
 .mobile.navbar-link.open .navbar-dropdown {
-  display: flex;
+  /* The height is automatically calculated in layout.html. */
+  transition-delay: 0s;
+  visibility: visible;
 }
 
 .mobile.navbar-link.open .navbar-link-heading i.bx-chevron-down {
@@ -2228,7 +2250,9 @@ nav {
   }
 
   .mobile.navbar-links.open {
-    display: block;
+    height: calc(100% - 50px);
+    transition-delay: 0s;
+    visibility: visible;
   }
 
   .mobile.navbar-menu {