✨ Add alignment option to device dropdowns and update class binding

Author: HassanZahirnia

resources/views/components/navbar/device-dropdown.blade.php

@@ -10,6 +10,7 @@
     $base = $id ?? \Illuminate\Support\Str::slug($label) . '-' . \Illuminate\Support\Str::random(6);
     $buttonId = $base . '-btn';
     $menuId = $base . '-menu';
+    $align = $align ?? 'left'; // 'left', 'center'
 @endphp
 
 <div
@@ -126,7 +127,7 @@ class="transition duration-200 will-change-transform"
         id="{{ $menuId }}"
         role="menu"
         aria-labelledby="{{ $buttonId }}"
-        class="dark:bg-mirage absolute top-full left-0 mt-2 w-max max-w-[calc(100vw-1rem)] min-w-[16rem] origin-top overflow-y-auto overscroll-contain rounded-xl bg-white shadow-xl ring-1 shadow-black/5 ring-zinc-200/80 sm:right-auto sm:left-0 dark:text-white dark:ring-zinc-700/70"
+        class="{{ $align === 'left' ? 'left-0' : 'left-1/2 -translate-x-1/2 sm:left-0 sm:translate-x-0' }} absolute top-full mt-2 w-max max-w-[calc(100vw-1rem)] min-w-[16rem] origin-top overflow-y-auto overscroll-contain rounded-xl bg-white shadow-xl ring-1 shadow-black/5 ring-zinc-200/80 sm:right-auto dark:bg-mirage dark:text-white dark:ring-zinc-700/70"
         @mouseenter="pointerFine && (closeTimeout && clearTimeout(closeTimeout))"
         @keydown.tab="closeMenu()"
         @keydown.arrow-down.prevent="(() => {

resources/views/components/navbar/device-dropdowns.blade.php

@@ -18,13 +18,14 @@
             icon="dollar-circle"
             icon-class="size-5.5"
         />
+        {{-- 👇 Hidden temporarily --}}
         {{--
-        <x-navbar.device-dropdown-item
+            <x-navbar.device-dropdown-item
             href="https://github.com/nativephp/mobile"
             title="GitHub"
             subtitle="Visit our GitHub repository"
             icon="github"
-        />
+            />
         --}}
     </x-navbar.device-dropdown>
 
@@ -33,6 +34,7 @@
         label="Desktop"
         icon="pc"
         id="desktop-dropdown"
+        align="center"
     >
         <x-navbar.device-dropdown-item
             href="/docs/desktop/1/getting-started/introduction"