feat(catalog row): add post menu button

src/components/catalog-row/catalog-row.module.css

@@ -79,11 +79,36 @@
   text-decoration: none;
 }
 
+.postMenuBtnPadding {
+  left: 5px;
+  top: 5px;
+  position: relative;
+}
+
 .postMenuBtn {
   position: absolute;
-  display: inline-block;
-  padding-left: 5px;
+  bottom: 5px;
+  line-height: 1em;
+  color: var(--catalog-post-menu-btn-color);
+  opacity: 0;
+  transition: transform 0.1s;
+}
 
-  width: 1em;
-  height: 1em
+.post:hover .postMenuBtn {
+  opacity: var(--catalog-post-menu-btn-opacity);
+}
+
+.post:hover .postMenuBtn:hover {
+  cursor: pointer;
+  color: var(--catalog-post-menu-btn-hover-color);
+  opacity: var(--catalog-post-menu-btn-hover-opacity);
+}
+
+.postMenuBtn {
+  /* preserve unicode triangle for button, some browsers will use an emoji */
+  font-variant: normal;
+  font-feature-settings: "tnum";
+  -webkit-font-feature-settings: "tnum"; /* Chrome, Opera, and Safari */
+  -moz-font-feature-settings: "tnum";    /* Firefox */
+  font-variant-numeric: tabular-nums;
 }

src/components/catalog-row/catalog-row.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -69,6 +70,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
     </div>
   );
 
+  const [menuBtnRotated, setMenuBtnRotated] = useState(false);
+
   return (
     <div className={styles.post}>
       {hasThumbnail ? (
@@ -91,8 +94,15 @@ const CatalogPost = ({ post }: { post: Comment }) => {
             / L: <b>{linkCount}</b>
           </span>
         )}
-        <span className={styles.postMenuBtn} title='Thread Menu'>
-          ▶
+        <span className={styles.postMenuBtnPadding}>
+          <span
+            className={styles.postMenuBtn}
+            title='Thread Menu'
+            onClick={() => setMenuBtnRotated(!menuBtnRotated)}
+            style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
+          >
+            ▶
+          </span>
         </span>
       </div>
       <Link to={postLink}>