feat: implement off-canvas editor sidebar with enhanced UX

- Transform fixed sidebar into off-canvas overlay design
  - Sidebar slides in from right side with smooth animations
  - Main editor now takes full width for better content focus
  - Sidebar available in both normal and fullscreen modes

- Add intuitive sidebar controls and navigation
  - Toggle button integrated into editor tabs (after Preview)
  - Sticky header with close button for easy access
  - Overlay backdrop and ESC key support for closing
  - Consistent positioning across normal and fullscreen modes

- Implement keyboard shortcuts for improved workflow
  - Ctrl/Cmd+Shift+S: Toggle sidebar visibility
  - Ctrl/Cmd+S: Smart save with status-aware logic
  - ESC: Close sidebar when open

- Enhance save functionality with intelligent behavior
  - Auto-detects content state (new vs existing)
  - Preserves published status for existing content
  - Validates title and slug before saving
  - Provides color-coded notifications for user feedback
  - Prevents duplicate slug creation with warnings

- Improve scroll and focus management
  - Body scroll locked when sidebar open
  - Independent sidebar scrolling
  - Auto-focus first input when sidebar opens
  - Prevents background interaction on mobile

- Add responsive design optimizations
  - Full-width sidebar on mobile devices
  - Proper z-index stacking for fullscreen compatibility
  - Touch-friendly button sizing and spacing

This update significantly improves the editing experience by keeping
users focused on content while providing easy access to all publishing
options without scrolling away from the editor.

Author: LebCit

core/admin/static/css/admin.css

@@ -407,7 +407,7 @@ select:focus {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
+    z-index: 10000;
     justify-content: center;
     align-items: center;
 }

core/admin/static/css/editor.css

@@ -3,6 +3,11 @@
  * Extension of admin.css for the content editor interface
  */
 
+/* Prevent body scroll when sidebar is open */
+body.editor-sidebar-open {
+    overflow: hidden;
+}
+
 /* Editor Container */
 .editor-container {
     padding: 2rem;
@@ -31,14 +36,10 @@
     gap: 2rem;
 }
 
+/* Main editor takes full width */
 .editor-main {
-    flex: 1;
-    min-width: 0; /* Fix for flexbox content overflow */
-}
-
-.editor-sidebar {
-    width: 300px;
-    flex-shrink: 0;
+    width: 100%;
+    max-width: none;
 }
 
 /* Main Editor Area */
@@ -143,6 +144,31 @@
     position: relative;
 }
 
+/* Sidebar toggle button in tabs */
+.editor-sidebar-toggle-btn {
+    background-color: transparent;
+    border: none;
+    padding: 6px 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    color: #495057;
+}
+
+.editor-sidebar-toggle-btn:hover {
+    background-color: rgba(229, 231, 235, 0.5);
+    color: #0066cc;
+}
+
+.editor-sidebar-toggle-btn.active {
+    background-color: #0066cc;
+    color: white;
+}
+
 .view-toggle-btn {
     background-color: transparent;
     border: none;
@@ -277,23 +303,85 @@
     margin: 10px 0;
 }
 
+/* Transform existing sidebar into off-canvas */
+.editor-sidebar {
+    position: fixed;
+    top: 0;
+    right: -320px; /* Hidden by default */
+    width: 320px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+    z-index: 10000;
+    transition: right 0.3s ease;
+    overflow-y: auto;
+    border-left: 1px solid #e0e0e0;
+    padding: 0;
+}
+
+.editor-sidebar.open {
+    right: 0;
+}
+
+/* Sidebar sticky header with close button */
+.editor-sidebar-header {
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f8f9fa;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #e0e0e0;
+    z-index: 10;
+}
+
+.editor-sidebar-header h3 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: #333;
+}
+
+.editor-sidebar-close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #666;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    font-size: 1rem;
+}
+
+.editor-sidebar-close-btn:hover {
+    background-color: #e9ecef;
+    color: #333;
+}
+
 /* Sidebar Sections */
 .sidebar-section {
     background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    margin-bottom: 1.5rem;
+    margin-bottom: 0;
     padding: 1.5rem;
+    border-bottom: 1px solid #bfbfbf;
 }
 
 .sidebar-section h3 {
-    border-bottom: 1px solid #eee;
     font-size: 1.1rem;
     margin-top: 0;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
 }
 
+.editor-sidebar .sidebar-section:last-child {
+    border-bottom: none;
+    padding-bottom: 2rem;
+}
+
 /* Help Text */
 .help-text {
     color: #6c757d;
@@ -307,15 +395,18 @@
 }
 
 /* Responsive Adjustments */
+@media (min-width: 1400px) {
+    .editor-sidebar {
+        width: 380px;
+        right: -380px;
+    }
+}
+
 @media (max-width: 992px) {
     .editor-body {
         flex-direction: column;
     }
 
-    .editor-sidebar {
-        width: 100%;
-    }
-
     .md-content-container.side-by-side {
         grid-template-columns: 1fr;
     }
@@ -340,6 +431,16 @@
         border-right: none;
         padding-right: 0;
     }
+
+    .editor-sidebar {
+        width: 100%;
+        right: -100%;
+    }
+
+    .editor-sidebar-toggle-btn {
+        font-size: 0.9rem;
+        padding: 5px 10px;
+    }
 }
 
 /* Error State for Form Validation */
@@ -432,6 +533,7 @@
     padding: 2rem;
     font-size: 1.1rem;
     line-height: 1.7;
+    max-height: 100%;
 }
 
 .md-fullscreen-mode .md-preview {
@@ -1081,3 +1183,22 @@ input[type="datetime-local"] {
     font-family: monospace;
     font-size: 0.9em;
 }
+
+/* Overlay */
+.editor-sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.editor-sidebar-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}

core/admin/static/js/editor/editor.js

@@ -252,4 +252,15 @@ document.addEventListener("DOMContentLoaded", function () {
             })
         }
     }
+
+    document.addEventListener("keydown", (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+            e.preventDefault()
+
+            // Use the ContentService method if available
+            if (window.contentService) {
+                window.contentService.handleKeyboardSave()
+            }
+        }
+    })
 })