fix dropdown menu transition

Author: hmillersarah

web-components/nav-header/nav-header.css

@@ -153,12 +153,13 @@ form div > img {
 
 .dropdown-menu {
     background-color: #282828;
-    height: 0em;
+    max-height: 0;
     z-index: 120;
     transition: all 0.3s ease;
     overflow: hidden;
     position: absolute;
-}
+    transition: all 0.35s linear;
+} 
 
 .dropdown-menu a p {
     font-size: 0.8125em;
@@ -169,7 +170,7 @@ form div > img {
 }
 
 .show-menu {
-    height: 35em;
+    max-height: 60em;
 }
 
 .menu {
@@ -180,23 +181,21 @@ form div > img {
 }
 
 .menu div {
-    display: grid;
-    height: 30em;
-    grid-template-columns: 1fr;
-    grid-template-rows: 4em repeat(5, 1fr);
-    /* align-items: center; */
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.2em;
     margin: 0em 1em;
 }
 
 .menu div h3 {
-    align-self: center;
     padding-left: 0.2em;
 }
 
 .menu div a {
     align-self: start;
     padding: 0.8em;
     transition: 0.3s;
+    width: 100%;
 }
 
 .menu div a:hover {
@@ -234,10 +233,4 @@ form div > img {
     top: 0.3125em;
     width: auto;
     z-index: 3000;
-}
-
-@media  screen and (max-width: 89em) {
-    .show-menu {
-        height: 42em;
-    }
 }

web-components/nav-header/nav-header.js

@@ -117,12 +117,14 @@ function createComponent(html) {
             // Update display of dropdown menu based on checked state
             if (checkedState) {
                 dropdownMenu.classList.add('show-menu');
+                // dropdownMenu.style.maxHeight = '60em';
                 // Make menu items focusable
                 for (let i = 0; i < menuItems.length; i++) {
                     menuItems[i].tabIndex = '0';
                 }
             } else {
                 dropdownMenu.classList.remove('show-menu');
+                // dropdownMenu.style.maxHeight = '0em';
                 // Make menu items non-focusable
                 for (let i = 0; i < menuItems.length; i++) {
                     menuItems[i].tabIndex = '-1';