From 9fc64126a6729a45915d5a45dae710d00b8dafea Mon Sep 17 00:00:00 2001
From: HassanZahirnia <m.hassan.zahirnia@gmail.com>
Date: Fri, 29 Aug 2025 14:46:14 +0330
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20Refactor=20docs=20menu=20and?=
 =?UTF-8?q?=20remove=20mini=20platform=20switcher=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/components/docs/menu.blade.php      | 69 ++++++-------------
 .../docs/mini-platform-switcher.blade.php     | 44 ------------
 .../components/icons/list-down.blade.php      | 32 +++++++++
 3 files changed, 54 insertions(+), 91 deletions(-)
 delete mode 100644 resources/views/components/docs/mini-platform-switcher.blade.php
 create mode 100644 resources/views/components/icons/list-down.blade.php

diff --git a/resources/views/components/docs/menu.blade.php b/resources/views/components/docs/menu.blade.php
index 2e2397f2..aba8eed6 100644
--- a/resources/views/components/docs/menu.blade.php
+++ b/resources/views/components/docs/menu.blade.php
@@ -1,52 +1,27 @@
+@php
+    $isMobile = request()->is('docs/mobile/*');
+@endphp
+
 <div class="lg:hidden">
-    <div
-        class="mb-2 flex flex-col-reverse items-start justify-between gap-3.5 min-[400px]:mb-2.5 min-[400px]:flex-row min-[400px]:items-center"
+    {{-- Docs menu button --}}
+    <button
+        type="button"
+        x-on:click="showDocsMenu = !showDocsMenu"
+        class="mb-2 flex w-full items-center gap-2.5 rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-3 focus:ring-0 focus:outline-none dark:to-indigo-400/30"
+        :aria-expanded="showDocsMenu"
+        aria-label="Toggle docs menu"
+        aria-haspopup="true"
+        title="Open docs navigation"
     >
-        {{-- Docs menu button --}}
-        <button
-            type="button"
-            x-on:click="showDocsMenu = !showDocsMenu"
-            class="-mx-1 flex items-center gap-1.5 px-1 py-1.5 transition duration-300 ease-in-out will-change-transform focus:ring-0 focus:outline-none"
-            :aria-expanded="showDocsMenu"
-            aria-label="Toggle docs menu"
-            aria-haspopup="true"
-            title="Open docs navigation"
-            :class="{
-                'translate-x-1': showDocsMenu,
-            }"
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="size-5.5"
-                viewBox="0 0 24 24"
-            >
-                <g
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-width="1.5"
-                >
-                    <path
-                        d="M4 19V5a2 2 0 0 1 2-2h13.4a.6.6 0 0 1 .6.6v13.114"
-                    />
-                    <path
-                        stroke-linejoin="round"
-                        d="M8 3v8l2.5-1.6L13 11V3"
-                    />
-                    <path d="M6 17h14M6 21h14" />
-                    <path
-                        stroke-linejoin="round"
-                        d="M6 21a2 2 0 1 1 0-4"
-                    />
-                </g>
-            </svg>
-
-            <div>Menu</div>
-        </button>
+        <x-icons.list-down class="size-6" />
 
-        {{-- Platform switcher --}}
-        <x-docs.mini-platform-switcher />
-    </div>
+        <div class="text-left">
+            <div class="leading-6">Menu</div>
+            <div class="text-xs capitalize opacity-50">
+                for {{ $isMobile ? 'Mobile' : 'Desktop' }}
+            </div>
+        </div>
+    </button>
 
     {{-- Docs mobile menu --}}
     <div
@@ -55,7 +30,7 @@ class="size-5.5"
         role="dialog"
         aria-modal="true"
         aria-label="Docs menu"
-        class="dark:bg-mirage rounded-xl bg-gray-100"
+        class="rounded-xl bg-gray-100 dark:bg-mirage"
     >
         <div class="p-6">
             {{ $slot }}
