nuxtseo-layer-devtools 0.2.2 → 0.2.3

package/assets/css/global.css

@@ -216,7 +216,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .dark .glass {
-  background: oklch(9% 0.005 260 / 0.85);
+  background: oklch(9% 0.005 260 / 0.7);
 }
 
 /* Code block styling */
@@ -565,19 +565,29 @@ html.dark {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0.75rem;
   min-height: calc(100vh - 60px);
 }
 
+.devtools-main-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 0.75rem 1rem;
+}
+
 @media (min-width: 640px) {
-  .devtools-main {
-    padding: 1rem;
+  .devtools-main-content {
+    padding: 1rem 1.25rem;
   }
 }
 
 @media (max-height: 600px) {
   .devtools-main {
-    padding: 0;
     min-height: 0;
   }
+  .devtools-main-content {
+    padding: 0;
+  }
 }

package/components/DevtoolsLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref } from 'vue'
 import { colorMode } from '../composables/rpc'
 import { hasProductionUrl, isProductionMode, previewSource, productionUrl } from '../composables/state'
 
@@ -58,6 +59,15 @@ const productionHostname = computed(() => {
 })
 
 const isRouteNav = computed(() => navItems.some(item => item.to))
+
+const modeDropdownOpen = ref(false)
+const modeDropdownRef = ref<HTMLElement>()
+onClickOutside(modeDropdownRef, () => { modeDropdownOpen.value = false })
+
+function selectMode(mode: 'local' | 'production') {
+  previewSource.value = mode
+  modeDropdownOpen.value = false
+}
 </script>
 
 <template>
@@ -94,15 +104,8 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
               >
                 v{{ version }}
               </UBadge>
-              <UDropdownMenu
-                v-if="hasProductionUrl"
-                :items="[
-                  { label: 'Local', icon: 'carbon:laptop', onSelect: () => previewSource = 'local' },
-                  { label: 'Production', icon: 'carbon:cloud', hostname: productionHostname, onSelect: () => previewSource = 'production' },
-                ]"
-                :portal="false"
-              >
-                <button type="button" class="devtools-mode-btn">
+              <div v-if="hasProductionUrl" ref="modeDropdownRef" class="mode-dropdown-wrapper">
+                <button type="button" class="devtools-mode-btn" @click="modeDropdownOpen = !modeDropdownOpen">
                   <UIcon :name="isProductionMode ? 'carbon:cloud' : 'carbon:laptop'" class="w-3.5 h-3.5" />
                   <span class="hidden sm:inline">{{ isProductionMode ? 'Production' : 'Local' }}</span>
                   <template v-if="isProductionMode">
@@ -111,16 +114,25 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
                       {{ productionHostname }}
                     </span>
                   </template>
-                  <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50" />
+                  <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50 transition-transform" :class="modeDropdownOpen ? 'rotate-180' : ''" />
                 </button>
-                <template #item-label="{ item }">
-                  <span>{{ item.label }}</span>
-                  <span v-if="(item as any).hostname" class="devtools-production-badge text-[10px]">
-                    <span class="devtools-production-dot" />
-                    {{ (item as any).hostname }}
-                  </span>
-                </template>
-              </UDropdownMenu>
+                <Transition name="dropdown">
+                  <div v-if="modeDropdownOpen" class="mode-dropdown-menu">
+                    <button type="button" class="mode-dropdown-item" @click="selectMode('local')">
+                      <UIcon name="carbon:laptop" class="w-4 h-4" />
+                      <span>Local</span>
+                    </button>
+                    <button type="button" class="mode-dropdown-item" @click="selectMode('production')">
+                      <UIcon name="carbon:cloud" class="w-4 h-4" />
+                      <span>Production</span>
+                      <span class="devtools-production-badge text-[10px]">
+                        <span class="devtools-production-dot" />
+                        {{ productionHostname }}
+                      </span>
+                    </button>
+                  </div>
+                </Transition>
+              </div>
             </div>
           </div>
 
@@ -206,7 +218,7 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
 
       <!-- Main Content -->
       <div class="devtools-main">
-        <main class="mx-auto flex flex-col w-full max-w-7xl">
+        <main class="devtools-main-content">
           <DevtoolsLoading v-if="loading" />
           <div v-show="!loading">
             <slot />
@@ -216,3 +228,59 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
     </div>
   </UApp>
 </template>
+
+<style scoped>
+.mode-dropdown-wrapper {
+  position: relative;
+}
+
+.mode-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 180px;
+  padding: 4px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-elevated);
+  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.12);
+  z-index: 100;
+}
+
+.dark .mode-dropdown-menu {
+  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.4);
+}
+
+.mode-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 100ms, color 100ms;
+}
+
+.mode-dropdown-item:hover {
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+}
+
+.dropdown-enter-active {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.dropdown-leave-active {
+  transition: opacity 100ms ease, transform 100ms ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",