fix(main.ts style.css): add animation to sidebar dropdown menu (#452)

Author: mukadas026

src/main.ts

@@ -121,7 +121,7 @@ const dropDownElements = document.querySelectorAll('.dropdown');
 const getDegreeElement = getRange('animation');
 const getRadioButtonSetElement = getRadioButtonSet('animation');
 const getDurationElement = getInputSpinner('animation');
-const events = ["dragover", "drop"];
+const events = ['dragover', 'drop'];
 
 if (openSidePanelButton) {
   openSidePanelButton.style.display = 'none';
@@ -333,10 +333,10 @@ document.addEventListener('click', (e: Event) => {
 });
 
 // Disable file opening in browser
-for ( let event of events) {
+for (let event of events) {
   document.addEventListener(event, (e) => {
     e.preventDefault();
-  })
+  });
 }
 
 // clicking on the menu icon should close the nav bar
@@ -432,6 +432,28 @@ getRadioButtonSetElement.forEach((radioButton: HTMLInputElement) => {
 
 // configuring dropdown menu
 dropDownElements.forEach((dropDown) => {
+  // add click event listener to the dropdown parent element
+  dropDown.addEventListener('click', (e) => {
+    // keep dropdown open when a subitem is clicked on
+    e.stopPropagation();
+    const target = e.target as HTMLElement;
+    if (!dropDown.children[0].innerHTML.includes(target.outerHTML)) return;
+
+    const listElement = dropDown.lastElementChild as HTMLElement;
+    if (listElement.id === 'showList') {
+      listElement.id = '';
+      return;
+    }
+
+    // clear other open dropdown menus
+    dropDownElements.forEach((dropdown) => {
+      const listElement = dropdown.lastElementChild as HTMLElement;
+      listElement.id = '';
+    });
+
+    listElement.id = 'showList';
+  });
+
   const listElement = dropDown.lastElementChild as HTMLElement;
 
   // loop through children of dropdown and add event listener to each child

src/style.css

@@ -115,19 +115,26 @@ nav ul {
 .dropdown > ul {
   visibility: hidden;
   position: relative;
-  height: 0px;
+  max-height: 0px;
+  opacity: 0;
+  transform: scaley(0);
+  transform-origin: 50% 0;
+  margin-bottom: 10px;
 }
 
 .dropdown > ul {
-  transition: 350ms transform;
+  transition-property: transform, max-height, opacity;
+  transition-duration: 350ms;
+  /* transition: transform 350ms, max-height 350ms, opacity 350ms; */
   transition-timing-function: ease-in-out;
 }
 
-.dropdown:hover > ul,
+/* .dropdown:hover > ul, */
 #showList {
   visibility: visible;
-  height: fit-content;
-  transform: translateX(10px);
+  max-height: 50px;
+  opacity: 1;
+  transform: scale(1) translateX(10px);
 }
 
 #category {