From 90050a2d8723d44acff180cfe1bbb7d7416c4a4a Mon Sep 17 00:00:00 2001
From: Tibo De Peuter <tibo.depeuter@ugent.be>
Date: Mon, 19 May 2025 15:23:07 +0200
Subject: [PATCH] chore(frontend): Vuetify collapsables

---
 .../components/DiscussionSideBarElement.vue   | 51 +++----------------
 .../src/components/DiscussionsSideBar.vue     |  4 +-
 2 files changed, 9 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/DiscussionSideBarElement.vue b/frontend/src/components/DiscussionSideBarElement.vue
index 3bdbe79f..37592638 100644
--- a/frontend/src/components/DiscussionSideBarElement.vue
+++ b/frontend/src/components/DiscussionSideBarElement.vue
@@ -29,24 +29,14 @@
             }
         }
     });
-
-    function toggleDropdown(): void {
-        dropdownEnabled.value = !dropdownEnabled.value;
-    }
 </script>
 
 <template>
-    <main>
-        <div
-            class="dropdown-toggle"
-            @click="toggleDropdown()"
-        >
-            ▼{{ path.title }}
-        </div>
-        <div
-            class="dropdown"
-            v-if="dropdownEnabled"
-        >
+    <v-expansion-panel>
+        <v-expansion-panel-title>
+            {{ path.title }}
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
             <using-query-result
                 :query-result="learningObjectListQueryResult"
                 v-slot="learningObjects: { data: LearningObject[] }"
@@ -67,36 +57,9 @@
                     </v-list-item>
                 </template>
             </using-query-result>
-        </div>
-    </main>
+        </v-expansion-panel-text>
+    </v-expansion-panel>
 </template>
 
 <style scoped>
-    .dropdown {
-        margin-left: 0.5rem;
-        padding-left: 1rem;
-        border-left: 2px solid #e0e0e0;
-        background-color: #f9f9f9;
-        border-radius: 4px;
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
-    }
-    .dropdown-toggle {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        font-weight: 600;
-        user-select: none;
-        padding: 0.5rem;
-        transition: color 0.2s;
-    }
-
-    .dropdown-toggle:hover {
-        color: #27c53f;
-    }
-
-    .dropdown-icon {
-        margin-right: 0.5rem;
-        font-size: 0.9rem;
-    }
 </style>
diff --git a/frontend/src/components/DiscussionsSideBar.vue b/frontend/src/components/DiscussionsSideBar.vue
index a85da52d..58f148e6 100644
--- a/frontend/src/components/DiscussionsSideBar.vue
+++ b/frontend/src/components/DiscussionsSideBar.vue
@@ -31,7 +31,7 @@
                 </template>
             </v-list-item>
             <v-divider></v-divider>
-            <div>
+            <v-expansion-panels>
                 <using-query-result
                     :query-result="allLearningPathsResult"
                     v-slot="learningPaths: { data: LearningPath[] }"
@@ -44,7 +44,7 @@
                     >
                     </DiscussionSideBarElement>
                 </using-query-result>
-            </div>
+            </v-expansion-panels>
         </div>
     </v-navigation-drawer>
     <div class="control-bar-above-content">