feat(directory): add a popup for dropdown menu

directory/src/component/dropdown.jsx

@@ -20,6 +20,11 @@ export default function Dropdown(props) {
         >
           <span className={classes.content}>{props.text}</span>
           <span className={classes.icon}></span>
+          <section
+            className={classes.popup}
+          >
+            <span className={classes.text}>{props.altText}</span>
+          </section>
         </section>
         <ul className={classes.menu} style={props.activeColor}>
           {
@@ -75,4 +80,5 @@ Dropdown.propTypes = {
   onClick: PropTypes.func,
   activeColor: PropTypes.object,
   activeRule: PropTypes.func,
+  altText: PropTypes.string,
 };

directory/src/component/scss/dropdown.module.scss

@@ -11,6 +11,36 @@
     flex-direction: row;
     align-items: center;
     color: var(--text-color);
+
+    &:hover {
+      .popup {
+        visibility: unset;
+        opacity: 1;
+      }
+    }
+
+    .popup {
+      opacity: 0;
+      position: absolute;
+      background-color: var(--root-background-color);
+      width: max-content;
+      height: max-content;
+      max-height: 61.8vh;
+      max-width: 61.8vw;
+      z-index: -1;
+      top: 2em;
+      right: 0;
+      cursor: auto;
+      transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+      overflow: auto;
+      padding: 0.5rem;
+      border: 1px solid var(--border-color);
+      visibility: hidden;
+
+      .text {
+        font-size: 1rem;
+      }
+    }
   }
 
   .content {