Refactor AuthenticatedLayout to improve responsive display of RequestCount component

Author: StevenU21

resources/js/Layouts/AuthenticatedLayout.vue

@@ -88,6 +88,10 @@ onMounted(() => {
                             </div>
                         </div>
 
+                        <div class="block sm:hidden flex-1 flex items-center justify-center">
+                            <RequestCount />
+                        </div>
+
                         <div class="hidden sm:ms-6 sm:flex sm:items-center">
                             <RequestCount />
                             <!-- Settings Dropdown -->
@@ -117,7 +121,6 @@ onMounted(() => {
                                 </Dropdown>
                             </div>
                         </div>
-
                         <!-- Hamburger -->
                         <div class="-me-2 flex items-center sm:hidden">
                             <button
@@ -160,9 +163,6 @@ onMounted(() => {
                         </div>
                     </div>
                 </div>
-                <div class="block sm:hidden">
-                    <RequestCount />
-                </div>
                 <!-- Responsive Navigation Menu -->
                 <div
                     :class="{