Make entire header text + chevron clickable.

dannon · Nov 6, 2023 · b919c71 · b919c71
1 parent 5f5a18b
commit b919c71
Showing 1 changed file with 5 additions and 7 deletions.
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
@@ -37,23 +37,21 @@ const element = computed(() => {
 <template>
     <div v-if="props.separator" class="separator heading">
         <div class="stripe"></div>
-        <component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
+        <component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']" @click="$emit('click')">
             <slot />
-            <FontAwesomeIcon
-                v-if="collapsible"
-                :icon="collapsed ? 'chevron-down' : 'chevron-up'"
-                @click="$emit('click')" />
+            <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />
         </component>
         <div class="stripe"></div>
     </div>
     <component
         :is="element"
         v-else
         class="heading"
-        :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']">
+        :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']"
+        @click="$emit('click')">
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
         <slot />
-        <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" @click="$emit('click')" />
+        <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />
     </component>
 </template>