@plutocms/pluto 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
 
+## [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/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/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,46 @@ 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-dvh min-h-0 grow flex-col overflow-hidden"
   >
     <NavbarAdmin />
 
-    <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"
+    <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>
+
+      <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 +76,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "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.0",
     "@vueuse/nuxt": "^14.3.0"
   },
   "devDependencies": {