diff --git a/packages/framework/resources/views/components/docs/sidebar-toggle-button.blade.php b/packages/framework/resources/views/components/docs/sidebar-toggle-button.blade.php
index f140bba1527..c07f5c353c1 100644
--- a/packages/framework/resources/views/components/docs/sidebar-toggle-button.blade.php
+++ b/packages/framework/resources/views/components/docs/sidebar-toggle-button.blade.php
@@ -1,13 +1,14 @@
 <button 
     id="sidebar-toggle" 
     title="Toggle sidebar" 
-    aria-label="Toggle sidebar navigation menu" 
-    @click="sidebarOpen = ! sidebarOpen" 
-    :class="{'[&>span:first-child]:opacity-0 [&>span:nth-child(2)]:rotate-45 [&>span:nth-child(3)]:-rotate-45 [&>span:last-child]:opacity-0': sidebarOpen}"
-    class="relative inline-block w-8 h-8 hover:text-gray-700 dark:text-gray-200"
->
-    <span class="block w-5 h-0.5 bg-current absolute left-1.5 top-1 transition-all duration-300 ease-out" role="presentation"></span>
-    <span class="block w-5 h-0.5 bg-current absolute left-1.5 top-2.5 transition-all duration-300 ease-out origin-center" role="presentation"></span>
-    <span class="block w-5 h-0.5 bg-current absolute left-1.5 top-2.5 transition-all duration-300 ease-out origin-center" role="presentation"></span>
-    <span class="block w-5 h-0.5 bg-current absolute left-1.5 top-4 transition-all duration-300 ease-out" role="presentation"></span>
+    aria-label="Toggle sidebar navigation menu"
+    @click="sidebarOpen = !sidebarOpen"
+    class="flex items-center justify-center w-8 h-8 px-2 py-1 hover:text-gray-700 dark:text-gray-200 opacity-75 hover:opacity-100"
+  >
+    <div class="relative w-5 h-4">
+        <div class="absolute top-0 w-5 h-0.5 bg-current transition-all duration-300 ease-in-out" :class="sidebarOpen ? 'opacity-0' : ''"></div>
+        <div class="absolute inset-0 my-auto w-5 h-0.5 bg-current transition-all duration-300 ease-in-out origin-center" :class="sidebarOpen ? 'rotate-45' : ''"></div>
+        <div class="absolute inset-0 my-auto w-5 h-0.5 bg-current transition-all duration-300 ease-in-out origin-center" :class="sidebarOpen ? '-rotate-45' : ''"></div>
+        <div class="absolute bottom-0 w-5 h-0.5 bg-current transition-all duration-300 ease-in-out" :class="sidebarOpen ? 'opacity-0' : ''"></div>
+    </div>
 </button>
\ No newline at end of file