fix: Added collapseIconPostion & updated isOpened prop to opened

frontend/src/components/DocFields.vue

@@ -2,7 +2,7 @@
   <div
     class="my-3 flex items-center justify-between text-lg font-medium sm:mb-4 sm:mt-8"
   >
-    <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
+    <div class="flex h-8 items-center text-xl font-semibold text-ink-gray-8 ">
       {{ __('Data') }}
       <Badge
         v-if="data.isDirty"
@@ -33,7 +33,7 @@
   </div>
   <div
     v-else
-    class="flex flex-col gap-3 mb-3 border border-outline-gray-1 p-3 sm:p-5 rounded-lg"
+    class="flex flex-col gap-3 border border-outline-gray-1 rounded-lg"
   >
     <Fields v-if="sections.data" :sections="sections.data" :data="data.doc" />
   </div>

frontend/src/components/Layouts/AppSidebar.vue

@@ -37,7 +37,7 @@
         <Section
           :label="view.name"
           :hideLabel="view.hideLabel"
-          :isOpened="view.opened"
+          :opened="view.opened"
         >
           <template #header="{ opened, hide, toggle }">
             <div

frontend/src/components/Mobile/MobileSidebar.vue

@@ -38,7 +38,7 @@
               <Section
                 :label="view.name"
                 :hideLabel="view.hideLabel"
-                :isOpened="view.opened"
+                :opened="view.opened"
               >
                 <template #header="{ opened, hide, toggle }">
                   <div

frontend/src/components/Section.vue

@@ -2,15 +2,25 @@
   <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
     <div v-if="!hide" class="flex items-center justify-between">
       <div
-        class="flex h-7 text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
+        class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
+        v-bind="$attrs"
         @click="toggle()"
       >
         <FeatherIcon
+          v-if="collapseIconPosition === 'left'"
+          name="chevron-right"
+          class="h-4 transition-all duration-300 ease-in-out"
+          :class="{ 'rotate-90': opened }"
+        />
+        <span>
+          {{ __(label) || __('Untitled') }}
+        </span>
+        <FeatherIcon
+          v-if="collapseIconPosition === 'right'"
           name="chevron-right"
           class="h-4 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': opened }"
         />
-        {{ __(label) || __('Untitled') }}
       </div>
       <slot name="actions"></slot>
     </div>
@@ -23,13 +33,14 @@
     enter-from-class="max-h-0 overflow-hidden"
     leave-to-class="max-h-0 overflow-hidden"
   >
-    <div v-if="opened">
+    <div v-show="opened">
       <slot v-bind="{ opened, open, close, toggle }" />
     </div>
   </transition>
 </template>
 <script setup>
 import { ref } from 'vue'
+
 const props = defineProps({
   label: {
     type: String,
@@ -39,11 +50,19 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  isOpened: {
+  opened: {
     type: Boolean,
     default: true,
   },
+  collapseIconPosition: {
+    type: String,
+    default: 'left',
+  },
 })
+
+const hide = ref(props.hideLabel)
+const opened = ref(props.opened)
+
 function toggle() {
   opened.value = !opened.value
 }
@@ -55,7 +74,4 @@ function open() {
 function close() {
   opened.value = false
 }
-
-let opened = ref(props.isOpened)
-let hide = ref(props.hideLabel)
 </script>

frontend/src/components/Settings/SidePanelModal.vue

@@ -42,7 +42,11 @@
               class="flex flex-col py-1.5 px-1"
               :class="{ 'border-b': i !== sections.data?.length - 1 }"
             >
-              <Section :is-opened="section.opened" :label="section.label">
+              <Section
+                class="p-2"
+                :label="section.label"
+                :opened="section.opened"
+              >
                 <SectionFields
                   :fields="section.fields"
                   :isLastSection="i == section.data?.length - 1"

frontend/src/pages/Contact.vue

@@ -60,9 +60,7 @@
                         clip-path: inset(22px 0 0 0);
                       "
                     >
-                      <CameraIcon
+                      <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
-                        class="h-6 w-6 cursor-pointer text-white"
-                      />
                     </div>
                   </component>
                 </div>
@@ -129,7 +127,7 @@
             class="flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :is-opened="section.opened" :label="section.label">
+            <Section :label="section.label" :opened="section.opened">
               <template #actions>
                 <Button
                   v-if="i == 0 && isManager()"

frontend/src/pages/Deal.vue

@@ -124,7 +124,11 @@
             class="section flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :is-opened="section.opened" :label="section.label">
+            <Section
+              class="px-2 font-semibold"
+              :label="section.label"
+              :opened="section.opened"
+            >
               <template #actions>
                 <div v-if="section.contacts" class="pr-2">
                   <Link
@@ -189,7 +193,7 @@
                     class="px-2 pb-2.5"
                     :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
                   >
-                    <Section :is-opened="contact.opened">
+                    <Section :opened="contact.opened">
                       <template #header="{ opened, toggle }">
                         <div
                           class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"

frontend/src/pages/Lead.vue

@@ -177,7 +177,11 @@
             class="flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :is-opened="section.opened" :label="section.label">
+            <Section
+              class="px-2 font-semibold"
+              :label="section.label"
+              :opened="section.opened"
+            >
               <SectionFields
                 :fields="section.fields"
                 :isLastSection="i == fieldsLayout.data.length - 1"

frontend/src/pages/MobileContact.vue

@@ -141,7 +141,7 @@
                 class="flex flex-col px-2 py-3 sm:p-3"
                 :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
               >
-                <Section :is-opened="section.opened" :label="section.label">
+                <Section :label="section.label" :opened="section.opened">
                   <SectionFields
                     :fields="section.fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"

frontend/src/pages/MobileDeal.vue

@@ -69,7 +69,7 @@
               class="flex flex-col px-2 py-3 sm:p-3"
               :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
             >
-              <Section :is-opened="section.opened" :label="section.label">
+              <Section :label="section.label" :opened="section.opened">
                 <template #actions>
                   <div v-if="section.contacts" class="pr-2">
                     <Link
@@ -124,7 +124,7 @@
                       class="px-2 pb-2.5"
                       :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
                     >
-                      <Section :is-opened="contact.opened">
+                      <Section :opened="contact.opened">
                         <template #header="{ opened, toggle }">
                           <div
                             class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"

frontend/src/pages/MobileLead.vue

@@ -74,7 +74,7 @@
               class="flex flex-col px-2 py-3 sm:p-3"
               :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
             >
-              <Section :is-opened="section.opened" :label="section.label">
+              <Section :label="section.label" :opened="section.opened">
                 <SectionFields
                   :fields="section.fields"
                   :isLastSection="i == fieldsLayout.data.length - 1"

frontend/src/pages/MobileOrganization.vue

@@ -123,7 +123,7 @@
                 class="flex flex-col px-2 py-3 sm:p-3"
                 :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
               >
-                <Section :is-opened="section.opened" :label="section.label">
+                <Section :label="section.label" :opened="section.opened">
                   <SectionFields
                     :fields="section.fields"
                     :isLastSection="i == fieldsLayout.data.length - 1"

frontend/src/pages/Organization.vue

@@ -112,7 +112,7 @@
             class="flex flex-col p-3"
             :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
           >
-            <Section :is-opened="section.opened" :label="section.label">
+            <Section :label="section.label" :opened="section.opened">
               <template #actions>
                 <Button
                   v-if="i == 0 && isManager()"