diff --git a/resources/views/components/docs/mini-platform-switcher.blade.php b/resources/views/components/docs/mini-platform-switcher.blade.php
deleted file mode 100644
index 741f0b35..00000000
--- a/resources/views/components/docs/mini-platform-switcher.blade.php
+++ /dev/null
@@ -1,44 +0,0 @@
-@php
-    $isMobile = request()->is('docs/mobile/*');
-    $mobileHref = '/docs/mobile/1';
-    $desktopHref = '/docs/desktop/1';
-@endphp
-
-<div
-    class="dark:bg-mirage grid h-11 grid-cols-2 items-center gap-0.5 rounded-lg bg-gray-100 p-1 text-xs"
->
-    <a
-        href="{{ $desktopHref }}"
-        @class([
-            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
-            'bg-white dark:bg-slate-700/30' => ! $isMobile,
-        ])
-    >
-        <div
-            @class([
-                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
-                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => ! $isMobile,
-            ])
-        >
-            <x-icons.pc class="size-5 shrink-0" />
-        </div>
-        <div>Desktop</div>
-    </a>
-    <a
-        href="{{ $mobileHref }}"
-        @class([
-            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
-            'bg-white dark:bg-slate-700/30' => $isMobile,
-        ])
-    >
-        <div
-            @class([
-                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
-                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => $isMobile,
-            ])
-        >
-            <x-icons.device-mobile-phone class="size-4 shrink-0" />
-        </div>
-        <div>Mobile</div>
-    </a>
-</div>
diff --git a/resources/views/components/icons/list-down.blade.php b/resources/views/components/icons/list-down.blade.php
new file mode 100644
index 00000000..c89467ba
--- /dev/null
+++ b/resources/views/components/icons/list-down.blade.php
@@ -0,0 +1,32 @@
+<svg
+    {{ $attributes }}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        d="M20 6 3 6"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="1.5"
+    ></path>
+    <path
+        d="M20 11 3 11"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="1.5"
+    ></path>
+    <path
+        d="M10 16H3"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="1.5"
+    ></path>
+    <path
+        d="m14 15 3.5 3 3.5 -3"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+    ></path>
+</svg>

From 0c0d143d04a392fc58049529e134454cd70a3bcd Mon Sep 17 00:00:00 2001
From: HassanZahirnia <m.hassan.zahirnia@gmail.com>
Date: Fri, 29 Aug 2025 15:12:52 +0330
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=84=20Refactor=20docs=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/components/docs/menu.blade.php      |  2 +-
 .../docs/sidebar-left-navigation.blade.php    | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/docs/menu.blade.php b/resources/views/components/docs/menu.blade.php
index aba8eed6..085db611 100644
--- a/resources/views/components/docs/menu.blade.php
+++ b/resources/views/components/docs/menu.blade.php
@@ -7,7 +7,7 @@
     <button
         type="button"
         x-on:click="showDocsMenu = !showDocsMenu"
-        class="mb-2 flex w-full items-center gap-2.5 rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-3 focus:ring-0 focus:outline-none dark:to-indigo-400/30"
+        class="mb-2 flex w-full items-center gap-2.5 rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-3 focus:ring-0 focus:outline-none dark:from-slate-900/30 dark:to-indigo-400/30"
         :aria-expanded="showDocsMenu"
         aria-label="Toggle docs menu"
         aria-haspopup="true"
diff --git a/resources/views/components/docs/sidebar-left-navigation.blade.php b/resources/views/components/docs/sidebar-left-navigation.blade.php
index 4b5d299f..8af356d1 100644
--- a/resources/views/components/docs/sidebar-left-navigation.blade.php
+++ b/resources/views/components/docs/sidebar-left-navigation.blade.php
@@ -1,8 +1,27 @@
+@php
+    $isMobile = request()->is('docs/mobile/*');
+@endphp
+
 <aside
     class="sticky top-20 hidden max-h-[calc(100dvh-7rem)] w-[18rem] shrink-0 overflow-x-hidden overflow-y-auto pt-4 pr-3 lg:block"
 >
     <div class="relative flex flex-1 flex-col pb-5">
