Redesign of the SMS automation page

apps/web/src/layouts/AppLayout.vue

@@ -48,9 +48,10 @@ const salesActive = computed(() =>
 const activitiesActive = computed(() => pathIn(['/activities']));
 const notesActive = computed(() => route.path === '/notes' || route.path.startsWith('/notes/'));
 const supportActive = computed(() => pathIn(['/tickets']));
-const automationsActive = computed(() => route.path.startsWith('/settings/automations'));
-const messageAutomationsActive = computed(() =>
-  route.path.startsWith('/settings/message-automations'),
+const automationsActive = computed(
+  () =>
+    route.path.startsWith('/settings/automations') ||
+    route.path.startsWith('/settings/message-automations'),
 );
 const toolsActive = computed(() =>
   pathIn(['/settings/lead-forms', '/projects', '/project-cards', '/inventory', '/cheques', '/attachments']),
@@ -403,28 +404,24 @@ onUnmounted(() => {
             <UiIcon name="chart" :size="collapsed ? 20 : 18" />
             <span>گزارش‌ها</span>
           </RouterLink>
-          <RouterLink
+          <div
             v-if="canSettings"
-            to="/settings/automations"
-            class="nav-item"
-            title="اتوماسیون"
-            :class="{ 'router-link-active': automationsActive }"
-            @click="closeHub(); closeMenu()"
+            class="nav-fold"
+            :class="{ active: automationsActive || openHubKey === 'automations' }"
           >
-            <UiIcon name="layers" :size="collapsed ? 20 : 18" />
-            <span>اتوماسیون</span>
-          </RouterLink>
-          <RouterLink
-            v-if="canSettings"
-            to="/settings/message-automations"
-            class="nav-item"
-            title="پیام خودکار"
-            :class="{ 'router-link-active': messageAutomationsActive }"
-            @click="closeHub(); closeMenu()"
-          >
-            <UiIcon name="mail" :size="collapsed ? 20 : 18" />
-            <span>پیام خودکار</span>
-          </RouterLink>
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="اتوماسیون"
+              :class="{ 'router-link-active': automationsActive || openHubKey === 'automations', 'hub-on': openHubKey === 'automations' }"
+              :aria-expanded="openHubKey === 'automations'"
+              @click="onHubClick('automations')"
+            >
+              <UiIcon name="layers" :size="collapsed ? 20 : 18" />
+              <span>اتوماسیون</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+          </div>
         </div>
 
         <div class="nav-sep" aria-hidden="true" />