From 78bee58fbcd84f0ac6030e95b3606934facb93fa Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 13 Sep 2024 12:57:36 -0400
Subject: [PATCH 1/4] feature/FOUR-18857

---
 resources/views/requests/show.blade.php | 936 +++++++++++++-----------
 resources/views/tasks/edit.blade.php    | 732 ++++++++++--------
 2 files changed, 917 insertions(+), 751 deletions(-)

diff --git a/resources/views/requests/show.blade.php b/resources/views/requests/show.blade.php
index cb15a74490..c3ea4233fe 100644
--- a/resources/views/requests/show.blade.php
+++ b/resources/views/requests/show.blade.php
@@ -22,454 +22,450 @@
   ])
 @endsection
 @section('content')
-  <div id="request" class="container-fluid px-3">
-    <div class="d-flex flex-column flex-md-row">
-      <div class="flex-grow-1">
-        <div class="container-fluid">
-          <ul class="nav nav-tabs" id="requestTab" role="tablist">
-            <template v-if="status">
-              @if ($request->status === 'ERROR')
-                <li class="nav-item">
-                  <a class="nav-link active" id="errors-tab" data-toggle="tab" href="#errors" role="tab"
-                    @click="switchTab('errors')" aria-controls="errors" aria-selected="false">{{ __('Errors') }}</a>
-                </li>
-              @endif
-              <li class="nav-item" v-if="showTasks">
-                <a class="nav-link" :class="{ active: activePending }" id="pending-tab" data-toggle="tab"
-                  @click="switchTab('pending')" href="#pending" role="tab" aria-controls="pending"
-                  aria-selected="true">{{ __('Tasks') }}</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" id="overview-tab" data-toggle="tab" href="#overview" role="tab"
-                  aria-controls="overview" aria-selected="false" @click="switchTab('overview')">
-                  {{ __('Overview') }}
-                </a>
-              </li>
-              <li class="nav-item" v-if="showSummary">
-                <a id="summary-tab" data-toggle="tab" href="#summary" role="tab" aria-controls="summary"
-                  @click="switchTab('summary')" aria-selected="false"
-                  v-bind:class="{ 'nav-link':true, active: showSummary && !activePending }">
-                  {{ __('Summary') }}
-                </a>
-              </li>
-              @if ($request->status === 'COMPLETED' && !$request->errors)
-                @can('editData', $request)
+  <div id="request">
+    <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
+    <div class="process-catalog-main" :class="{ 'menu-open': showMenu }">
+      <div class="container-fluid px-3">
+        <div class="d-flex flex-column flex-md-row">
+          <div class="flex-grow-1">
+            <div class="container-fluid">
+              <ul class="nav nav-tabs" id="requestTab" role="tablist">
+                <template v-if="status">
+                  @if ($request->status === 'ERROR')
+                    <li class="nav-item">
+                      <a class="nav-link active" id="errors-tab" data-toggle="tab" href="#errors" role="tab"
+                        @click="switchTab('errors')" aria-controls="errors" aria-selected="false">{{ __('Errors') }}</a>
+                    </li>
+                  @endif
+                  <li class="nav-item" v-if="showTasks">
+                    <a class="nav-link" :class="{ active: activePending }" id="pending-tab" data-toggle="tab"
+                      @click="switchTab('pending')" href="#pending" role="tab" aria-controls="pending"
+                      aria-selected="true">{{ __('Tasks') }}</a>
+                  </li>
                   <li class="nav-item">
-                    <a id="editdata-tab" data-toggle="tab" href="#editdata" role="tab" aria-controls="editdata"
-                      aria-selected="false" class="nav-link" @click="switchTab('editdata')">
-                      {{ __('Data') }}
+                    <a class="nav-link" id="overview-tab" data-toggle="tab" href="#overview" role="tab"
+                      aria-controls="overview" aria-selected="false" @click="switchTab('overview')">
+                      {{ __('Overview') }}
+                    </a>
+                  </li>
+                  <li class="nav-item" v-if="showSummary">
+                    <a id="summary-tab" data-toggle="tab" href="#summary" role="tab" aria-controls="summary"
+                      @click="switchTab('summary')" aria-selected="false"
+                      v-bind:class="{ 'nav-link':true, active: showSummary && !activePending }">
+                      {{ __('Summary') }}
                     </a>
                   </li>
-                @endcan
-              @endif
-              <li class="nav-item">
-                <a class="nav-link" id="completed-tab" data-toggle="tab" href="#completed" role="tab"
-                  aria-controls="completed" aria-selected="false"
-                  @click="switchTab('completed')">{{ __('Completed') }}</a>
-              </li>
-              @if (count($files) > 0 && !hasPackage('package-files'))
-                <li class="nav-item">
-                  <a class="nav-link" id="files-tab" data-toggle="tab" href="#files" role="tab" aria-controls="files"
-                    aria-selected="false" @click="switchTab('files')">{{ __('Files') }}</a>
-                </li>
-              @endif
+                  @if ($request->status === 'COMPLETED' && !$request->errors)
+                    @can('editData', $request)
+                      <li class="nav-item">
+                        <a id="editdata-tab" data-toggle="tab" href="#editdata" role="tab" aria-controls="editdata"
+                          aria-selected="false" class="nav-link" @click="switchTab('editdata')">
+                          {{ __('Data') }}
+                        </a>
+                      </li>
+                    @endcan
+                  @endif
+                  <li class="nav-item">
+                    <a class="nav-link" id="completed-tab" data-toggle="tab" href="#completed" role="tab"
+                      aria-controls="completed" aria-selected="false"
+                      @click="switchTab('completed')">{{ __('Completed') }}</a>
+                  </li>
+                  @if (count($files) > 0 && !hasPackage('package-files'))
+                    <li class="nav-item">
+                      <a class="nav-link" id="files-tab" data-toggle="tab" href="#files" role="tab" aria-controls="files"
+                        aria-selected="false" @click="switchTab('files')">{{ __('Files') }}</a>
+                    </li>
+                  @endif
 
-              <template v-for="{ tab } in packages">
-                <li class="nav-item">
-                  <a class="nav-link" :id="tab.id" data-toggle="tab" :href="'#' + tab.target" role="tab"
-                    @click="switchTab(tab.target)">
-                    @{{ tab.name }}
-                  </a>
-                </li>
-              </template>
+                  <template v-for="{ tab } in packages">
+                    <li class="nav-item">
+                      <a class="nav-link" :id="tab.id" data-toggle="tab" :href="'#' + tab.target" role="tab"
+                        @click="switchTab(tab.target)">
+                        @{{ tab.name }}
+                      </a>
+                    </li>
+                  </template>
 
-              <li class="nav-item" v-show="canViewPrint">
-                <a class="nav-link" id="forms-tab" data-toggle="tab" href="#forms" role="tab" aria-controls="forms"
-                  aria-selected="false" @click="switchTab('forms')">
-                  {{ __('Forms') }}
-                </a>
-              </li>
-              @isset($addons)
-                @foreach ($addons as $addon) @if (!empty($addon['title']))
-                  <li class="nav-item">
-                    <a class="nav-link" id="{{ $addon['id'] . '-tab' }}" data-toggle="tab" href="{{ '#' . $addon['id'] }}"
-                      role="tab" aria-controls="{{ $addon['id'] }}" aria-selected="false">
-                      {{ __($addon['title']) }}
+                  <li class="nav-item" v-show="canViewPrint">
+                    <a class="nav-link" id="forms-tab" data-toggle="tab" href="#forms" role="tab" aria-controls="forms"
+                      aria-selected="false" @click="switchTab('forms')">
+                      {{ __('Forms') }}
                     </a>
                   </li>
-                @endif @endforeach
-              @endisset
-            </template>
-          </ul>
-          <div class="tab-content" id="requestTabContent">
-            <div class="tab-pane card card-body border-top-0 p-0" :class="{ active: activeErrors }" id="errors"
-              role="tabpanel" aria-labelledby="errors-tab">
-              <request-errors :errors="errorLogs"></request-errors>
-            </div>
-            <div class="tab-pane fade show card card-body border-top-0 p-0" :class="{ active: activePending }"
-              id="pending" role="tabpanel" aria-labelledby="pending-tab">
-              <request-detail ref="pending" :process-request-id="requestId" status="ACTIVE"
-                :is-process-manager="{{ $isProcessManager ? 'true' : 'false' }}"
-                :is-admin="{{ Auth::user()->is_administrator ? 'true' : 'false' }}">
-              </request-detail>
-            </div>
-            <div class="card card-body border-top-0 p-0"
-              v-bind:class="{ 'tab-pane':true, active: showSummary && !activePending}" id="summary" role="tabpanel"
-              aria-labelledby="summary-tab">
-              <template v-if="showSummary">
-                <template v-if="showScreenSummary">
-                  <div class="p-3">
-                    <vue-form-renderer ref="screen" :config="screenSummary.config" v-model="dataSummary"
-                      :computed="screenSummary.computed" />
-                  </div>
-                </template>
-                <template v-if="showScreenRequestDetail && !showScreenSummary">
-                  <div class="card">
-                    <div class="card-body">
-                      <vue-form-renderer ref="screenRequestDetail" :config="screenRequestDetail"
-                        v-model="dataSummary" />
-                    </div>
-                  </div>
+                  @isset($addons)
+                    @foreach ($addons as $addon) @if (!empty($addon['title']))
+                      <li class="nav-item">
+                        <a class="nav-link" id="{{ $addon['id'] . '-tab' }}" data-toggle="tab" href="{{ '#' . $addon['id'] }}"
+                          role="tab" aria-controls="{{ $addon['id'] }}" aria-selected="false">
+                          {{ __($addon['title']) }}
+                        </a>
+                      </li>
+                    @endif @endforeach
+                  @endisset
                 </template>