-        <x-docs.platform-switcher />
+        {{-- <x-docs.platform-switcher /> --}}
+        <div
+            class="mx-0.5 mb-3 flex w-full items-center gap-3 rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-4 dark:from-slate-900/30 dark:to-indigo-900/35"
+        >
+            @if ($isMobile)
+                <x-icons.device-mobile-phone class="size-6 shrink-0" />
+            @else
+                <x-icons.pc class="size-6 shrink-0" />
+            @endif
+            <div class="text-left">
+                <div class="text-xs opacity-50">You're reading the</div>
+                <div class="text-sm leading-6 capitalize">
+                    {{ $isMobile ? 'Mobile' : 'Desktop' }} Documentation
+                </div>
+            </div>
+        </div>
 
         <nav class="docs-navigation">{!! $slot !!}</nav>
     </div>

From b0ec54c3c5b419eebd027fa7cc36e9d19a16670c Mon Sep 17 00:00:00 2001
From: HassanZahirnia <m.hassan.zahirnia@gmail.com>
Date: Fri, 29 Aug 2025 15:26:18 +0330
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84=20Rework=20the=20platform=20sw?=
 =?UTF-8?q?itcher?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/platform-switcher.blade.php          | 99 ++++---------------
 .../docs/sidebar-left-navigation.blade.php    | 21 +---
 2 files changed, 22 insertions(+), 98 deletions(-)

diff --git a/resources/views/components/docs/platform-switcher.blade.php b/resources/views/components/docs/platform-switcher.blade.php
index effb1867..a19eacea 100644
--- a/resources/views/components/docs/platform-switcher.blade.php
+++ b/resources/views/components/docs/platform-switcher.blade.php
@@ -4,90 +4,33 @@
     $desktopHref = '/docs/desktop/1';
 @endphp
 
-<div
-    {{ $attributes }}
-    class="mx-1 mb-3 rounded-xl bg-zinc-100/80 transition-all duration-300 ease-in-out dark:bg-mirage"
-    :class="{
-        'pb-4 pl-4 pr-5 pt-5' : showPlatformSwitcherHeader,
-        'pb-2 pl-2 pr-3 pt-3' : !showPlatformSwitcherHeader
-    }"
+<a
+    href="{{ $isMobile ? $desktopHref : $mobileHref }}"
+    class="group relative mx-0.5 mb-3 w-full rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-4 dark:from-slate-900/30 dark:to-indigo-900/35"
 >
     <div
-        x-show="showPlatformSwitcherHeader"
-        x-collapse
-        class="space-y-1.5"
+        class="flex items-center gap-3 transition group-hover:translate-y-3 group-hover:opacity-0"
     >
-        <div class="space-y-1 pl-1">
-            {{-- Title --}}
-            <div class="text-sm">Choose your platform</div>
-            {{-- Description --}}
-            <div class="text-xs opacity-60">
-                Switch between mobile and desktop documentation.
+        @if ($isMobile)
+            <x-icons.device-mobile-phone class="size-6 shrink-0" />
+        @else
+            <x-icons.pc class="size-6 shrink-0" />
+        @endif
+        <div class="text-left">
+            <div class="text-xs opacity-50">You're reading the</div>
+            <div class="text-sm leading-6 capitalize">
+                {{ $isMobile ? 'Mobile' : 'Desktop' }} Documentation
             </div>
         </div>
-        {{-- Separator --}}
-        <div
-            class="h-px w-full rounded-full bg-current opacity-5 dark:opacity-15"
-        ></div>
     </div>
 
