From b78cf5ffd09d8bfc2076aab86c50e143a5a115c6 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 28 Sep 2022 12:48:23 +0200
Subject: [PATCH] WIP: Add arrow animation

---
 client/src/components/competences/CompetenceDetail.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 4ee9f1c8..04772ad6 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -21,10 +21,12 @@ const togglePerformanceCriteria = () => {
          class="-mx-8 px-8">
       <div class="mb-4 flex flex-row justify-between items-center">
         <h2 class="text-large">{{competence.description}}</h2>
-        <button><it-icon-arrow-down
-          @click="togglePerformanceCriteria()"
-          class="h-10 w-10"
-          aria-hidden="true"/></button>
+        <button class="transition-transform"
+            :class="{'rotate-180': isOpen}">
+          <it-icon-arrow-down
+            @click="togglePerformanceCriteria()"
+            class="h-10 w-10"
+            aria-hidden="true"/></button>
       </div>
       <ComptenceProgress
       :total="7"