FRONTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEND

2 files changed, 17 insertions, 9 deletions

diff --git a/profile/public/style.css b/profile/public/style.css
index b1bd964..c417a7e 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -53,25 +53,29 @@ img {
     opacity: 0.8;
 }
 
-#user h1 {
+#user h1,
+#comments h2 {
     cursor: pointer;
 }
 
-#user h1:hover {
+#user h1:hover,
+#comments h2:hover {
     opacity: 0.8;
 }
 
-#comments div {
-    display: flex;
-    justify-content: space-between;
+#user h1:after,
+#comments h2:after {
+    content: url(/feather/icons/chevron-up.svg);
 }
 
-#comments h1 {
-    cursor: pointer;
+#user h1.bananenkuchen:after,
+#comments h2.bananenkuchen:after {
+    content: url(/feather/icons/chevron-down.svg);
 }
 
-#comments h1:hover {
-    opacity: 0.8;
+#comments div {
+    display: flex;
+    justify-content: space-between;
 }
 
 #comments span {
diff --git a/profile/public/user.js b/profile/public/user.js
index 1f93891..76aedc8 100644
--- a/profile/public/user.js
+++ b/profile/public/user.js
@@ -22,6 +22,8 @@ function addUser(userData) {
         qDivs.forEach(
             (div) => (div.style.display = !div.style.display || div.style.display === "block" ? "none" : "block"),
         );
+        if (h1.classList.contains("bananenkuchen")) h1.classList.remove("bananenkuchen");
+        else h1.classList.add("bananenkuchen");
     });
     userDiv.append(h1, ...divs);
 }
@@ -34,6 +36,8 @@ async function addComments(comments) {
         qDivs.forEach(
             (div) => (div.style.display = !div.style.display || div.style.display === "flex" ? "none" : "flex"),
         );
+        if (h2.classList.contains("bananenkuchen")) h2.classList.remove("bananenkuchen");
+        else h2.classList.add("bananenkuchen");
     });
     const divs = [];
     for (const comment of comments) {