From 092fdd595d9b3b3bb21da7980ed4a46c4bcef717 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 13 Dec 2021 21:57:53 -0800
Subject: [PATCH] Some updates to dialog example

---
 src/routes/dialog/Nested.svelte |   8 +--
 src/routes/dialog/index.svelte  | 110 ++++++++++++++++----------------
 2 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/src/routes/dialog/Nested.svelte b/src/routes/dialog/Nested.svelte
index bda650f..c7f79f2 100644
--- a/src/routes/dialog/Nested.svelte
+++ b/src/routes/dialog/Nested.svelte
@@ -10,25 +10,25 @@
   <DialogOverlay class="fixed inset-0 bg-gray-500 opacity-25" />
   <div
     class="z-10 fixed left-12 top-24 bg-white w-96 p-4 transform"
-    style={`translate(calc(50px * ${level}), calc(50px * ${level}))`}
+    style={`transform: translate(calc(50px * ${level}), calc(50px * ${level}))`}
   >
     <p>Level: {level}</p>
     <div class="space-x-4">
       <button
         class="bg-gray-200 px-2 py-1 rounded"
-        onClick={() => (showChild = true)}
+        on:click={() => (showChild = true)}
       >
         Open (1)
       </button>
       <button
         class="bg-gray-200 px-2 py-1 rounded"
-        onClick={() => (showChild = true)}
+        on:click={() => (showChild = true)}
       >
         Open (2)
       </button>
       <button
         class="bg-gray-200 px-2 py-1 rounded"
-        onClick={() => (showChild = true)}
+        on:click={() => (showChild = true)}
       >
         Open (3)
       </button>
diff --git a/src/routes/dialog/index.svelte b/src/routes/dialog/index.svelte
index 4a57177..bc75b26 100644
--- a/src/routes/dialog/index.svelte
+++ b/src/routes/dialog/index.svelte
@@ -130,7 +130,7 @@
                           </MenuButton>
                         </span>
 
-                        <TransitionChild
+                        <TransitionRoot
                           enter="transition duration-300 ease-out"
                           enterFrom="transform scale-95 opacity-0"
                           enterTo="transform scale-100 opacity-100"
@@ -138,63 +138,61 @@
                           leaveFrom="transform scale-100 opacity-100"
                           leaveTo="transform scale-95 opacity-0"
                         >
-                          <Portal>
-                            <MenuItems
-                              class="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
-                            >
-                              <div class="px-4 py-3">
-                                <p class="text-sm leading-5">Signed in as</p>
-                                <p
-                                  class="text-sm font-medium leading-5 text-gray-900 truncate"
-                                >
-                                  tom@example.com
-                                </p>
-                              </div>
+                          <MenuItems
+                            class="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
+                          >
+                            <div class="px-4 py-3">
+                              <p class="text-sm leading-5">Signed in as</p>
+                              <p
+                                class="text-sm font-medium leading-5 text-gray-900 truncate"
+                              >
+                                tom@example.com
+                              </p>
+                            </div>
 
-                              <div class="py-1">
-                                <MenuItem
-                                  as="a"
-                                  href="#account-settings"
-                                  class={resolveClass}
-                                >
-                                  Account settings
-                                </MenuItem>
-                                <MenuItem
-                                  as="a"
-                                  href="#support"
-                                  class={resolveClass}
-                                >
-                                  Support
-                                </MenuItem>
-                                <MenuItem
-                                  as="a"
-                                  disabled
-                                  href="#new-feature"
-                                  class={resolveClass}
-                                >
-                                  New feature (soon)
-                                </MenuItem>
-                                <MenuItem
-                                  as="a"
-                                  href="#license"
-                                  class={resolveClass}
-                                >
-                                  License
-                                </MenuItem>
-                              </div>
+                            <div class="py-1">
+                              <MenuItem
+                                as="a"
+                                href="#account-settings"
+                                class={resolveClass}
+                              >
+                                Account settings
+                              </MenuItem>
+                              <MenuItem
+                                as="a"
+                                href="#support"
+                                class={resolveClass}
+                              >
+                                Support
+                              </MenuItem>
+                              <MenuItem
+                                as="a"
+                                disabled
+                                href="#new-feature"
+                                class={resolveClass}
+                              >
+                                New feature (soon)
+                              </MenuItem>
+                              <MenuItem
+                                as="a"
+                                href="#license"
+                                class={resolveClass}
+                              >
+                                License
+                              </MenuItem>
+                            </div>
 
-                              <div class="py-1">
-                                <MenuItem
-                                  as="a"
-                                  href="#sign-out"
-                                  class={resolveClass}
-                                >
-                                  Sign out
-                                </MenuItem>
-                              </div>
-                            </MenuItems>
-                          </Portal>
-                        </TransitionChild>
+                            <div class="py-1">
+                              <MenuItem
+                                as="a"
+                                href="#sign-out"
+                                class={resolveClass}
+                              >
+                                Sign out
+                              </MenuItem>
+                            </div>
+                          </MenuItems>
+                        </TransitionRoot>
                       </Menu>
                     </div>
                   </div>