-                <template v-if="!showScreenSummary && !showScreenRequestDetail">
-                  <template v-if="summary.length > 0">
-                    <template v-if="!activePending">
-                      <div class="card border-0">
-                        <data-summary :summary="dataSummary"></data-summary>
+              </ul>
+              <div class="tab-content" id="requestTabContent">
+                <div class="tab-pane card card-body border-top-0 p-0" :class="{ active: activeErrors }" id="errors"
+                  role="tabpanel" aria-labelledby="errors-tab">
+                  <request-errors :errors="errorLogs"></request-errors>
+                </div>
+                <div class="tab-pane fade show card card-body border-top-0 p-0" :class="{ active: activePending }"
+                  id="pending" role="tabpanel" aria-labelledby="pending-tab">
+                  <request-detail ref="pending" :process-request-id="requestId" status="ACTIVE"
+                    :is-process-manager="{{ $isProcessManager ? 'true' : 'false' }}"
+                    :is-admin="{{ Auth::user()->is_administrator ? 'true' : 'false' }}">
+                  </request-detail>
+                </div>
+                <div class="card card-body border-top-0 p-0"
+                  v-bind:class="{ 'tab-pane':true, active: showSummary && !activePending}" id="summary" role="tabpanel"
+                  aria-labelledby="summary-tab">
+                  <template v-if="showSummary">
+                    <template v-if="showScreenSummary">
+                      <div class="p-3">
+                        <vue-form-renderer ref="screen" :config="screenSummary.config" v-model="dataSummary"
+                          :computed="screenSummary.computed" />
                       </div>
                     </template>
-                    <template v-else>
-                      <div class="card border-0">
-                        <div class="card-header bg-white">
-                          <h5 class="m-0">
-                            {{ __('Request In Progress') }}
-                          </h5>
-                        </div>
-
+                    <template v-if="showScreenRequestDetail && !showScreenSummary">
+                      <div class="card">
                         <div class="card-body">
-                          <p class="card-text">
-                            {{ __('This Request is currently in progress.') }}
-                            {{ __('This screen will be populated once the Request is completed.') }}
-                          </p>
+                          <vue-form-renderer ref="screenRequestDetail" :config="screenRequestDetail"
+                            v-model="dataSummary" />
                         </div>
                       </div>
                     </template>
-                  </template>
-                  <template v-else>
-                    <div class="card border-0">
-                      <div class="card-header bg-white">
-                        <h5 class="m-0">
-                          {{ __('No Data Found') }}
-                        </h5>
-                      </div>
+                    <template v-if="!showScreenSummary && !showScreenRequestDetail">
+                      <template v-if="summary.length > 0">
+                        <template v-if="!activePending">
+                          <div class="card border-0">
+                            <data-summary :summary="dataSummary"></data-summary>
+                          </div>
+                        </template>
+                        <template v-else>
+                          <div class="card border-0">
+                            <div class="card-header bg-white">
+                              <h5 class="m-0">
+                                {{ __('Request In Progress') }}
+                              </h5>
+                            </div>
 
-                      <div class="card-body">
-                        <p class="card-text">
-                          {{ __("Sorry, this request doesn't contain any information.") }}
-                        </p>
-                      </div>
-                    </div>
-                  </template>
+                            <div class="card-body">
+                              <p class="card-text">
+                                {{ __('This Request is currently in progress.') }}
+                                {{ __('This screen will be populated once the Request is completed.') }}
+                              </p>
+                            </div>
+                          </div>
+                        </template>
+                      </template>
+                      <template v-else>
+                        <div class="card border-0">
+                          <div class="card-header bg-white">
+                            <h5 class="m-0">
+                              {{ __('No Data Found') }}
+                            </h5>
+                          </div>
 
-                </template>
-              </template>
-            </div>
-            @if ($request->status === 'COMPLETED')
-              @can('editData', $request)
-                <div id="editdata" role="tabpanel" aria-labelledby="editdata"
-                  class="tab-pane card card-body border-top-0 p-3">
-                  @include('tasks.editdata')
+                          <div class="card-body">
+                            <p class="card-text">
+                              {{ __("Sorry, this request doesn't contain any information.") }}
+                            </p>
+                          </div>
+                        </div>
+                      </template>
+
+                    </template>
+                  </template>
+                </div>
+                @if ($request->status === 'COMPLETED')
+                  @can('editData', $request)
+                    <div id="editdata" role="tabpanel" aria-labelledby="editdata"
+                      class="tab-pane card card-body border-top-0 p-3">
+                      @include('tasks.editdata')
+                    </div>
+                  @endcan
+                @endif
+                <div class="tab-pane fade card card-body border-top-0 p-0" id="completed" role="tabpanel"
+                  aria-labelledby="completed-tab">
+                  <request-detail ref="completed" :process-request-id="requestId" status="CLOSED"
+                    :is-admin="{{ Auth::user()->is_administrator ? 'true' : 'false' }}">
+                  </request-detail>
                 </div>
-              @endcan
-            @endif
-            <div class="tab-pane fade card card-body border-top-0 p-0" id="completed" role="tabpanel"
-              aria-labelledby="completed-tab">
-              <request-detail ref="completed" :process-request-id="requestId" status="CLOSED"
-                :is-admin="{{ Auth::user()->is_administrator ? 'true' : 'false' }}">
-              </request-detail>
-            </div>
 
-            <template v-for="{ tab, component } in packages">
-              <div class="tab-pane fade card card-body border-top-0 p-0" :id="tab.target" role="tabpanel">
-                <component :is="component" :process-request-id="requestId"></component>
-              </div>
-            </template>
+                <template v-for="{ tab, component } in packages">
+                  <div class="tab-pane fade card card-body border-top-0 p-0" :id="tab.target" role="tabpanel">
+                    <component :is="component" :process-request-id="requestId"></component>
+                  </div>
+                </template>
 
-            <div class="tab-pane fade card card-body border-top-0 p-3" id="files" role="tabpanel"
-              aria-labelledby="files-tab">
-              <div class="card">
-                <div>
-                  <table class="vuetable table-hover table">
-                    <thead>
-                      <tr>
-                        <th>{{ __('File Name') }}</th>
-                        <th>{{ __('MIME Type') }}</th>
-                        <th>{{ __('Created At') }}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      @foreach ($files as $file)
-                        <tr>
-                          <td>
-                            <a
-                              href="{{ url('request/' . $request->id . '/files/' . $file->id) }}">{{ $file->file_name }}</a>
-                          </td>
-                          <td>{{ $file->mime_type }}</td>
-                          <td>{{ $file->created_at->format('m/d/y h:i a') }}</td>
-                        </tr>
-                      @endforeach
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-            <div class="tab-pane fade card card-body border-top-0 p-0" id="forms" role="tabpanel"
-              aria-labelledby="forms-tab" v-show="canViewPrint">
-              <request-screens :id="requestId" :information="dataSummary" ref="forms">
-              </request-screens>
-            </div>
-            <div v-if="activeTab === 'overview'" class="tab-pane fade p-0" id="overview" role="tabpanel"
-              aria-labelledby="overview-tab">
-              <div class="card" style="border-top: none !important;">
-                <div class="card-body">
-                  <h4>
-                    {{ __(':name In-Flight Map', ['name' => $request->process->name]) }}
-                  </h4>
-                  <div v-if="isObjectLoading" class="d-flex justify-content-center">
-                    <div class="spinner-border text-primary" role="status"></div>
+                <div class="tab-pane fade card card-body border-top-0 p-3" id="files" role="tabpanel"
+                  aria-labelledby="files-tab">
+                  <div class="card">
+                    <div>
+                      <table class="vuetable table-hover table">
+                        <thead>
+                          <tr>
+                            <th>{{ __('File Name') }}</th>
+                            <th>{{ __('MIME Type') }}</th>
+                            <th>{{ __('Created At') }}</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          @foreach ($files as $file)
+                            <tr>
+                              <td>
+                                <a
+                                  href="{{ url('request/' . $request->id . '/files/' . $file->id) }}">{{ $file->file_name }}</a>
+                              </td>
+                              <td>{{ $file->mime_type }}</td>
+                              <td>{{ $file->created_at->format('m/d/y h:i a') }}</td>
+                            </tr>
+                          @endforeach
+                        </tbody>
+                      </table>
+                    </div>
                   </div>
-                  <div :class="{ 'hidden': isObjectLoading }">
-                    <object ref="processMap" class="card"
-                      data="{{ route('modeler.inflight', [
-                        'process' => $request->process->id,
-                        'request' => $request->id
-                      ]) }}"
-                      width="100%"
-                      :height="isObjectLoading ? 'auto' : '640px'"
-                      frameborder="0"
-                      type="text/html"
-                      style="border-radius: 4px;"
-                      @load="onLoadedObject">
-                      <!-- Accessible Alternative Content -->
-                      <p>
-                        {{ __('Content not available. Check settings or try a different device.') }}
-                      </p>
-                    </object>
+                </div>
+                <div class="tab-pane fade card card-body border-top-0 p-0" id="forms" role="tabpanel"
+                  aria-labelledby="forms-tab" v-show="canViewPrint">
+                  <request-screens :id="requestId" :information="dataSummary" ref="forms">
+                  </request-screens>
+                </div>
+                <div v-if="activeTab === 'overview'" class="tab-pane fade p-0" id="overview" role="tabpanel"
+                  aria-labelledby="overview-tab">
+                  <div class="card" style="border-top: none !important;">
+                    <div class="card-body">
+                      <h4>
+                        {{ __(':name In-Flight Map', ['name' => $request->process->name]) }}
+                      </h4>
+                      <div v-if="isObjectLoading" class="d-flex justify-content-center">
+                        <div class="spinner-border text-primary" role="status"></div>
+                      </div>
+                      <div :class="{ 'hidden': isObjectLoading }">
+                        <object ref="processMap" class="card"
+                          data="{{ route('modeler.inflight', [
+                            'process' => $request->process->id,
+                            'request' => $request->id
+                          ]) }}"
+                          width="100%"
+                          :height="isObjectLoading ? 'auto' : '640px'"
+                          frameborder="0"
+                          type="text/html"
+                          style="border-radius: 4px;"
+                          @load="onLoadedObject">
+                          <!-- Accessible Alternative Content -->
+                          <p>
+                            {{ __('Content not available. Check settings or try a different device.') }}
+                          </p>
+                        </object>
+                      </div>
+                    </div>
                   </div>
                 </div>