-    {{-- Switcher --}}
-    <div
-        class="flex items-center gap-3 text-xs"
-        :class="{ 'mt-2.5': showPlatformSwitcherHeader }"
-    >
-        {{-- Desktop --}}
-        <a
-            href="{{ $desktopHref }}"
-            @class([
-                'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
-                'bg-white dark:bg-slate-700/30' => ! $isMobile,
-                'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => $isMobile,
-            ])
-            :class="{ 'flex-col p-2.5': showPlatformSwitcherHeader, 'flex-row p-2': !showPlatformSwitcherHeader }"
-        >
-            <div
-                @class([
-                    'grid h-9 w-10 place-items-center rounded-lg',
-                    'bg-blue-50 text-blue-500 dark:bg-haiti dark:text-blue-400' => ! $isMobile,
-                ])
-            >
-                <x-icons.pc class="size-6 shrink-0" />
-            </div>
-            <div>Desktop</div>
-        </a>
-
-        {{-- Center icon --}}
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="size-6 dark:text-gray-400/80"
-            viewBox="0 0 256 256"
-        >
-            <path
-                fill="currentColor"
-                d="M144 128a16 16 0 1 1-16-16a16 16 0 0 1 16 16m-84-16a16 16 0 1 0 16 16a16 16 0 0 0-16-16m136 0a16 16 0 1 0 16 16a16 16 0 0 0-16-16"
-            />
-        </svg>
-
-        {{-- Mobile --}}
-        <a
-            href="{{ $mobileHref }}"
-            @class([
-                'flex w-1/2 items-center justify-center gap-x-1.5 gap-y-1 rounded-xl transition duration-300 ease-in-out',
-                'bg-white dark:bg-slate-700/30' => $isMobile,
-                'hover:bg-zinc-200/50 dark:text-gray-400/80 dark:hover:bg-gray-900/80 dark:hover:text-white' => ! $isMobile,
-            ])
-            :class="{ 'flex-col p-2.5': showPlatformSwitcherHeader, 'flex-row p-2': !showPlatformSwitcherHeader }"
+    <div class="absolute top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2">
+        <div
+            class="flex -translate-y-3 items-center justify-center gap-2 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100"
         >
-            <div
-                @class([
-                    'grid h-9 w-10 place-items-center rounded-lg',
-                    'bg-blue-50 text-blue-500 dark:bg-haiti dark:text-blue-400' => $isMobile,
-                ])
-            >
-                <x-icons.device-mobile-phone class="size-5 shrink-0" />
-            </div>
-            <div>Mobile</div>
-        </a>
+            {{ $isMobile ? 'Mobile' : 'Desktop' }}
+            <x-icons.right-arrow class="size-3" />
+            {{ $isMobile ? 'Desktop' : 'Mobile' }}
+        </div>
     </div>
-</div>
+</a>
diff --git a/resources/views/components/docs/sidebar-left-navigation.blade.php b/resources/views/components/docs/sidebar-left-navigation.blade.php
index 8af356d1..4b5d299f 100644
--- a/resources/views/components/docs/sidebar-left-navigation.blade.php
+++ b/resources/views/components/docs/sidebar-left-navigation.blade.php
@@ -1,27 +1,8 @@
-@php
-    $isMobile = request()->is('docs/mobile/*');
-@endphp
-
 <aside
     class="sticky top-20 hidden max-h-[calc(100dvh-7rem)] w-[18rem] shrink-0 overflow-x-hidden overflow-y-auto pt-4 pr-3 lg:block"
 >
     <div class="relative flex flex-1 flex-col pb-5">
-        {{-- <x-docs.platform-switcher /> --}}
-        <div
-            class="mx-0.5 mb-3 flex w-full items-center gap-3 rounded-xl bg-gradient-to-tl from-transparent to-violet-100 px-3.5 py-4 dark:from-slate-900/30 dark:to-indigo-900/35"
-        >
-            @if ($isMobile)
-                <x-icons.device-mobile-phone class="size-6 shrink-0" />
-            @else
-                <x-icons.pc class="size-6 shrink-0" />
-            @endif
-            <div class="text-left">
-                <div class="text-xs opacity-50">You're reading the</div>
-                <div class="text-sm leading-6 capitalize">
-                    {{ $isMobile ? 'Mobile' : 'Desktop' }} Documentation
-                </div>
-            </div>
-        </div>
+        <x-docs.platform-switcher />
 
         <nav class="docs-navigation">{!! $slot !!}</nav>
     </div>