docs(dark-mode): update theme toggle dropdown example

Author: desmondinho

docs/LumexUI.Docs.Client/Pages/Theming/Dark Mode/ThemeToggle.razor

@@ -1,19 +1,16 @@
 @using LumexUI.Shared.Icons
 
 @inject ThemeService ThemeService
-@inject IPopoverService PopoverService
 
-<LumexButton Variant="@Variant.Outlined"
-             Class="min-w-10 w-10 h-10 p-0"
-             OnClick="@TriggerAsync"
-             data-popoverref="@_dropdownId">
-    <MoonIcon Size="20" class="hidden dark:block" />
-    <SunIcon Size="20" class="dark:hidden" />
-</LumexButton>
-
-<LumexDropdown Id="@_dropdownId"
-               Placement="@PopoverPlacement.BottomEnd"
+<LumexDropdown Placement="@PopoverPlacement.BottomEnd"
                Class="min-w-32">
+    <LumexDropdownTrigger>
+        <LumexButton Variant="@Variant.Outlined"
+                     Class="min-w-10 w-10 h-10 p-0">
+            <MoonIcon Size="20" class="hidden dark:block" />
+            <SunIcon Size="20" class="dark:hidden" />
+        </LumexButton>
+    </LumexDropdownTrigger>
     <LumexDropdownMenu Variant="@MenuVariant.Flat">
         <LumexDropdownItem OnClick="@(async () => await ThemeService.SetThemeAsync( Theme.Light ))">
             Light
@@ -25,10 +22,4 @@
             System
         </LumexDropdownItem>
     </LumexDropdownMenu>
-</LumexDropdown>
-
-@code {
-    private string _dropdownId = "theme-toggle";
-
-    private Task TriggerAsync() => PopoverService.TriggerAsync( _dropdownId );
-}
+</LumexDropdown>

docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeToggle.html

@@ -1,19 +1,16 @@
 <pre class="line-numbers"><code class="language-razor">@using LumexUI.Shared.Icons
 
 @inject ThemeService ThemeService
-@inject IPopoverService PopoverService
 
-&lt;LumexButton Variant=&quot;@Variant.Outlined&quot;
-             Class=&quot;min-w-10 w-10 h-10 p-0&quot;
-             OnClick=&quot;@TriggerAsync&quot;
-             data-popoverref=&quot;@_dropdownId&quot;&gt;
-    &lt;MoonIcon Size=&quot;20&quot; class=&quot;hidden dark:block&quot; /&gt;
-    &lt;SunIcon Size=&quot;20&quot; class=&quot;dark:hidden&quot; /&gt;
-&lt;/LumexButton&gt;
-
-&lt;LumexDropdown Id=&quot;@_dropdownId&quot;
-               Placement=&quot;@PopoverPlacement.BottomEnd&quot;
+&lt;LumexDropdown Placement=&quot;@PopoverPlacement.BottomEnd&quot;
                Class=&quot;min-w-32&quot;&gt;
+    &lt;LumexDropdownTrigger&gt;
+        &lt;LumexButton Variant=&quot;@Variant.Outlined&quot;
+                     Class=&quot;min-w-10 w-10 h-10 p-0&quot;&gt;
+            &lt;MoonIcon Size=&quot;20&quot; class=&quot;hidden dark:block&quot; /&gt;
+            &lt;SunIcon Size=&quot;20&quot; class=&quot;dark:hidden&quot; /&gt;
+        &lt;/LumexButton&gt;
+    &lt;/LumexDropdownTrigger&gt;
     &lt;LumexDropdownMenu Variant=&quot;@MenuVariant.Flat&quot;&gt;
         &lt;LumexDropdownItem OnClick=&quot;@(async () =&gt; await ThemeService.SetThemeAsync( Theme.Light ))&quot;&gt;
             Light
@@ -26,10 +23,4 @@
         &lt;/LumexDropdownItem&gt;
     &lt;/LumexDropdownMenu&gt;
 &lt;/LumexDropdown&gt;
-
-@code {
-    private string _dropdownId = &quot;theme-toggle&quot;;
-
-    private Task TriggerAsync() =&gt; PopoverService.TriggerAsync( _dropdownId );
-}
 </code></pre>