+
+                @isset($addons)
+                  @foreach ($addons as $addon)
+                    <div class="tab-pane fade show" id="{{ $addon['id'] }}" role="tabpanel"
+                      aria-labelledby="{{ $addon['id'] }}">
+                      {!! $addon['content'] !!}
+                    </div>
+                  @endforeach
+                @endisset
               </div>
             </div>
-
-            @isset($addons)
-              @foreach ($addons as $addon)
-                <div class="tab-pane fade show" id="{{ $addon['id'] }}" role="tabpanel"
-                  aria-labelledby="{{ $addon['id'] }}">
-                  {!! $addon['content'] !!}
-                </div>
-              @endforeach
-            @endisset
+              <timeline commentable_id="{{ $request->getKey() }}" commentable_type="{{ get_class($request) }}"
+                :adding="false" :readonly="request.status === 'COMPLETED'" 
+                :timeline="false" />
           </div>
-        </div>
-          <timeline commentable_id="{{ $request->getKey() }}" commentable_type="{{ get_class($request) }}"
-            :adding="false" :readonly="request.status === 'COMPLETED'" 
-            :timeline="false" />
-      </div>
-      @if (shouldShow('requestStatusContainer'))
-        <div>
-          <template v-if="statusLabel">
-            <button
-              role="button"
-              class="btn d-block mr-0 ml-auto button-collapse"
-              data-toggle="collapse"
-              data-target="#collapse-info"
-              @click="showTabs = !showTabs"
-            >
-              <template v-if="showTabs">
-                <i class="fas fa-angle-right"></i>
-              </template>
-              <template v-else>
-                <i class="fas fa-angle-left"></i>
+
+          @if (shouldShow('requestStatusContainer'))
+            <div class="slide-control">
+              <a href="#" @click="hideMenu">
+                <i class="fa" :class="{ 'fa-caret-left' : !showMenu, 'fa-caret-right' : showMenu }"></i>
+              </a>
+            </div>
+            <div class="menu">
+              <template v-if="statusLabel">
+                <ul class="nav nav-tabs nav-collapse" role="tablist">
+                  <li class="nav-item" role="presentation">
+                    <button
+                      id="details-tab"
+                      :class="{'nav-link': true, active: showInfo }"
+                      data-bs-toggle="tab"
+                      data-bs-target="#details"
+                      type="button"
+                      role="tab"
+                      aria-controls="details"
+                      aria-selected="true"
+                      @click="switchTabInfo('details')"
+                    >
+                      @{{ __('Details') }}
+                    </button>
+                  </li>
+                  <li class="nav-item" role="presentation">
+                    <button
+                      id="comments-tab"
+                      :class="{'nav-link': true, active: !showInfo }"
+                      data-bs-toggle="tab"
+                      data-bs-target="#comments"
+                      type="button"
+                      role="tab"
+                      aria-controls="comments"
+                      aria-selected="false"
+                      @click="switchTabInfo('comments')"
+                    >
+                      @{{ __('Comments') }}
+                    </button>
+                  </li>
+                </ul>
               </template>
-            </button>
-            <ul v-if="showTabs" class="nav nav-tabs nav-collapse" role="tablist">
-              <li class="nav-item" role="presentation">
-                <button
-                  id="details-tab"
-                  :class="{'nav-link': true, active: showInfo }"
-                  data-bs-toggle="tab"
-                  data-bs-target="#details"
-                  type="button"
-                  role="tab"
-                  aria-controls="details"
-                  aria-selected="true"
-                  @click="switchTabInfo('details')"
-                >
-                  @{{ __('Details') }}
-                </button>
-              </li>
-              <li class="nav-item" role="presentation">
-                <button
-                  id="comments-tab"
-                  :class="{'nav-link': true, active: !showInfo }"
-                  data-bs-toggle="tab"
-                  data-bs-target="#comments"
-                  type="button"
-                  role="tab"
-                  aria-controls="comments"
-                  aria-selected="false"
-                  @click="switchTabInfo('comments')"
-                >
-                  @{{ __('Comments') }}
-                </button>
-              </li>
-            </ul>
-          </template>
-          <div class="tab-content">
-            <div id="collapse-info" class="collapse show width">
-              <div
-                v-if="showInfo"
-                id="details"
-                v-bind:class="{ 'tab-pane':true, fade: true, show: showInfo, active: showInfo }"
-                role="tabpanel"
-                aria-labelledby="details-tab"
-              >
-                <div class="ml-md-3 mt-md-0 mt-3">
-                  <template v-if="statusLabel">
-                    <div class="card collapse-content">
-                      <ul class="list-group list-group-flush w-100">
-                        @if ($canCancel == true && $request->status === 'ACTIVE')
-                          <li class="list-group-item">
-                            <button type="button" class="btn btn-outline-custom btn-block" @click="onCancel"
-                              aria-haspopup="dialog">
-                              {{ __('Cancel Request') }}
-                            </button>
-                          </li>
-                        @endif
-                        <div :class="classStatusCard">
-                          <span style="margin:0; padding:0; line-height:1">@{{ __(statusLabel) }}</span>
-                        </div>
-                        @if ($request->participants->count())
-                          <li class="list-group-item">
-                            <p class="section-title">{{ __('Participants') }}:</p>
-                            <avatar-image size="32" class="d-inline-flex pull-left align-items-center"
-                              :input-data="participants" hide-name="true"></avatar-image>
-                          </li>
-                        @endif
-                        <li class="list-group-item">
-                          <p class="section-title">@{{ __(labelDate) }}:</p>
-                          <i class="far fa-calendar-alt"></i>
-                          <small>@{{ moment(statusDate).format() }}</small>
-                        </li>
-                        <li class="list-group-item">
-                          <p class="section-title">{{ __('Process') }}</p>
-                          {{ $request->name }}
-                          <p class="launchpad-link">
-                            <a href="{{route('process.browser.index', [$request->process_id])}}">
-                              {{ __('Open Process Launchpad') }}
-                            </a>
-                          </p>
-                        </li>
-                        @if ($request->user_id)
-                          <li class="list-group-item">
-                            <p class="section-title">{{ __('Requested By') }}:</p>
-                            <avatar-image
-                              v-if="userRequested"
-                              size="32"
-                              class="d-inline-flex pull-left align-items-center"
-                              :input-data="requestBy"
-                              display-name="true"
-                            ></avatar-image>
-                            <span v-if="!userRequested">{{ __('Web Entry') }}</span>
-                          </li>
-                        @endif
-                        @if ($canManuallyComplete == true)
-                          <li class="list-group-item">
-                            <p class="section-title">{{ __('Manually Complete Request') }}</p>
-                            <button type="button" class="btn btn-outline-success btn-block" data-toggle="modal"
-                              @click="completeRequest">
-                              <i class="fas fa-stop-circle"></i> {{ __('Complete') }}
-                            </button>
-                          </li>
-                        @endif
-                        @if ($canRetry === true)
-                          <li class="list-group-item">
-                            <p class="section-title">{{ __('Retry Request') }}</p>
-                            <button id="retryRequestButton" type="button" class="btn btn-outline-info btn-block"
-                              data-toggle="modal" :disabled="retryDisabled" @click="retryRequest">
-                              <i class="fas fa-sync"></i> {{ __('Retry') }}
-                            </button>
-                          </li>
-                        @endif
-                        @if ($eligibleRollbackTask)
-                          @can('rollback', $errorTask)
-                            <li
-                              v-if="{{ $isProcessManager ? 'true' : 'false' }} ||
-                                {{ Auth::user()->is_administrator ? 'true' : 'false' }}"
-                              class="list-group-item"
-                            >
-                              <p class="section-title">{{ __('Rollback Request') }}</p>
-                              <button
-                                id="retryRequestButton"
-                                type="button"
-                                class="btn btn-outline-info btn-block"
-                                data-toggle="modal"
-                                @click="rollback({{ $errorTask->id }}, '{{ $eligibleRollbackTask->element_name }}')"
-                              >
-                                <i class="fas fa-undo"></i> {{ __('Rollback') }}
-                              </button>
-                              <small>{{ __('Rollback to task') }}: <b>{{ $eligibleRollbackTask->element_name }}</b> ({{ $eligibleRollbackTask->element_id }})</small>
+              <div class="menu-tab-content">
+                <div id="collapse-info" class="collapse show width">
+                  <div
+                    v-if="showInfo"
+                    id="details"
+                    v-bind:class="{ 'tab-pane':true, fade: true, show: showInfo, active: showInfo }"
+                    role="tabpanel"
+                    aria-labelledby="details-tab"
+                  >
+                    <div class="ml-md-3 mt-md-0 mt-3">
+                      <template v-if="statusLabel">
+                        <div class="card collapse-content">
+                          <ul class="list-group list-group-flush w-100">
+                            @if ($canCancel == true && $request->status === 'ACTIVE')
+                              <li class="list-group-item">
+                                <button type="button" class="btn btn-outline-custom btn-block" @click="onCancel"
+                                  aria-haspopup="dialog">
+                                  {{ __('Cancel Request') }}
+                                </button>
+                              </li>
+                            @endif
+                            <div :class="classStatusCard">
+                              <span style="margin:0; padding:0; line-height:1">@{{ __(statusLabel) }}</span>
+                            </div>
+                            @if ($request->participants->count())
+                              <li class="list-group-item">
+                                <p class="section-title">{{ __('Participants') }}:</p>
+                                <avatar-image size="32" class="d-inline-flex pull-left align-items-center"
+                                  :input-data="participants" hide-name="true"></avatar-image>
+                              </li>
+                            @endif
+                            <li class="list-group-item">
+                              <p class="section-title">@{{ __(labelDate) }}:</p>
+                              <i class="far fa-calendar-alt"></i>
+                              <small>@{{ moment(statusDate).format() }}</small>
                             </li>
