diff --git a/packages/devtools/client/components/OpenGraphMissingTabs.vue b/packages/devtools/client/components/OpenGraphMissingTabs.vue
index d14a1190f..bc39ad01b 100644
--- a/packages/devtools/client/components/OpenGraphMissingTabs.vue
+++ b/packages/devtools/client/components/OpenGraphMissingTabs.vue
@@ -95,7 +95,6 @@ const selectedTab = ref(tabs[0])
{{ item.name }}
-
{{ item.description }}
diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
index 507b0c8de..91071f373 100644
--- a/packages/devtools/client/components/SideNav.vue
+++ b/packages/devtools/client/components/SideNav.vue
@@ -4,12 +4,21 @@ const categories = useCategorizedTabs()
const show = ref(false)
const panel = ref()
+const button = ref()
-onClickOutside(panel, () => {
- show.value = false
-}, {
- detectIframe: true,
-})
+function toggle() {
+ show.value = !show.value
+}
+
+onClickOutside(
+ panel,
+ (e) => {
+ if (e.target === button.value)
+ return
+ show.value = false
+ },
+ { detectIframe: true },
+)
@@ -20,13 +29,14 @@ onClickOutside(panel, () => {
:distance="20"
:triggers="[]"
:shown="show"
- :auto-hide="false"
+ :auto-hide="true"
>
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index 32a2ab429..3537ab9c0 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -57,15 +57,13 @@ function refreshAssets() {}
-
-
-
+ />
diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue
index a253cfc85..a3be86c67 100644
--- a/packages/devtools/client/pages/modules/components.vue
+++ b/packages/devtools/client/pages/modules/components.vue
@@ -35,22 +35,20 @@ function toggleView() {
:is="view === 'list' ? ComponentsList : ComponentsGraph"
:components="components"
>
-
-
-
-
+
-
-
+ />
diff --git a/packages/devtools/client/pages/modules/open-graph.vue b/packages/devtools/client/pages/modules/open-graph.vue
index b4d6fcf3f..a9e23e121 100644
--- a/packages/devtools/client/pages/modules/open-graph.vue
+++ b/packages/devtools/client/pages/modules/open-graph.vue
@@ -102,26 +102,28 @@ until(router).toBeTruthy().then((v) => {
/>
-
-
-
+
+
-
-
-
+
+
-
-
+ />