rails_modal_manager 1.0.30 → 1.0.31

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e13d9b84a14555c6f0542549afd2abb51c7157fb1f82422f6acb0fcb6d8d67a
-  data.tar.gz: 78343ad0786f8c180ae1684fbfd4aa26c9b27d75183c1166ead3937d6bf37bd4
+  metadata.gz: 2f31b5d2f94a210b09776bdba0fb0e28bbefe99ec017337304eecc7f1de43bc7
+  data.tar.gz: b948dd4e2969c0629893935ffd8b2fc42bf81d9012679a6eada70102acc6d153
 SHA512:
-  metadata.gz: 7e08e480474e11510b7635fb79cfe8b09cfd6d4ec1efd1019db05b73fdf1b3a430ded38593a15c0edbfb512ad3528193c9f86f81170e705175084a124202b934
-  data.tar.gz: adec02667f82766f9f2e5133fb39cb370a0a5211f558e45b38f66db521e70d7580f830638b12b68d5baeee42f1af2f0854bec6a4d55523227b466bd2fc104fcd
+  metadata.gz: 54971d4a854cb1098db23448e9edd3d3e6beaaea58076403cc148cb935a1820095b6efefe1452f7d836fb246325ed7d42362f1afef9cca361bedb12b6106474d
+  data.tar.gz: 4609e53d90aa011638b9d73201716dbe0b751ecefa570bc622802a928f5a64052c793757a8df8d3e4b479079e0ded821b91e12afd7c8ad401b8ba6119e39ddba

data/app/assets/stylesheets/rails_modal_manager.css

@@ -697,29 +697,32 @@
     visibility: visible;
   }
 
-  /* When modal is maximized on mobile, show collapsed sidebar with icons only */
+  /* When modal is maximized on mobile - icons state uses inline (takes space) */
   .rmm-modal.rmm-size-full .rmm-sidebar {
     position: relative;
     top: auto;
     transform: none;
   }
 
+  /* icons 상태 (collapsed) - 본문 공간 차지 (inline) */
   .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-collapsed {
     width: var(--rmm-sidebar-collapsed-width);
     min-width: var(--rmm-sidebar-collapsed-width);
   }
 
-  .rmm-modal.rmm-size-full .rmm-sidebar:not(.rmm-sidebar-collapsed) {
+  /* expanded 상태 - 오버레이 방식 (본문 위에 떠있음) */
+  .rmm-modal.rmm-size-full .rmm-sidebar:not(.rmm-sidebar-collapsed):not(.rmm-sidebar-hidden) {
+    position: absolute;
+    top: var(--rmm-header-height);
+    left: 0;
+    bottom: 0;
+    z-index: 10;
     width: var(--rmm-sidebar-width);
     min-width: var(--rmm-sidebar-width);
+    transform: translateX(0);
   }
 
-  /* Hide overlay for maximized modal since sidebar is inline */
-  .rmm-modal.rmm-size-full .rmm-sidebar-overlay {
-    display: none;
-  }
-
-  /* 모바일+최대화 상태에서 사이드바 완전 숨김 모드 */
+  /* hidden 상태 - 완전 숨김 */
   .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-hidden {
     width: 0;
     min-width: 0;
@@ -727,6 +730,13 @@
     overflow: hidden;
     border-right: none;
   }
+
+  /* hidden/collapsed 상태에서는 오버레이 숨김 */
+  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-hidden ~ .rmm-sidebar-overlay,
+  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-collapsed ~ .rmm-sidebar-overlay {
+    opacity: 0;
+    visibility: hidden;
+  }
 }
 
 /* ============================================

data/app/javascript/rails_modal_manager/controllers/rmm_sidebar_controller.js

@@ -58,10 +58,15 @@ export default class extends Controller {
     // Listen for toggle event from header button
     this.handleToggleEvent = () => this.toggle()
     this.element.addEventListener('rmm-sidebar:toggle', this.handleToggleEvent)
+
+    // Listen for closeOverlay event from mobile overlay
+    this.handleCloseOverlayEvent = () => this.closeOverlay()
+    this.element.addEventListener('rmm-sidebar:closeOverlay', this.handleCloseOverlayEvent)
   }
 
   disconnect() {
     this.element.removeEventListener('rmm-sidebar:toggle', this.handleToggleEvent)
+    this.element.removeEventListener('rmm-sidebar:closeOverlay', this.handleCloseOverlayEvent)
   }
 
   toggle() {
@@ -236,10 +241,14 @@ export default class extends Controller {
 
     // On mobile, close sidebar after selection
     if (window.innerWidth < 768) {
-      // 모바일+최대화 상태에서는 아이콘 상태로 전환
       if (this.isMobileMaximized()) {
-        this.sidebarModeValue = 'icons'
-        this.applySidebarMode()
+        // expanded 상태에서 클릭하면 hidden으로 전환
+        // icons 상태에서 클릭하면 icons 상태 유지
+        if (this.sidebarModeValue === 'expanded') {
+          this.sidebarModeValue = 'hidden'
+          this.applySidebarMode()
+        }
+        // icons 상태면 그대로 유지
       } else {
         this.collapsedValue = true
         this.element.classList.add('rmm-sidebar-collapsed')
@@ -338,9 +347,9 @@ export default class extends Controller {
 
   // Mobile overlay click
   closeOverlay() {
-    // 모바일+최대화 상태에서는 아이콘 상태로 전환
+    // 모바일+최대화 상태에서는 숨김 상태로 전환
     if (this.isMobileMaximized()) {
-      this.sidebarModeValue = 'icons'
+      this.sidebarModeValue = 'hidden'
       this.applySidebarMode()
     } else {
       this.collapsedValue = true

data/app/views/rails_modal_manager/_modal.html.erb

@@ -165,9 +165,9 @@
         items: sidebar_items,
         collapsed: sidebar_collapsed
       %>
-      <!-- Mobile overlay: closes sidebar when tapped (dispatches toggle event) -->
+      <!-- Mobile overlay: closes sidebar when tapped -->
       <div class="rmm-sidebar-overlay"
-           onclick="const sidebar = this.previousElementSibling; if(sidebar && sidebar.classList.contains('rmm-sidebar') && !sidebar.classList.contains('rmm-sidebar-collapsed')) { sidebar.dispatchEvent(new CustomEvent('rmm-sidebar:toggle', { bubbles: false })); }"></div>
+           onclick="const sidebar = this.previousElementSibling; if(!sidebar) return; const modal = sidebar.closest('.rmm-modal'); const isMobileMaximized = window.innerWidth <= 768 && modal && modal.classList.contains('rmm-size-full'); if(isMobileMaximized) { sidebar.classList.remove('rmm-sidebar-collapsed'); sidebar.classList.add('rmm-sidebar-hidden'); } else { sidebar.classList.add('rmm-sidebar-collapsed'); }"></div>
     <% end %>
 
     <div class="rmm-content-wrapper">

data/lib/rails_modal_manager/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsModalManager
-  VERSION = "1.0.30"
+  VERSION = "1.0.31"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_modal_manager
 version: !ruby/object:Gem::Version
-  version: 1.0.30
+  version: 1.0.31
 platform: ruby
 authors:
 - reshacs