Parsing questionnaire from yml

src/components/Expandable/index.svelte

@@ -14,41 +14,15 @@
   }
 </script>
 
-<div>
-  <div
-    class="item relative flex items-center {isGroupActive && 'active'}"
-    role="button"
-    tabindex="0"
-    on:click={onClick}
-  >
-    {#if !hideSortIcon}
-      <CaretSortDown20
-        class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
-      />
-    {/if}
-    <span class="pl-6 py-2 font-bold">{label}</span>
-  </div>
-  {#if isExpanded}
-    <div class="flex flex-col">
-      <!-- {#each subMenuItems as item}
-        <a class="item {item.isActive && 'active'} pl-6 py-2" href={item.link}>
-          # <span>{item.title}</span>
-        </a>
-      {/each} -->
-      <slot />
-    </div>
-  {/if}
-</div>
-
 <style>
   :global(svg.carbon-icon-sort) {
     position: absolute;
-    top: 3px;
+    top: 8px;
     left: 0;
   }
   :global(svg.carbon-icon-minimize) {
     transform: rotate(270deg);
-    top: 10px;
+    top: 13px;
     left: -6px;
   }
 
@@ -61,7 +35,30 @@
     padding-left: 1.3rem;
   }
 
+  .item span {
+    padding: 12px 24px;
+  }
+
   .item:hover {
     background-color: #cae2f9;
   }
 </style>
+
+<div>
+  <div
+    class="item relative flex items-center {isGroupActive && 'active'}"
+    role="button"
+    tabindex="0"
+    on:click={onClick}>
+    {#if !hideSortIcon}
+      <CaretSortDown20
+        class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}" />
+    {/if}
+    <span class="font-bold">{label}</span>
+  </div>
+  {#if isExpanded}
+    <div class="flex flex-col">
+      <slot />
+    </div>
+  {/if}
+</div>