@plutocms/core 0.39.2 → 0.40.0

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
 
+## [0.40.0](https://github.com/plutocms/pluto/compare/v0.39.2...v0.40.0) (2026-10-31)
+
+
+### Features
+
+* **admin:** navbar menus in the bar color, palette overlay class, nav children with enabled ([#310](https://github.com/plutocms/pluto/issues/310)) ([cec92ac](https://github.com/plutocms/pluto/commit/cec92ac7061fdb8a209d832344328fae8838f826))
+
 ## [0.39.2](https://github.com/plutocms/pluto/compare/v0.39.1...v0.39.2) (2026-10-31)
 
 

package/app/assets/css/pluto-layer.css

@@ -69,12 +69,15 @@
 }
 
 /*
- * The overlay of the admin search (Cmd/Ctrl+K) is darker than the Nuxt UI
- * default and blurs the page under it. The overlay is the sibling just before
- * the modal content, which carries `pluto-admin-search` (app/layouts/admin.vue).
- * Other modals keep the Nuxt UI overlay.
+ * The overlay of a palette (the admin search, Cmd/Ctrl+K, and the palettes of
+ * the layers, such as the block palette) is darker than the Nuxt UI default and
+ * blurs the page under it. The overlay is the sibling just before the modal
+ * content. The content carries `pluto-admin-search` (app/layouts/admin.vue) or
+ * `pluto-palette`: a layer sets `:ui="{ content: 'pluto-palette' }"` on the
+ * `UModal` of its palette. Other modals keep the Nuxt UI overlay.
  */
-:root[data-pluto-admin] [data-slot='overlay']:has(+ .pluto-admin-search) {
+:root[data-pluto-admin]
+  [data-slot='overlay']:has(+ :is(.pluto-admin-search, .pluto-palette)) {
   background-color: oklch(13% 0.03 273 / 0.6);
   backdrop-filter: blur(6px);
 }

package/app/components/Pluto/Admin/PlutoAdminUserMenu.vue

@@ -135,7 +135,11 @@ const portalTarget = usePlutoAdminPortal()
   <div class="h-full">
     <UDropdownMenu
       :items="items"
-      :ui="{ content: 'w-64' }"
+      :content="{ sideOffset: 2 }"
+      :ui="{
+        content: 'w-64 bg-(--pluto-admin-navbar)',
+        arrow: 'fill-(--pluto-admin-navbar)',
+      }"
       :modal="false"
       :portal="portalTarget ?? true"
       :arrow="{ width: 14, height: 7 }"

package/app/components/Pluto/Content/PlutoContentBarActions.vue

@@ -214,10 +214,13 @@ const editButton = computed(() => {
     <UDropdownMenu
       :open="menuOpen"
       :items="newMenuItems"
-      :content="{ align: 'start', onCloseAutoFocus }"
+      :content="{ align: 'start', sideOffset: 2, onCloseAutoFocus }"
       :modal="false"
       :portal="portalTarget ?? true"
-      :ui="{ content: 'min-w-48' }"
+      :ui="{
+        content: 'min-w-48 bg-(--pluto-admin-navbar)',
+        arrow: 'fill-(--pluto-admin-navbar)',
+      }"
       :arrow="{ width: 14, height: 7 }"
       @update:open="onUpdateOpen"
     >

package/app/composables/pluto-admin-nav.ts

@@ -57,14 +57,23 @@ export function usePlutoAdminNav() {
 
   const items = computed<PlutoNavItem[]>(() => {
     const registered = registry.nav.list.value
-    const resolveLabels = (item: PlutoNavItem): PlutoNavItem => ({
-      ...item,
-      label: tx(item.label),
-      children: item.children?.map((child) => ({
-        ...child,
-        label: tx(child.label),
-      })),
-    })
+    // A child with `enabled` shows only when the test passes (for example a
+    // child for admins only). An item with its own `to` and one visible child
+    // stays a plain link, like Settings with one page.
+    const resolveLabels = (item: PlutoNavItem): PlutoNavItem => {
+      const children = item.children
+        ?.filter((child) => child.enabled?.() ?? true)
+        .map((child) => ({
+          ...child,
+          label: tx(child.label),
+        }))
+      return {
+        ...item,
+        label: tx(item.label),
+        children:
+          item.to && children && children.length < 2 ? undefined : children,
+      }
+    }
 
     const isVisible = (type: PlutoContentType): boolean =>
       !type.capabilities?.read || can(type.capabilities.read)

package/app/composables/pluto-admin-portal.ts

@@ -8,12 +8,17 @@
  * The composable makes the element itself. A target that Vue renders can
  * appear after the portal looks for it. Pass `portalTarget ?? true` to the
  * `portal` prop of `UDropdownMenu`.
+ *
+ * The menus look like the bar: the target also carries `data-pluto-admin-dark`
+ * (the dark tokens in both color modes), and a menu sets the bar color
+ * (`bg-(--pluto-admin-navbar)`, also on its arrow) and `sideOffset: 2`.
  */
 export function usePlutoAdminPortal() {
   const portalTarget = shallowRef<HTMLElement>()
   onMounted(() => {
     const el = document.createElement('div')
     el.setAttribute('data-pluto-admin-scope', '')
+    el.setAttribute('data-pluto-admin-dark', '')
     document.body.append(el)
     portalTarget.value = el
   })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/core",
   "type": "module",
-  "version": "0.39.2",
+  "version": "0.40.0",
   "description": "The base layer every Pluto app extends: the admin, the content model, and the GitHub CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",

package/shared/types/registry.ts

@@ -59,6 +59,8 @@ export interface PlutoNavChild {
   newTo?: string
   /** The text of that "+" (`New <type>`). */
   newLabel?: string
+  /** Reactive visibility test, like `PlutoEntry.enabled`. A child without it shows. */
+  enabled?: () => boolean
 }
 
 export interface PlutoNavItem extends PlutoEntry {