-                          @endcan
-                        @endif
-                        @if ($request->parentRequest)
-                          <li class="list-group-item">
-                            <p class="section-title">{{ __('Parent Request') }}</p>
-                            <i :class="requestStatusClass('{{ $request->parentRequest->status }}')"></i>
-                            <a href="/requests/{{ $request->parentRequest->getKey() }}">{{ $request->parentRequest->name }}</a>
-                          </li>
-                        @endif
-                        @if (count($request->childRequests))
-                          <li class="list-group-item">
-                            <p class="section-title">{{ __('Child Requests') }}</p>
-                            @foreach ($request->childRequests as $childRequest)
-                              <div>
-                                <i :class="requestStatusClass('{{ $childRequest->status }}')"></i>
-                                <a href="/requests/{{ $childRequest->getKey() }}">{{ $childRequest->name }}</a>
-                              </div>
-                            @endforeach
-                          </li>
-                        @endif
-                      </ul>
+                            <li class="list-group-item">
+                              <p class="section-title">{{ __('Process') }}</p>
+                              {{ $request->name }}
+                              <p class="launchpad-link">
+                                <a href="{{route('process.browser.index', [$request->process_id])}}">
+                                  {{ __('Open Process Launchpad') }}
+                                </a>
+                              </p>
+                            </li>
+                            @if ($request->user_id)
+                              <li class="list-group-item">
+                                <p class="section-title">{{ __('Requested By') }}:</p>
+                                <avatar-image
+                                  v-if="userRequested"
+                                  size="32"
+                                  class="d-inline-flex pull-left align-items-center"
+                                  :input-data="requestBy"
+                                  display-name="true"
+                                ></avatar-image>
+                                <span v-if="!userRequested">{{ __('Web Entry') }}</span>
+                              </li>
+                            @endif
+                            @if ($canManuallyComplete == true)
+                              <li class="list-group-item">
+                                <p class="section-title">{{ __('Manually Complete Request') }}</p>
+                                <button type="button" class="btn btn-outline-success btn-block" data-toggle="modal"
+                                  @click="completeRequest">
+                                  <i class="fas fa-stop-circle"></i> {{ __('Complete') }}
+                                </button>
+                              </li>
+                            @endif
+                            @if ($canRetry === true)
+                              <li class="list-group-item">
+                                <p class="section-title">{{ __('Retry Request') }}</p>
+                                <button id="retryRequestButton" type="button" class="btn btn-outline-info btn-block"
+                                  data-toggle="modal" :disabled="retryDisabled" @click="retryRequest">
+                                  <i class="fas fa-sync"></i> {{ __('Retry') }}
+                                </button>
+                              </li>
+                            @endif
+                            @if ($eligibleRollbackTask)
+                              @can('rollback', $errorTask)
+                                <li
+                                  v-if="{{ $isProcessManager ? 'true' : 'false' }} ||
+                                    {{ Auth::user()->is_administrator ? 'true' : 'false' }}"
+                                  class="list-group-item"
+                                >
+                                  <p class="section-title">{{ __('Rollback Request') }}</p>
+                                  <button
+                                    id="retryRequestButton"
+                                    type="button"
+                                    class="btn btn-outline-info btn-block"
+                                    data-toggle="modal"
+                                    @click="rollback({{ $errorTask->id }}, '{{ $eligibleRollbackTask->element_name }}')"
+                                  >
+                                    <i class="fas fa-undo"></i> {{ __('Rollback') }}
+                                  </button>
+                                  <small>{{ __('Rollback to task') }}: <b>{{ $eligibleRollbackTask->element_name }}</b> ({{ $eligibleRollbackTask->element_id }})</small>
+                                </li>
+                              @endcan
+                            @endif
+                            @if ($request->parentRequest)
+                              <li class="list-group-item">
+                                <p class="section-title">{{ __('Parent Request') }}</p>
+                                <i :class="requestStatusClass('{{ $request->parentRequest->status }}')"></i>
+                                <a href="/requests/{{ $request->parentRequest->getKey() }}">{{ $request->parentRequest->name }}</a>
+                              </li>
+                            @endif
+                            @if (count($request->childRequests))
+                              <li class="list-group-item">
+                                <p class="section-title">{{ __('Child Requests') }}</p>
+                                @foreach ($request->childRequests as $childRequest)
+                                  <div>
+                                    <i :class="requestStatusClass('{{ $childRequest->status }}')"></i>
+                                    <a href="/requests/{{ $childRequest->getKey() }}">{{ $childRequest->name }}</a>
+                                  </div>
+                                @endforeach
+                              </li>
+                            @endif
+                          </ul>
+                        </div>
+                      </template>
                     </div>
-                  </template>
-                </div>
-              </div>
-              <div
-                v-if="!showInfo"
-                id="comments"
-                v-bind:class="{ 'tab-pane':true, fade: true, show: !showInfo, active: !showInfo }"
-                role="tabpanel"
-                aria-labelledby="comments-tab"
-              >
-                <div class="ml-md-3 mt-md-0 mt-3 collapse-content">
-                  <template v-if="panCommentInVueOptionsComponents">
-                    <comment-container
-                      :commentable_id="request.id"
-                      commentable_type="{{ get_class($request) }}"
-                      name="{{ $request->name }}"
-                      :readonly="request.status === 'COMPLETED'"
-                      :header="false"
-                    />
-                  </template>
+                  </div>
+                  <div
+                    v-if="!showInfo"
+                    id="comments"
+                    v-bind:class="{ 'tab-pane':true, fade: true, show: !showInfo, active: !showInfo }"
+                    role="tabpanel"
+                    aria-labelledby="comments-tab"
+                  >
+                    <div class="ml-md-3 mt-md-0 mt-3 collapse-content">
+                      <template v-if="panCommentInVueOptionsComponents">
+                        <comment-container
+                          :commentable_id="request.id"
+                          commentable_type="{{ get_class($request) }}"
+                          name="{{ $request->name }}"
+                          :readonly="request.status === 'COMPLETED'"
+                          :header="false"
+                        />
+                      </template>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          @endif
         </div>
-      @endif
+      </div>
     </div>
   </div>
-
 @endsection
 
 @section('js')
@@ -522,8 +518,8 @@ class="btn btn-outline-info btn-block"
           canViewComments: @json($canViewComments),
           isObjectLoading: false,
           showTree: false,
-          showTabs: true,
           showInfo: true,
