Wrap menu dialog and menu into one div

microbit-foundation · Dec 20, 2023 · c6baffd · c6baffd
1 parent c795c3d
commit c6baffd
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 59 deletions.
diff --git a/src/components/control-bar/control-bar-items/HelpMenu.svelte b/src/components/control-bar/control-bar-items/HelpMenu.svelte
@@ -45,41 +45,43 @@
   };
 </script>
 
-<AboutDialog
-  isOpen={isAboutDialogOpen}
-  onClose={() => {
-    isAboutDialogOpen = false;
-  }} />
-<div class="relative inline-block">
-  <button
-    use:menu.button
-    on:select={onSelect}
-    class="inline-flex rounded-full text-xl p-2">
-    <HelpIcon />
-  </button>
-  <MenuTransition show={$menu.expanded}>
-    <MenuItems {menu}>
-      <div class="py-2">
-        <MenuItem {menu} value="help-and-support">
-          <ExternalLinkIcon />
-          {$t('helpMenu.helpAndSupport')}
-        </MenuItem>
-      </div>
-      <div class="py-2">
-        <MenuItem {menu} value="terms-of-use">
-          <ExternalLinkIcon />
-          {$t('helpMenu.termsOfUse')}
-        </MenuItem>
-        <MenuItem {menu} value="cookies">
-          <CookiesIcon />
-          {$t('helpMenu.cookies')}
-        </MenuItem>
-      </div>
-      <div class="py-2">
-        <MenuItem {menu} value="about">
-          <InfoIcon />
-          {$t('helpMenu.about')}
-        </MenuItem>
-      </div>
-    </MenuItems></MenuTransition>
+<div>
+  <AboutDialog
+    isOpen={isAboutDialogOpen}
+    onClose={() => {
+      isAboutDialogOpen = false;
+    }} />
+  <div class="relative inline-block">
+    <button
+      use:menu.button
+      on:select={onSelect}
+      class="inline-flex rounded-full text-xl p-2">
+      <HelpIcon />
+    </button>
+    <MenuTransition show={$menu.expanded}>
+      <MenuItems {menu}>
+        <div class="py-2">
+          <MenuItem {menu} value="help-and-support">
+            <ExternalLinkIcon />
+            {$t('helpMenu.helpAndSupport')}
+          </MenuItem>
+        </div>
+        <div class="py-2">
+          <MenuItem {menu} value="terms-of-use">
+            <ExternalLinkIcon />
+            {$t('helpMenu.termsOfUse')}
+          </MenuItem>
+          <MenuItem {menu} value="cookies">
+            <CookiesIcon />
+            {$t('helpMenu.cookies')}
+          </MenuItem>
+        </div>
+        <div class="py-2">
+          <MenuItem {menu} value="about">
+            <InfoIcon />
+            {$t('helpMenu.about')}
+          </MenuItem>
+        </div>
+      </MenuItems></MenuTransition>
+  </div>
 </div>
diff --git a/src/components/control-bar/control-bar-items/SettingsMenu.svelte b/src/components/control-bar/control-bar-items/SettingsMenu.svelte
@@ -22,26 +22,28 @@
   };
 </script>
 
-<LanguageDialog
-  isOpen={isLanguageDialogOpen}
-  onClose={() => {
-    isLanguageDialogOpen = false;
-  }} />
-<div class="relative inline-block">
-  <button
-    use:menu.button
-    on:select={onSelect}
-    class="inline-flex rounded-full text-xl p-2">
-    <SettingsIcon />
-  </button>
-  <MenuTransition show={$menu.expanded}>
-    <MenuItems {menu}>
-      <div class="py-2">
-        <MenuItem {menu} value="settings">
-          <GlobeIcon />
-          {$t('languageDialog.title')}
-        </MenuItem>
-      </div>
-    </MenuItems>
-  </MenuTransition>
+<div>
+  <LanguageDialog
+    isOpen={isLanguageDialogOpen}
+    onClose={() => {
+      isLanguageDialogOpen = false;
+    }} />
+  <div class="relative inline-block">
+    <button
+      use:menu.button
+      on:select={onSelect}
+      class="inline-flex rounded-full text-xl p-2">
+      <SettingsIcon />
+    </button>
+    <MenuTransition show={$menu.expanded}>
+      <MenuItems {menu}>
+        <div class="py-2">
+          <MenuItem {menu} value="settings">
+            <GlobeIcon />
+            {$t('languageDialog.title')}
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </MenuTransition>
+  </div>
 </div>