@plutocms/pluto 0.2.1 → 0.3.1

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
 
+## [0.3.1](https://github.com/plutocms/pluto/compare/v0.3.0...v0.3.1) (2026-09-09)
+
+
+### Bug Fixes
+
+* **navbar:** render registered admin navbar ([#121](https://github.com/plutocms/pluto/issues/121)) ([0fa66dd](https://github.com/plutocms/pluto/commit/0fa66dde70acc7e8f8fb2a5685d9971ae0eba303))
+
+## [0.3.0](https://github.com/plutocms/pluto/compare/v0.2.1...v0.3.0) (2026-09-09)
+
+
+### Features
+
+* make admin shell responsive ([#119](https://github.com/plutocms/pluto/issues/119)) ([5a4808d](https://github.com/plutocms/pluto/commit/5a4808de34e1a3796c496a8fad093290a8f7fb90))
+
 ## [0.2.1](https://github.com/plutocms/pluto/compare/v0.2.0...v0.2.1) (2026-09-08)
 
 

package/FEATURES.md

@@ -0,0 +1,7 @@
+# Features
+
+This file lists every implemented feature of this project. Each entry links to a skill file
+with full detail, so this file stays short.
+
+See the workspace-level `CLAUDE.md` (one directory up) for the delegation, writing, and git
+policies shared by every project here.

package/README.md

@@ -63,12 +63,16 @@ Pluto CMS is built around **layers**, each responsible for a specific concern.
 
 The core layer provides the foundation for your CMS:
 
-- `<PlutoRoot>`: Wraps your entire app (used in `app.vue`). Includes `NuxtLayout`, `NuxtLoadingIndicator`, and base styles.
+- `<PlutoRoot>`: Wraps your entire app (used in `app.vue`). Includes the registered admin navbar, `NuxtLayout`, `NuxtLoadingIndicator`, and base styles.
 - `<ColorModeButton>`: Light/dark mode toggle with zero configuration.
 - Built-in auth and admin layouts
 - `<PlutoNavbarAdmin>` and `<PlutoNavbarAdminActions>`
   Provide structure for injecting actions from other layers
 
+Backend layers can provide the complete admin navbar with
+`useNavbarAdmin().registerNavbar(component)`. Feature layers can append controls
+with `useNavbarAdminActions().addAction(component)`.
+
 ### Backend layers
 
 Backend layers handle data, authentication, and APIs.

package/app/assets/css/tailwind.css

@@ -2,11 +2,10 @@
 @import '@nuxt/ui';
 
 @source '../..';
-@source '../../../../../app/**';
 
 @theme {
-  --color-admin-content: var(--color-slate-800);
-  --color-admin-sidebar: var(--color-slate-900);
+  --color-admin-content: var(--color-zinc-800);
+  --color-admin-sidebar: var(--color-zinc-900);
 
   --font-outfit: 'Outfit', sans-serif;
 }

package/app/components/AdminView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <UContainer class="flex max-w-300 flex-col gap-y-8 py-10">
+  <UContainer
+    class="flex max-w-300 flex-col gap-y-6 px-4 py-6 sm:px-6 lg:gap-y-8 lg:px-8 lg:py-10"
+  >
     <slot />
   </UContainer>
 </template>

package/app/components/Pluto/Navbar/PlutoNavbarAdmin.vue

@@ -2,7 +2,7 @@
 
 <template>
   <nav
-    class="light:bg-white light:border-black/10 font-outfit sticky top-0 z-50 h-10 shrink-0 border-b dark:border-white/5 dark:bg-black dark:text-white"
+    class="light:bg-white light:border-black/10 font-outfit sticky top-0 z-50 h-14 shrink-0 border-b lg:h-10 dark:border-white/5 dark:bg-black dark:text-white"
   >
     <slot />
   </nav>

package/app/components/Pluto/PlutoRoot.vue

@@ -1,14 +1,20 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { navbar } = useNavbarAdmin()
+</script>
 
 <template>
-  <div class="grow">
-    <UApp>
+  <div class="flex min-h-0 min-w-0 w-full grow flex-col">
+    <UApp class="flex min-h-0 min-w-0 w-full grow flex-col">
       <NuxtRouteAnnouncer />
       <NuxtLoadingIndicator />
 
-      <NuxtLayout>
-        <slot />
-      </NuxtLayout>
+      <component :is="navbar" v-if="navbar" />
+
+      <div class="min-h-0 min-w-0 w-full grow">
+        <NuxtLayout>
+          <slot />
+        </NuxtLayout>
+      </div>
     </UApp>
   </div>
 </template>

package/app/components/modal/Modal.vue

@@ -35,9 +35,9 @@ const resolvedClasses = computed(() => {
   const defaultClasses = `
       group
       relative
-      w-234 h-fit
+      w-234 max-w-[calc(100vw-1rem)] h-fit
       rounded-lg
-      my-4 mx-4
+      my-2 mx-2 sm:my-4 sm:mx-4
       shadow-2xl
       bg-default
       light:text-zinc-800 dark:text-white
@@ -68,7 +68,7 @@ const resolvedOverlayClasses = computed(() => {
       fixed
       left-0 top-0
       z-51
-      h-screen w-screen
+      h-dvh w-screen
       bg-black/90
     `
 
@@ -109,14 +109,14 @@ function closeModal() {
           :class="resolvedOverlayClasses"
           @click="props.preventClickOutside === false ? closeModal() : null"
         >
-          <div ref="scrollRef" class="h-full overflow-y-scroll py-4">
+          <div ref="scrollRef" class="h-full overflow-y-auto py-2 sm:py-4">
             <div class="flex min-h-full items-center justify-center">
               <div
                 :class="twMerge(['modal-content my-auto', resolvedClasses])"
                 :style="{
                   width:
                     !props.size && props.customSize
-                      ? `${props.customSize}px`
+                      ? `min(${props.customSize}px, calc(100vw - 1rem))`
                       : '',
                 }"
                 v-bind="$attrs"

package/app/components/modal/ModalContent.vue

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge'
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 py-1">
+  <div class="flex flex-col gap-5 py-1 sm:gap-8">
     <div
       v-if="$slots.header"
       :class="twMerge(['bg-opacity-90 sticky z-50 backdrop-blur-md'])"
@@ -12,7 +12,7 @@ import { twMerge } from 'tailwind-merge'
       <slot name="header" />
     </div>
 
-    <div class="px-4 pt-6">
+    <div class="px-3 pt-4 sm:px-4 sm:pt-6">
       <slot />
     </div>
   </div>

package/app/components/modal/ModalFooter.vue

@@ -52,7 +52,10 @@ const resolvedClasses = computed(() => {
       "
     />
 
-    <div :class="resolvedAlign" class="flex py-4">
+    <div
+      :class="resolvedAlign"
+      class="flex flex-wrap gap-2 px-3 py-3 sm:px-4 sm:py-4"
+    >
       <slot />
     </div>
   </div>

package/app/components/modal/ModalHeader.vue

@@ -45,8 +45,12 @@ function closeModal() {
       class="bg-default absolute top-0 left-0 z-[-1] h-full w-full rounded-t-lg backdrop-blur-md"
     />
 
-    <div class="flex items-start justify-between py-4">
-      <h2 :class="twMerge(['text-3xl leading-10 font-medium'])">
+    <div class="flex items-start justify-between gap-3 py-3 sm:py-4">
+      <h2
+        :class="
+          twMerge(['text-2xl leading-8 font-medium sm:text-3xl sm:leading-10'])
+        "
+      >
         <slot />
       </h2>
 

package/app/layouts/admin.vue

@@ -7,6 +7,12 @@ import type { NavigationMenuItem } from '@nuxt/ui'
 type SidebarMenuItem = Omit<NavigationMenuItem, 'to'>
 
 const { actions: sidebarActions } = useSidebarAdminActions()
+const route = useRoute()
+const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
+
+function closeSidebar() {
+  isSidebarOpen.value = false
+}
 
 const menu = shallowRef<SidebarMenuItem[]>([
   {
@@ -21,18 +27,44 @@ const menu = shallowRef<SidebarMenuItem[]>([
     icon: 'lucide:settings',
   },
 ])
+
+watch(
+  () => route.fullPath,
+  closeSidebar
+)
 </script>
 
 <template>
   <div
-    class="dark:bg-admin-content light:bg-white font-outfit flex h-full grow flex-col"
+    class="dark:bg-admin-content light:bg-white font-outfit flex h-full min-h-0 grow flex-col overflow-hidden"
   >
-    <NavbarAdmin />
+    <div class="relative flex min-h-0 flex-1 items-stretch">
+      <Transition name="sidebar-fade">
+        <button
+          v-if="isSidebarOpen"
+          type="button"
+          aria-label="Close navigation"
+          class="fixed inset-x-0 top-14 bottom-0 z-40 bg-black/50 backdrop-blur-xs lg:hidden"
+          @click="closeSidebar"
+        />
+      </Transition>
 
-    <div class="flex h-full items-stretch">
-      <div
-        class="dark:bg-admin-sidebar light:bg-zinc-100 w-64 shrink-0 px-4 py-4"
+      <aside
+        :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full'"
+        class="dark:bg-admin-sidebar light:bg-zinc-100 border-default fixed inset-y-14 left-0 z-50 flex w-[min(18rem,85vw)] shrink-0 flex-col border-r px-3 py-4 shadow-2xl transition-transform duration-200 lg:static lg:inset-auto lg:z-auto lg:w-64 lg:translate-x-0 lg:shadow-none"
       >
+        <div class="mb-3 flex items-center justify-between px-2 lg:hidden">
+          <span class="text-muted text-sm font-semibold">Navigation</span>
+          <UButton
+            icon="lucide:x"
+            color="neutral"
+            variant="ghost"
+            aria-label="Close navigation"
+            square
+            @click="closeSidebar"
+          />
+        </div>
+
         <UNavigationMenu
           :items="menu"
           :ui="{
@@ -42,11 +74,23 @@ const menu = shallowRef<SidebarMenuItem[]>([
           class="data-[orientation=vertical]:w-full"
           highlight
         />
-      </div>
+      </aside>
 
-      <div class="grow overflow-hidden">
+      <div class="min-w-0 grow overflow-x-hidden overflow-y-auto">
         <slot />
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.sidebar-fade-enter-active,
+.sidebar-fade-leave-active {
+  transition: opacity 200ms ease;
+}
+
+.sidebar-fade-enter-from,
+.sidebar-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/layouts/auth.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="bg-admin-content font-outfit flex h-full grow flex-col">
+  <div class="bg-admin-content font-outfit flex min-h-dvh grow flex-col">
     <slot />
   </div>
 </template>

package/app/pages/admin/home.vue

@@ -7,9 +7,9 @@ useHead({
 <template>
   <main>
     <AdminView>
-      <h1 class="text-4xl font-bold">Admin Dashboard</h1>
+      <h1 class="text-3xl font-bold lg:text-4xl">Admin Dashboard</h1>
 
-      <div class="grid grid-cols-3 gap-x-4 gap-y-6">
+      <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-x-4 lg:gap-y-6">
         <div
           v-for="i in 6"
           :key="i"

package/nuxt.config.ts

@@ -1,5 +1,3 @@
-import tailwindcss from '@tailwindcss/vite'
-
 const websiteName = process.env.WEBSITE_NAME || 'Untitled'
 
 // Point PLUTO_UTILS_PATH at a local checkout (e.g. `../utils`) to test
@@ -67,10 +65,6 @@ export default defineNuxtConfig({
 
   compatibilityDate: '2025-08-15',
 
-  vite: {
-    plugins: [tailwindcss()],
-  },
-
   typescript: {
     includeWorkspace: true,
     typeCheck: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "The layerable CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "vue-demi"
   ],
   "dependencies": {
-    "@plutocms/utils": "^0.1.0",
+    "@plutocms/utils": "^0.2.1",
     "@vueuse/nuxt": "^14.3.0"
   },
   "devDependencies": {