+          showMenu: true,
         };
       },
       computed: {
@@ -653,6 +649,10 @@ classStatusCard() {
         },
       },
       methods: {
+        hideMenu() {
+          this.showMenu = !this.showMenu;
+          this.$root.$emit("sizeChanged", !this.showMenu);
+        },
         switchTab(tab) {
           this.activeTab = tab;
           if (tab === 'overview') {
@@ -857,6 +857,97 @@ classStatusCard() {
 
 @section('css')
 <style>
+  @import '~styles/variables';
+
+  .process-catalog-main {
+    display: flex;
+    @media (max-width: $lp-breakpoint) {
+        display: block;
+    }
+  }
+  .menu {
+    overflow: hidden;
+    transition: flex 0.3s;
+    flex: 0 0 0px;
+    @media (max-width: $lp-breakpoint) {
+      position: absolute;
+      z-index: 4;
+      display: flex;
+      margin-top: 0;
+      width: 85%;
+      transition: left 0.3s;
+    }
+  }
+  .menu-mask {
+    display: none;
+    position: absolute;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0);
+    z-index: 3;
+    transition: background-color 0.3s;
+    
+    @media (max-width: $lp-breakpoint) {
+      display: block;
+    }
+  }
+  .menu-mask.menu-open {
+    @media (max-width: $lp-breakpoint) {
+      left: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: block;
+    }
+  }
+  .menu-open .menu {
+    flex: 0 0 315px;
+    @media (max-width: $lp-breakpoint) {
+      left: 0%;
+    }
+  }
+  .slide-control {
+    border-left: 1px solid #DEE0E1;
+    margin-left: 15px;
+    width: 16px;
+    @media (max-width: $lp-breakpoint) {
+      display: none;
+    }
+    a {
+      position: relative;
+      left: -11px;
+      top: 40px;
+      z-index: 5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 60px;
+      background-color: #ffffff;
+      border-radius: 10px;
+      border: 1px solid #DEE0E1;
+      color: #6A7888;
+    }
+  }
+  .menu-open .slide-control {
+    border-left: 1px solid #DEE0E1;
+    a {
+      left: -11px;
+      display: none;
+    }
+    
+  }
+  .slide-control:hover{
+    border-left: 1px solid rgba(72, 145, 255, 0.40);
+    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+  }
+  .menu-open .slide-control:hover {
+    border-left: 1px solid rgba(72, 145, 255, 0.40);
+    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+    a {
+      display: flex;
+    }
+  }
+  .slide-control a:hover {
+    background-color: #EAEEF2;
+  }
   .hidden {
     visibility: hidden;
     opacity: 0;
@@ -887,17 +978,8 @@ classStatusCard() {
     text-transform: uppercase;
   }
   .nav-collapse {
-    padding: 0 16px;
     border: none;
   }
-  .button-collapse {
-    height: 32px;
-    padding: 0 8px;
-    border-radius: 4px;
-    border: 1px solid var(--borders, #CDDDEE);
-    background: var(--white-w24, #FFF);
-    color: #6a7888;
-  }
   .section-title {
     color: var(--text-only, #556271);
     font-size: 14px;
@@ -911,8 +993,7 @@ classStatusCard() {
   .collapse-content {
     min-width:0px;
     max-width:400px;
-    width:317px;
-    height:calc(100vh - 215px)
+    width:315px;
   }
   .active-style {
     background-color: #4ea075;
@@ -926,5 +1007,8 @@ classStatusCard() {
   .launchpad-link {
     margin-top: 5px;
   }
+  .menu-tab-content {
+    margin-left: -16px;
+  }
 </style>
 @endsection
diff --git a/resources/views/tasks/edit.blade.php b/resources/views/tasks/edit.blade.php
index d6bc80fe34..40644aa8c4 100644
--- a/resources/views/tasks/edit.blade.php
+++ b/resources/views/tasks/edit.blade.php
@@ -27,341 +27,335 @@ function() use ($task) {
       ], 'attributes' => 'v-cloak'])
 @endsection
 @section('content')
-    <div v-cloak id="task" class="container-fluid px-3">
-        <div class="d-flex flex-column flex-md-row">
-            <div class="flex-grow-1">
-                <div v-if="isSelfService" class="alert alert-primary" role="alert">
-                    <button type="button" class="btn btn-primary" @click="claimTask">{{__('Claim Task')}}</button>
-                    {{__('This task is unassigned, click Claim Task to assign yourself.')}}
-                </div>
-                <div class="container-fluid h-100 d-flex flex-column" id="interactionListener">
-                    @can('editData', $task->processRequest)
-                        <ul v-if="task.process_request.status === 'ACTIVE'" id="tabHeader" role="tablist" class="nav nav-tabs">
-                            <li class="nav-item"><a id="pending-tab" data-toggle="tab" href="#tab-form" role="tab"
-                                                    aria-controls="tab-form" aria-selected="true"
-                                                    class="nav-link active">{{__('Form')}}</a></li>
-                            <li class="nav-item"><a id="summary-tab" data-toggle="tab" href="#tab-data" role="tab"
-                                                    aria-controls="tab-data" aria-selected="false"
-                                                    @click="resizeMonaco"
-                                                    class="nav-link">{{__('Data')}}</a></li>
-                        </ul>
-                    @endcan
-                    <div id="tabContent" class="tab-content flex-grow-1">
-                        <div id="tab-form" role="tabpanel" aria-labelledby="tab-form" class="tab-pane active show h-100">
-                          @can('update', $task)
-                            <task
-                              ref="task"
-                              class="card border-0"
-                              v-model="formData"
-                              :initial-task-id="{{ $task->id }}"
-                              :initial-request-id="{{ $task->process_request_id }}"
-                              :user-id="{{ Auth::user()->id }}"
-                              csrf-token="{{ csrf_token() }}"
-                              initial-loop-context="{{ $task->getLoopContext() }}"
-                              :wait-loading-listeners="true"
-                              @task-updated="taskUpdated"
-                              @submit="submit"
-                              @completed="completed"
-                              @@error="error"
-                              @closed="closed"
-                              @redirect="redirectToTask"
-                              @form-data-changed="handleFormDataChange"
-                          ></task>
-                          @endcan
-                          <div v-if="taskHasComments">
-                                <timeline :commentable_id="task.id"
-                                          commentable_type="ProcessMaker\Models\ProcessRequestToken"
-                                          :adding="false"
-                                          :readonly="task.status === 'CLOSED'"
-                                          :timeline="false"
-                                          />
-                          </div>
-                        </div>
-                        @can('editData', $task->processRequest)
-                            <div v-if="task.process_request.status === 'ACTIVE'" id="tab-data" role="tabpanel" aria-labelledby="tab-data" class="card card-body border-top-0 tab-pane p-3">
-                                @include('tasks.editdata')
+  <div id="task">
+    <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
+    <div class="process-catalog-main" :class="{ 'menu-open': showMenu }">
+      <div v-cloak class="container-fluid px-3">
+          <div class="d-flex flex-column flex-md-row">
+              <div class="flex-grow-1">
+                  <div v-if="isSelfService" class="alert alert-primary" role="alert">
+                      <button type="button" class="btn btn-primary" @click="claimTask">{{__('Claim Task')}}</button>
+                      {{__('This task is unassigned, click Claim Task to assign yourself.')}}
+                  </div>
+                  <div class="container-fluid h-100 d-flex flex-column" id="interactionListener">
+                      @can('editData', $task->processRequest)
+                          <ul v-if="task.process_request.status === 'ACTIVE'" id="tabHeader" role="tablist" class="nav nav-tabs">
+                              <li class="nav-item"><a id="pending-tab" data-toggle="tab" href="#tab-form" role="tab"
+                                                      aria-controls="tab-form" aria-selected="true"
+                                                      class="nav-link active">{{__('Form')}}</a></li>
+                              <li class="nav-item"><a id="summary-tab" data-toggle="tab" href="#tab-data" role="tab"
+                                                      aria-controls="tab-data" aria-selected="false"
+                                                      @click="resizeMonaco"
+                                                      class="nav-link">{{__('Data')}}</a></li>
+                          </ul>
+                      @endcan
+                      <div id="tabContent" class="tab-content flex-grow-1">
+                          <div id="tab-form" role="tabpanel" aria-labelledby="tab-form" class="tab-pane active show h-100">
+                            @can('update', $task)
+                              <task
+                                ref="task"
+                                class="card border-0"
+                                v-model="formData"
+                                :initial-task-id="{{ $task->id }}"
+                                :initial-request-id="{{ $task->process_request_id }}"
+                                :user-id="{{ Auth::user()->id }}"
+                                csrf-token="{{ csrf_token() }}"
+                                initial-loop-context="{{ $task->getLoopContext() }}"
+                                :wait-loading-listeners="true"
+                                @task-updated="taskUpdated"
+                                @submit="submit"
+                                @completed="completed"
+                                @@error="error"
+                                @closed="closed"
+                                @redirect="redirectToTask"
+                                @form-data-changed="handleFormDataChange"
+                            ></task>
+                            @endcan
+                            <div v-if="taskHasComments">
+                                  <timeline :commentable_id="task.id"
+                                            commentable_type="ProcessMaker\Models\ProcessRequestToken"
+                                            :adding="false"
+                                            :readonly="task.status === 'CLOSED'"
+                                            :timeline="false"
+                                            />
                             </div>
-                        @endcan
-                    </div>
+                          </div>
+                          @can('editData', $task->processRequest)
+                              <div v-if="task.process_request.status === 'ACTIVE'" id="tab-data" role="tabpanel" aria-labelledby="tab-data" class="card card-body border-top-0 tab-pane p-3">
+                                  @include('tasks.editdata')
+                              </div>
+                          @endcan
+                      </div>
+                  </div>
+              </div>
+              @if (shouldShow('taskStatusContainer'))
+                <div class="slide-control">
+                  <a href="#" @click="hideMenu">
+                    <i class="fa" :class="{ 'fa-caret-left' : !showMenu, 'fa-caret-right' : showMenu }"></i>
+                  </a>
                 </div>
-            </div>
-            @if (shouldShow('taskStatusContainer'))
-              <div>
-                <button
-                  role="button"
-                  class="btn d-block mr-0 ml-auto button-collapse"
-                  data-toggle="collapse"
-                  data-target="#collapse-info"
-                  @click="showTabs = !showTabs"
-                >
-                  <template v-if="showTabs">
-                    <i class="fas fa-angle-right"></i>
-                  </template>
-                  <template v-else>
-                    <i class="fas fa-angle-left"></i>
-                  </template>
-                </button>
-                <ul v-if="showTabs" class="nav nav-tabs nav-collapse" role="tablist">
-                  <li class="nav-item" role="presentation">
-                    <button
-                      id="details-tab"
-                      :class="{'nav-link': true, active: showInfo }"
-                      data-bs-toggle="tab"
-                      data-bs-target="#details"
-                      type="button"
-                      role="tab"
-                      aria-controls="details"
-                      aria-selected="true"
-                      @click="switchTabInfo('details')"
-                    >
-                      @{{ __('Details') }}
-                    </button>
-                  </li>
-                  <li class="nav-item" role="presentation">
-                    <button
-                      id="comments-tab"
-                      :class="{'nav-link': true, active: !showInfo }"
-                      data-bs-toggle="tab"
-                      data-bs-target="#comments"
-                      type="button"
-                      role="tab"
-                      aria-controls="comments"
-                      aria-selected="false"
-                      @click="switchTabInfo('comments')"
+                <div class="menu">
+                  <ul class="nav nav-tabs nav-collapse" role="tablist">
+                    <li class="nav-item" role="presentation">
+                      <button
+                        id="details-tab"
+                        :class="{'nav-link': true, active: showInfo }"
+                        data-bs-toggle="tab"
+                        data-bs-target="#details"
+                        type="button"
+                        role="tab"
+                        aria-controls="details"
+                        aria-selected="true"
+                        @click="switchTabInfo('details')"
+                      >
+                        @{{ __('Details') }}
+                      </button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                      <button
+                        id="comments-tab"
+                        :class="{'nav-link': true, active: !showInfo }"
+                        data-bs-toggle="tab"
+                        data-bs-target="#comments"
+                        type="button"
+                        role="tab"
+                        aria-controls="comments"
+                        aria-selected="false"
+                        @click="switchTabInfo('comments')"
+                      >
+                        @{{ __('Comments') }}
+                      </button>
+                    </li>
+                  </ul>
+                  <div class="menu-tab-content">
+                    <div id="collapse-info" class="collapse show width">
+                    <div
+                      v-if="showInfo"
+                      id="details"
+                      v-bind:class="{ 'tab-pane':true, fade: true, show: showInfo, active: showInfo }"
+                      role="tabpanel"
+                      aria-labelledby="details-tab"
                     >
-                      @{{ __('Comments') }}
-                    </button>
-                  </li>
-                </ul>
-                <div class="tab-content">
-                  <div id="collapse-info" class="collapse show width">
-                  <div
-                    v-if="showInfo"
-                    id="details"
-                    v-bind:class="{ 'tab-pane':true, fade: true, show: showInfo, active: showInfo }"
-                    role="tabpanel"
-                    aria-labelledby="details-tab"
-                  >
-                      <div class="ml-md-3 mt-3 mt-md-0">
-                        <div class="card collapse-content">
-                          <ul class="list-group list-group-flush w-100">
-                            <li class="list-group-item">
-                              <!-- ADD THE OTHER BUTTONS -->
-                              <div class="row button-group">
-                                <div class="col-6">
-                                  <button
-                                    type="button"
-                                    class="btn btn-block button-actions"
-                                    @click="createRule"
-                                  >
-                                  <i class="fas fa-plus"></i> {{ __('Create Rule') }}
-                                  </button>
-                                </div>
-                                <div class="col-6">
-                                  <button
-                                    type="button"
-                                    class="btn btn-block button-actions"
-                                    :class="{ 'button-priority': isPriority }"
-                                    @click="addPriority"
-                                  >
-                                  <img
-                                    :src="
-                                      isPriority
-                                        ? '/img/priority.svg'
-                                        : '/img/priority-header.svg'
-                                    "
-                                    :alt="$t('No Image')"
-                                  >
-                                    {{ __('Priority') }}
-                                  </button>
-                                </div>
-                              </div>
-                              <div class="row button-group">
-                                <div class="col-6">
-                                  <template>
+                        <div class="ml-md-3 mt-3 mt-md-0">
+                          <div class="card collapse-content">
+                            <ul class="list-group list-group-flush w-100">
+                              <li class="list-group-item">
+                                <!-- ADD THE OTHER BUTTONS -->
+                                <div class="row button-group">
+                                  <div class="col-6">
                                     <button
                                       type="button"
-                                      v-b-tooltip.hover title="Use content from previous task to fill this one quickly."
                                       class="btn btn-block button-actions"
-                                      @click="showQuickFill"
+                                      @click="createRule"
                                     >
-                                    <img
-                                    src="../../img/smartinbox-images/fill.svg"
-                                    :alt="$t('No Image')"
-                                  /> {{__('Quick Fill')}}
+                                    <i class="fas fa-plus"></i> {{ __('Create Rule') }}
                                     </button>
-                                  </template>
-                                </div>
-                                <div class="col-6">
-                                  <template v-if="isAllowReassignment || userIsAdmin || userIsProcessManager">
+                                  </div>
+                                  <div class="col-6">
                                     <button
-                                      v-if="!isSelfService && (task.advanceStatus === 'open' || task.advanceStatus === 'overdue')"
                                       type="button"
                                       class="btn btn-block button-actions"
-                                      @click="show"
+                                      :class="{ 'button-priority': isPriority }"
+                                      @click="addPriority"
+                                    >
+                                    <img
+                                      :src="
+                                        isPriority
+                                          ? '/img/priority.svg'
+                                          : '/img/priority-header.svg'
+                                      "
+                                      :alt="$t('No Image')"
                                     >
-                                      <i class="fas fa-user-friends"></i> {{__('Reassign')}}
+                                      {{ __('Priority') }}
                                     </button>
-                                  </template>
+                                  </div>
+                                </div>
+                                <div class="row button-group">
+                                  <div class="col-6">
+                                    <template>
+                                      <button
+                                        type="button"
+                                        v-b-tooltip.hover title="Use content from previous task to fill this one quickly."
+                                        class="btn btn-block button-actions"
+                                        @click="showQuickFill"
+                                      >
+                                      <img
+                                      src="../../img/smartinbox-images/fill.svg"
+                                      :alt="$t('No Image')"
+                                    /> {{__('Quick Fill')}}
+                                      </button>
+                                    </template>
+                                  </div>
+                                  <div class="col-6">
+                                    <template v-if="isAllowReassignment || userIsAdmin || userIsProcessManager">
+                                      <button
+                                        v-if="task.advanceStatus === 'open' || task.advanceStatus === 'overdue'"
+                                        type="button"
+                                        class="btn btn-block button-actions"
+                                        @click="show"
+                                      >
+                                        <i class="fas fa-user-friends"></i> {{__('Reassign')}}
+                                      </button>
+                                    </template>
+                                  </div>
                                 </div>
+                              </li>
+                              <li class="list-group-item">
+                                <!-- Section to Add Now What? -->
+                                <button
+                                  type="button"
+                                  class="btn btn-block button-actions"
+                                  @click="eraseDraft()"
+                                  v-if="taskDraftsEnabled"
+                                >
+                                  <img src="/img/smartinbox-images/eraser.svg" :alt="$t('No Image')">
+                                  {{ __('Clear Draft') }}
+                                </button>
+                              </li>
+                              <div :class="statusCard">
+                                <span style="margin:0; padding:0; line-height:1">@{{$t(task.advanceStatus)}}</span>
                               </div>
-                            </li>
-                            <li class="list-group-item">
-                              <!-- Section to Add Now What? -->
-                              <button
-                                type="button"
-                                class="btn btn-block button-actions"
-                                @click="eraseDraft()"
-                                v-if="taskDraftsEnabled"
-                              >
-                                <img src="/img/smartinbox-images/eraser.svg" :alt="$t('No Image')">
-                                {{ __('Clear Draft') }}
-                              </button>
-                            </li>
-                            <div :class="statusCard">
-                              <span style="margin:0; padding:0; line-height:1">@{{$t(task.advanceStatus)}}</span>
-                            </div>
-                            <li v-if="dateDueAt && showDueAtDates" class="list-group-item">
-                              <p class="section-title">@{{$t(dueLabel)}} @{{ moment(dateDueAt).fromNow() }}</p>
-                              @{{ moment(dateDueAt).format() }}
-                            </li>
-                            <li v-if="!showDueAtDates" class="list-group-item">
-                              <p class="section-title">@{{$t(dueLabel)}} @{{ moment().to(moment(completedAt)) }}</p>
-                              @{{ moment(completedAt).format() }}
-                            </li>
-                            <li class="list-group-item" v-if="taskDraftsEnabled">
-                              <task-save-panel
-                                :options="options"
-                                :task="task"
-                                :date="lastAutosave"
-                                :error="errorAutosave"
-                              />
-                            </li>
-                            <li v-if="task.is_self_service === 0" class="list-group-item">
-                              <p class="section-title">{{__('Assigned To')}}:</p>
-                              <avatar-image
-                                v-if="task.user"
-                                size="32"
-                                class="d-inline-flex pull-left align-items-center"
-                                :input-data="task.user"
-                              ></avatar-image>
-                              @isset($assignedToAddons)
-                                @foreach ($assignedToAddons as $addon)
-                                  {!! $addon['content'] ?? '' !!}
-                                @endforeach
-                              @endisset
-                            </li>
-                            <li class="list-group-item">
-                              <p class="section-title"> {{__('Assigned') }} @{{ moment(createdAt).fromNow() }}</p>
-                              @{{ moment(createdAt).format() }}
-                            </li>
-                            <li class="list-group-item">
-                              <p class="section-title">{{__('Case')}}</p>
-                              @{{ caseTitle }}
-                              <p class="launchpad-link">
-                                <a href="{{route('process.browser.index', [$task->process->id])}}">
-                                  {{ __('Open Process Launchpad') }}
-                                </a>
-                              </p>
-                            </li>
-                            <li class="list-group-item">
-                              <p class="section-title">{{__('Request')}}</p>
-                              <a href="{{route('requests.show', [$task->process_request_id, 'skipInterstitial' => '1'])}}">
-                                #{{$task->process_request_id}} {{$task->process->name}}
-                              </a>
-                            </li>
-                            <li class="list-group-item">
-                            <p class="section-title">{{__('Requested By')}}:</p>
-                              <avatar-image
-                                v-if="task.requestor"
-                                size="32"
-                                class="d-inline-flex pull-left align-items-center"
-                                :input-data="task.requestor"
+                              <li v-if="dateDueAt && showDueAtDates" class="list-group-item">
+                                <p class="section-title">@{{$t(dueLabel)}} @{{ moment(dateDueAt).fromNow() }}</p>
+                                @{{ moment(dateDueAt).format() }}
+                              </li>
+                              <li v-if="!showDueAtDates" class="list-group-item">
+                                <p class="section-title">@{{$t(dueLabel)}} @{{ moment().to(moment(completedAt)) }}</p>
+                                @{{ moment(completedAt).format() }}
+                              </li>
+                              <li class="list-group-item" v-if="taskDraftsEnabled">
+                                <task-save-panel
+                                  :options="options"
+                                  :task="task"
+                                  :date="lastAutosave"
+                                  :error="errorAutosave"
+                                />
+                              </li>
+                              <li v-if="task.is_self_service === 0" class="list-group-item">
+                                <p class="section-title">{{__('Assigned To')}}:</p>
+                                <avatar-image
+                                  v-if="task.user"
+                                  size="32"
+                                  class="d-inline-flex pull-left align-items-center"
+                                  :input-data="task.user"
                                 ></avatar-image>
-                              <p v-if="!task.requestor">{{__('Web Entry')}}</p>
-                            </li>
-                          </ul>
+                                @isset($assignedToAddons)
+                                  @foreach ($assignedToAddons as $addon)
+                                    {!! $addon['content'] ?? '' !!}
+                                  @endforeach
+                                @endisset
+                              </li>
+                              <li class="list-group-item">
+                                <p class="section-title"> {{__('Assigned') }} @{{ moment(createdAt).fromNow() }}</p>
+                                @{{ moment(createdAt).format() }}
+                              </li>
+                              <li class="list-group-item">
+                                <p class="section-title">{{__('Case')}}</p>
+                                @{{ caseTitle }}
+                                <p class="launchpad-link">
+                                  <a href="{{route('process.browser.index', [$task->process->id])}}">
+                                    {{ __('Open Process Launchpad') }}
+                                  </a>
+                                </p>
+                              </li>
+                              <li class="list-group-item">
+                                <p class="section-title">{{__('Request')}}</p>
+                                <a href="{{route('requests.show', [$task->process_request_id, 'skipInterstitial' => '1'])}}">
+                                  #{{$task->process_request_id}} {{$task->process->name}}
+                                </a>
+                              </li>
+                              <li class="list-group-item">
+                              <p class="section-title">{{__('Requested By')}}:</p>
+                                <avatar-image
+                                  v-if="task.requestor"
+                                  size="32"
+                                  class="d-inline-flex pull-left align-items-center"
+                                  :input-data="task.requestor"
+                                  ></avatar-image>
+                                <p v-if="!task.requestor">{{__('Web Entry')}}</p>
+                              </li>
+                            </ul>
+                          </div>
                         </div>
                       </div>
+                      <div
+                      v-if="!showInfo"
+                      id="comments"
+                      v-bind:class="{ 'tab-pane':true, fade: true, show: !showInfo, active: !showInfo }"
+                      role="tabpanel"
+                      aria-labelledby="comments-tab"
+                    >
+                      <div class="ml-md-3 mt-md-0 mt-3 collapse-content">
+                        <template v-if="panCommentInVueOptionsComponents">
+                          <comment-container
+                            commentable_type="ProcessMaker\Models\ProcessRequestToken"
+                            :commentable_id="task.id"
+                            :readonly="task.status === 'CLOSED'"
+                            :name="task.element_name"
+                            :header="false"
+                          />
+                        </template>
+                      </div>
                     </div>
-                    <div
-                    v-if="!showInfo"
-                    id="comments"
-                    v-bind:class="{ 'tab-pane':true, fade: true, show: !showInfo, active: !showInfo }"
-                    role="tabpanel"
-                    aria-labelledby="comments-tab"
-                  >
-                    <div class="ml-md-3 mt-md-0 mt-3 collapse-content">
-                      <template v-if="panCommentInVueOptionsComponents">
-                        <comment-container
-                          commentable_type="ProcessMaker\Models\ProcessRequestToken"
-                          :commentable_id="task.id"
-                          :readonly="task.status === 'CLOSED'"
-                          :name="task.element_name"
-                          :header="false"
-                        />
-                      </template>
                     </div>
                   </div>
-                  </div>
-                </div>
-                <b-modal
-                  v-model="showReassignment"
-                  size="md"
-                  centered title="{{__('Reassign to')}}"
-                  header-close-content="&times;"
-                  v-cloak
-                  @hide="cancelReassign"
-                >
-                  <div class="form-group">
-                    {!!Form::label('user', __('User'))!!}
-                    <select-from-api
-                      id='user'
-                      v-model="selectedUser"
-                      placeholder="{{__('Select the user to reassign to the task')}}"
-                      api="users?status=ACTIVE"
-                      :multiple="false"
-                      :show-labels="false"
-                      :searchable="true"
-                      :store-id="false"
-                      label="fullname"
-                    >
-                      <template slot="noResult">
-                        {{ __('No elements found. Consider changing the search query.') }}
-                      </template>
-                      <template slot="noOptions">
-                        {{ __('No Data Available') }}
-                      </template>
-                      <template slot="tag" slot-scope="props">
-                        <span class="multiselect__tag  d-flex align-items-center" style="width:max-content;">
-                          <span class="option__desc mr-1">
-                            <span class="option__title">@{{ props.option.fullname }}</span>
+                  <b-modal
+                    v-model="showReassignment"
+                    size="md"
+                    centered title="{{__('Reassign to')}}"
+                    header-close-content="&times;"
+                    v-cloak
+                    @hide="cancelReassign"
+                  >
+                    <div class="form-group">
+                      {!!Form::label('user', __('User'))!!}
+                      <select-from-api
+                        id='user'
+                        v-model="selectedUser"
+                        placeholder="{{__('Select the user to reassign to the task')}}"
+                        api="users?status=ACTIVE"
+                        :multiple="false"
+                        :show-labels="false"
+                        :searchable="true"
+                        :store-id="false"
+                        label="fullname"
+                      >
+                        <template slot="noResult">
+                          {{ __('No elements found. Consider changing the search query.') }}
+                        </template>
+                        <template slot="noOptions">
+                          {{ __('No Data Available') }}
+                        </template>
+                        <template slot="tag" slot-scope="props">
+                          <span class="multiselect__tag  d-flex align-items-center" style="width:max-content;">
+                            <span class="option__desc mr-1">
+                              <span class="option__title">@{{ props.option.fullname }}</span>
+                            </span>
+                            <i aria-hidden="true" tabindex="1"
+                              @click="props.remove(props.option)"
+                              class="multiselect__tag-icon"></i>
                           </span>
-                          <i aria-hidden="true" tabindex="1"
-                            @click="props.remove(props.option)"
-                            class="multiselect__tag-icon"></i>
-                        </span>
-                      </template>
-                      <template slot="option" slot-scope="props">
-                        <div class="option__desc d-flex align-items-center">
-                          <span class="option__title mr-1">@{{ props.option.fullname }}</span>
-                        </div>
-                      </template>
-                    </select-from-api>
-                  </div>
-                  <div slot="modal-footer">
-                    <button type="button" class="btn btn-outline-secondary" @click="cancelReassign">
-                      {{__('Cancel')}}
-                    </button>
-                    <button type="button" class="btn btn-secondary ml-2" @click="reassignUser" :disabled="disabled">
-                      {{__('Reassign')}}
-                    </button>
-                  </div>
-                </b-modal>
-              </div>
-            @endif
-        </div>
-    </div>
+                        </template>
+                        <template slot="option" slot-scope="props">
+                          <div class="option__desc d-flex align-items-center">
+                            <span class="option__title mr-1">@{{ props.option.fullname }}</span>
+                          </div>
+                        </template>
+                      </select-from-api>
+                    </div>
+                    <div slot="modal-footer">
+                      <button type="button" class="btn btn-outline-secondary" @click="cancelReassign">
+                        {{__('Cancel')}}
+                      </button>
+                      <button type="button" class="btn btn-secondary ml-2" @click="reassignUser" :disabled="disabled">
+                        {{__('Reassign')}}
+                      </button>
+                    </div>
+                  </b-modal>
+                </div>
+              @endif
+          </div>
+  </div>
 @endsection
 
 @section('js')
@@ -437,11 +431,11 @@ class="multiselect__tag-icon"></i>
           lastAutosave: "-",
           errorAutosave: false,
           formDataWatcherActive: true,
-          showTabs: true,
           showInfo: true,
           isPriority: false,
           userHasInteracted: false,
           caseTitle: "",
+          showMenu: true,
         },
         watch: {
           task: {
@@ -532,6 +526,10 @@ class="multiselect__tag-icon"></i>
           },
         },
         methods: {
+          hideMenu() {
+            this.showMenu = !this.showMenu;
+            this.$root.$emit("sizeChanged", !this.showMenu);
+          },
           createRule() {
             window.location.href = '/tasks/rules/new?' +
             `task_id=${this.task.id}&` +
@@ -788,6 +786,100 @@ class="multiselect__tag-icon"></i>
 
 @section('css')
 <style>
+  @import '~styles/variables';
+
+  .process-catalog-main {
+    display: flex;
+    @media (max-width: $lp-breakpoint) {
+        display: block;
+    }
+  }
+  .menu {
+    overflow: hidden;
+    transition: flex 0.3s;
+    flex: 0 0 0px;
+    @media (max-width: $lp-breakpoint) {
+      position: absolute;
+      z-index: 4;
+      display: flex;
+      margin-top: 0;
+      width: 85%;
+      transition: left 0.3s;
+    }
+  }
+  .menu-mask {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0);
+    z-index: 3;
+    transition: background-color 0.3s;
+    @media (max-width: $lp-breakpoint) {
+      display: block;
+    }
+  }
+  .menu-mask.menu-open {
+    @media (max-width: $lp-breakpoint) {
+      left: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: block;
+    }
+  }
+  .menu-open .menu {
+    flex: 0 0 315px;
+    @media (max-width: $lp-breakpoint) {
+      left: 0%;
+    }
+  }
+  .slide-control {
+    border-left: 1px solid #DEE0E1;
+    margin-left: 15px;
+    width: 16px;
+    @media (max-width: $lp-breakpoint) {
+      display: none;
+    }
+    a {
+      position: relative;
+      left: -11px;
+      top: 40px;
+      z-index: 5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 60px;
+      background-color: #ffffff;
+      border-radius: 10px;
+      border: 1px solid #DEE0E1;
+      color: #6A7888;
+    }
+  }
+  .menu-open .slide-control {
+    border-left: 1px solid #DEE0E1;
+    a {
+      left: -11px;
+      display: none;
+    }
+    
+  }
+  .slide-control:hover{
+    border-left: 1px solid rgba(72, 145, 255, 0.40);
+    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+  }
+  .menu-open .slide-control:hover {
+    border-left: 1px solid rgba(72, 145, 255, 0.40);
+    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+    a {
+      display: flex;
+    }
+  }
+  .slide-control a:hover {
+    background-color: #EAEEF2;
+  }
+  .menu-tab-content {
+    margin-left: -16px;
+  }
   .inline-input {
     margin-right: 6px;
   }
@@ -846,7 +938,6 @@ class="multiselect__tag-icon"></i>
     text-transform: uppercase;
   }
   .nav-collapse {
-    padding: 0 16px;
     border: none;
   }
   .section-title {
@@ -859,19 +950,10 @@ class="multiselect__tag-icon"></i>
     text-transform: uppercase;
     margin-bottom: 0.5rem;
   }
-  .button-collapse {
-    height: 32px;
-    padding: 0 8px;
-    border-radius: 4px;
-    border: 1px solid var(--borders, #CDDDEE);
-    background: var(--white-w24, #FFF);
-    color: #6a7888;
-  }
   .collapse-content {
     min-width:0px;
     max-width:400px;
-    width:317px;
-    height:calc(100vh - 215px)
+    width:315px;
   }
   .open-style {
     background-color: #4ea075;

From e16d22942ed9d790a974cc43feb07417af66a56c Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 16 Sep 2024 12:17:51 -0400
Subject: [PATCH 2/4] feature/FOUR-18857

---
 resources/views/requests/show.blade.php | 5 +++--
 resources/views/tasks/edit.blade.php    | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/views/requests/show.blade.php b/resources/views/requests/show.blade.php
index c3ea4233fe..81cebb1504 100644
--- a/resources/views/requests/show.blade.php
+++ b/resources/views/requests/show.blade.php
@@ -24,7 +24,7 @@
 @section('content')
   <div id="request">
     <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
-    <div class="process-catalog-main" :class="{ 'menu-open': showMenu }">
+    <div class="requests-info-main" :class="{ 'menu-open': showMenu }">
       <div class="container-fluid px-3">
         <div class="d-flex flex-column flex-md-row">
           <div class="flex-grow-1">
@@ -859,7 +859,7 @@ classStatusCard() {
 <style>
   @import '~styles/variables';
 
-  .process-catalog-main {
+  .requests-info-main {
     display: flex;
     @media (max-width: $lp-breakpoint) {
         display: block;
@@ -994,6 +994,7 @@ classStatusCard() {
     min-width:0px;
     max-width:400px;
     width:315px;
+    min-height: calc(100vh - 200px);
   }
   .active-style {
     background-color: #4ea075;
diff --git a/resources/views/tasks/edit.blade.php b/resources/views/tasks/edit.blade.php
index 40644aa8c4..4db88d5a19 100644
--- a/resources/views/tasks/edit.blade.php
+++ b/resources/views/tasks/edit.blade.php
@@ -29,7 +29,7 @@ function() use ($task) {
 @section('content')
   <div id="task">
     <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
-    <div class="process-catalog-main" :class="{ 'menu-open': showMenu }">
+    <div class="tasks-info-main" :class="{ 'menu-open': showMenu }">
       <div v-cloak class="container-fluid px-3">
           <div class="d-flex flex-column flex-md-row">
               <div class="flex-grow-1">
@@ -788,7 +788,7 @@ class="multiselect__tag-icon"></i>
 <style>
   @import '~styles/variables';
 
-  .process-catalog-main {
+  .tasks-info-main {
     display: flex;
     @media (max-width: $lp-breakpoint) {
         display: block;
@@ -954,6 +954,7 @@ class="multiselect__tag-icon"></i>
     min-width:0px;
     max-width:400px;
     width:315px;
+    min-height: calc(100vh - 200px);
   }
   .open-style {
     background-color: #4ea075;

From 9d275874c7257eaadbd524be9a7fbed8375fa4e1 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 16 Sep 2024 14:27:15 -0400
Subject: [PATCH 3/4] feature/FOUR-18857

---
 resources/sass/collapseDetails.scss     | 91 +++++++++++++++++++++++
 resources/views/requests/show.blade.php | 94 +-----------------------
 resources/views/tasks/edit.blade.php    | 96 +------------------------
 webpack.mix.js                          |  1 +
 4 files changed, 97 insertions(+), 185 deletions(-)
 create mode 100644 resources/sass/collapseDetails.scss

diff --git a/resources/sass/collapseDetails.scss b/resources/sass/collapseDetails.scss
new file mode 100644
index 0000000000..88e3df1367
--- /dev/null
+++ b/resources/sass/collapseDetails.scss
@@ -0,0 +1,91 @@
+@import "variables";
+
+.info-main {
+  display: flex;
+  @media (max-width: $lp-breakpoint) {
+      display: block;
+  }
+}
+.menu {
+  overflow: hidden;
+  transition: flex 0.3s;
+  flex: 0 0 0px;
+  @media (max-width: $lp-breakpoint) {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    margin-top: 0;
+    width: 85%;
+    transition: left 0.3s;
+  }
+}
+.menu-mask {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 3;
+  transition: background-color 0.3s;
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
+.menu-mask.menu-open {
+  @media (max-width: $lp-breakpoint) {
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: block;
+  }
+}
+.menu-open .menu {
+  flex: 0 0 315px;
+  @media (max-width: $lp-breakpoint) {
+    left: 0%;
+  }
+}
+.slide-control {
+  border-left: 1px solid #DEE0E1;
+  margin-left: 15px;
+  width: 16px;
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+  a {
+    position: relative;
+    left: -11px;
+    top: 40px;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 60px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    border: 1px solid #DEE0E1;
+    color: #6A7888;
+  }
+}
+.menu-open .slide-control {
+  border-left: 1px solid #DEE0E1;
+  a {
+    left: -11px;
+    display: none;
+  }
+  
+}
+.slide-control:hover{
+  border-left: 1px solid rgba(72, 145, 255, 0.40);
+  box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+}
+.menu-open .slide-control:hover {
+  border-left: 1px solid rgba(72, 145, 255, 0.40);
+  box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+  a {
+    display: flex;
+  }
+}
+.slide-control a:hover {
+  background-color: #EAEEF2;
+}
\ No newline at end of file
diff --git a/resources/views/requests/show.blade.php b/resources/views/requests/show.blade.php
index 81cebb1504..f85cafd54e 100644
--- a/resources/views/requests/show.blade.php
+++ b/resources/views/requests/show.blade.php
@@ -24,7 +24,7 @@
 @section('content')
   <div id="request">
     <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
-    <div class="requests-info-main" :class="{ 'menu-open': showMenu }">
+    <div class="info-main" :class="{ 'menu-open': showMenu }">
       <div class="container-fluid px-3">
         <div class="d-flex flex-column flex-md-row">
           <div class="flex-grow-1">
@@ -856,98 +856,8 @@ classStatusCard() {
 @endsection
 
 @section('css')
+<link href="{{ mix('css/collapseDetails.css') }}" rel="stylesheet">
 <style>
-  @import '~styles/variables';
-
-  .requests-info-main {
-    display: flex;
-    @media (max-width: $lp-breakpoint) {
-        display: block;
-    }
-  }
-  .menu {
-    overflow: hidden;
-    transition: flex 0.3s;
-    flex: 0 0 0px;
-    @media (max-width: $lp-breakpoint) {
-      position: absolute;
-      z-index: 4;
-      display: flex;
-      margin-top: 0;
-      width: 85%;
-      transition: left 0.3s;
-    }
-  }
-  .menu-mask {
-    display: none;
-    position: absolute;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0);
-    z-index: 3;
-    transition: background-color 0.3s;
-    
-    @media (max-width: $lp-breakpoint) {
-      display: block;
-    }
-  }
-  .menu-mask.menu-open {
-    @media (max-width: $lp-breakpoint) {
-      left: 0;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: block;
-    }
-  }
-  .menu-open .menu {
-    flex: 0 0 315px;
-    @media (max-width: $lp-breakpoint) {
-      left: 0%;
-    }
-  }
-  .slide-control {
-    border-left: 1px solid #DEE0E1;
-    margin-left: 15px;
-    width: 16px;
-    @media (max-width: $lp-breakpoint) {
-      display: none;
-    }
-    a {
-      position: relative;
-      left: -11px;
-      top: 40px;
-      z-index: 5;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 60px;
-      background-color: #ffffff;
-      border-radius: 10px;
-      border: 1px solid #DEE0E1;
-      color: #6A7888;
-    }
-  }
-  .menu-open .slide-control {
-    border-left: 1px solid #DEE0E1;
-    a {
-      left: -11px;
-      display: none;
-    }
-    
-  }
-  .slide-control:hover{
-    border-left: 1px solid rgba(72, 145, 255, 0.40);
-    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
-  }
-  .menu-open .slide-control:hover {
-    border-left: 1px solid rgba(72, 145, 255, 0.40);
-    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
-    a {
-      display: flex;
-    }
-  }
-  .slide-control a:hover {
-    background-color: #EAEEF2;
-  }
   .hidden {
     visibility: hidden;
     opacity: 0;
diff --git a/resources/views/tasks/edit.blade.php b/resources/views/tasks/edit.blade.php
index 4db88d5a19..b22ed6d8de 100644
--- a/resources/views/tasks/edit.blade.php
+++ b/resources/views/tasks/edit.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.layout')
 
 @section('meta')
-    <meta name="request-id" content="{{ $task->processRequest->id }}">
+  <meta name="request-id" content="{{ $task->processRequest->id }}">
 @endsection
 
 @section('title')
@@ -29,7 +29,7 @@ function() use ($task) {
 @section('content')
   <div id="task">
     <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
-    <div class="tasks-info-main" :class="{ 'menu-open': showMenu }">
+    <div class="info-main" :class="{ 'menu-open': showMenu }">
       <div v-cloak class="container-fluid px-3">
           <div class="d-flex flex-column flex-md-row">
               <div class="flex-grow-1">
@@ -785,98 +785,8 @@ class="multiselect__tag-icon"></i>
 @endsection
 
 @section('css')
+<link href="{{ mix('css/collapseDetails.css') }}" rel="stylesheet">
 <style>
-  @import '~styles/variables';
-
-  .tasks-info-main {
-    display: flex;
-    @media (max-width: $lp-breakpoint) {
-        display: block;
-    }
-  }
-  .menu {
-    overflow: hidden;
-    transition: flex 0.3s;
-    flex: 0 0 0px;
-    @media (max-width: $lp-breakpoint) {
-      position: absolute;
-      z-index: 4;
-      display: flex;
-      margin-top: 0;
-      width: 85%;
-      transition: left 0.3s;
-    }
-  }
-  .menu-mask {
-    display: none;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0);
-    z-index: 3;
-    transition: background-color 0.3s;
-    @media (max-width: $lp-breakpoint) {
-      display: block;
-    }
-  }
-  .menu-mask.menu-open {
-    @media (max-width: $lp-breakpoint) {
-      left: 0;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: block;
-    }
-  }
-  .menu-open .menu {
-    flex: 0 0 315px;
-    @media (max-width: $lp-breakpoint) {
-      left: 0%;
-    }
-  }
-  .slide-control {
-    border-left: 1px solid #DEE0E1;
-    margin-left: 15px;
-    width: 16px;
-    @media (max-width: $lp-breakpoint) {
-      display: none;
-    }
-    a {
-      position: relative;
-      left: -11px;
-      top: 40px;
-      z-index: 5;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 60px;
-      background-color: #ffffff;
-      border-radius: 10px;
-      border: 1px solid #DEE0E1;
-      color: #6A7888;
-    }
-  }
-  .menu-open .slide-control {
-    border-left: 1px solid #DEE0E1;
-    a {
-      left: -11px;
-      display: none;
-    }
-    
-  }
-  .slide-control:hover{
-    border-left: 1px solid rgba(72, 145, 255, 0.40);
-    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
-  }
-  .menu-open .slide-control:hover {
-    border-left: 1px solid rgba(72, 145, 255, 0.40);
-    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
-    a {
-      display: flex;
-    }
-  }
-  .slide-control a:hover {
-    background-color: #EAEEF2;
-  }
   .menu-tab-content {
     margin-left: -16px;
   }
diff --git a/webpack.mix.js b/webpack.mix.js
index 66f88e3053..70d85e7914 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -167,6 +167,7 @@ mix.copyDirectory(`${monacoSource}language`, `${monacoDestination}language`);
 
 mix
   .sass("resources/sass/sidebar/sidebar.scss", "public/css")
+  .sass("resources/sass/collapseDetails.scss", "public/css")
   .sass("resources/sass/app.scss", "public/css")
   .sass("resources/sass/admin/queues.scss", "public/css/admin")
   .version();

From 247d9b10a65108348af30d7e5695d4a2715d34ca Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 16 Sep 2024 14:28:12 -0400
Subject: [PATCH 4/4] feature/FOUR-18857

---
 resources/sass/collapseDetails.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/sass/collapseDetails.scss b/resources/sass/collapseDetails.scss
index 88e3df1367..9ee0df4d61 100644
--- a/resources/sass/collapseDetails.scss
+++ b/resources/sass/collapseDetails.scss
@@ -88,4 +88,4 @@
 }
 .slide-control a:hover {
   background-color: #EAEEF2;
-}
\ No newline at end of file
+}