feat: Update contact list page (#13020)

app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue

@@ -39,21 +39,26 @@ const toggleSidebar = () => {
   <div
     v-if="!isConversationRoute"
     id="mobile-sidebar-launcher"
-    class="fixed bottom-4 ltr:left-4 rtl:right-4 z-40 transition-transform duration-200 ease-in-out block md:hidden"
+    class="fixed bottom-16 md:bottom-[4.5rem] ltr:left-0 rtl:right-0 z-40 transition-transform duration-200 ease-in-out block md:hidden"
     :class="[
       {
-        'ltr:translate-x-48 rtl:-translate-x-48': isMobileSidebarOpen,
+        'ltr:translate-x-[12.5rem] rtl:-translate-x-[12.5rem]':
+          isMobileSidebarOpen,
       },
     ]"
   >
     <ButtonGroup
-      class="rounded-full bg-n-alpha-2 backdrop-blur-lg p-1 shadow hover:shadow-md"
+      class="ltr:rounded-r-full ltr:rounded-l-none rtl:rounded-l-full rtl:rounded-r-none bg-n-alpha-2 backdrop-blur-lg p-1 hover:shadow-md"
+      :class="{
+        'shadow-none': isMobileSidebarOpen,
+        shadow: !isMobileSidebarOpen,
+      }"
     >
       <Button
         icon="i-lucide-menu"
         no-animation
         class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl transition-all duration-200 ease-out hover:brightness-110"
-        lg
+        md
         @click="toggleSidebar"
       />
     </ButtonGroup>

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue

@@ -123,7 +123,7 @@ const allowedMenuItems = computed(() => {
   <DropdownContainer class="relative w-full min-w-0" @close="emit('close')">
     <template #trigger="{ toggle, isOpen }">
       <button
-        class="flex gap-2 items-center p-1 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-1"
+        class="flex gap-2 items-center p-1 w-full h-12 text-left rounded-lg cursor-pointer hover:bg-n-alpha-1"
         :class="{ 'bg-n-alpha-1': isOpen }"
         @click="toggle"
       >