diff --git a/frontend/app.js b/frontend/app.js
index 086282c..21084c4 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -81,6 +81,9 @@ function noteApp() {
sidebarWidth: CONFIG.DEFAULT_SIDEBAR_WIDTH,
isResizing: false,
+ // Mobile sidebar state
+ mobileSidebarOpen: false,
+
// Split view resize state
editorWidth: 50, // percentage
isResizingSplit: false,
@@ -129,6 +132,9 @@ function noteApp() {
this.refreshDOMCache();
});
+ // Setup mobile view mode handler
+ this.setupMobileViewMode();
+
// Watch view mode changes and auto-save
this.$watch('viewMode', (newValue) => {
this.saveViewMode();
@@ -832,6 +838,9 @@ function noteApp() {
// Load a specific note
async loadNote(notePath, updateHistory = true, searchQuery = '') {
try {
+ // Close mobile sidebar when a note is selected
+ this.mobileSidebarOpen = false;
+
const response = await fetch(`/api/notes/${notePath}`);
// Check if note exists
@@ -2081,6 +2090,33 @@ function noteApp() {
document.addEventListener('mouseup', stopResize);
},
+ // Setup mobile view mode handler (auto-switch from split to edit on mobile)
+ setupMobileViewMode() {
+ const MOBILE_BREAKPOINT = 768; // Match CSS breakpoint
+ let previousWidth = window.innerWidth;
+
+ const handleResize = () => {
+ const currentWidth = window.innerWidth;
+ const wasMobile = previousWidth <= MOBILE_BREAKPOINT;
+ const isMobile = currentWidth <= MOBILE_BREAKPOINT;
+
+ // If switching from desktop to mobile and in split mode
+ if (!wasMobile && isMobile && this.viewMode === 'split') {
+ this.viewMode = 'edit';
+ }
+
+ previousWidth = currentWidth;
+ };
+
+ // Listen for window resize
+ window.addEventListener('resize', handleResize);
+
+ // Check initial state
+ if (window.innerWidth <= MOBILE_BREAKPOINT && this.viewMode === 'split') {
+ this.viewMode = 'edit';
+ }
+ },
+
// Load editor width from localStorage
loadEditorWidth() {
const saved = localStorage.getItem('editorWidth');
diff --git a/frontend/index.html b/frontend/index.html
index 63add0f..3e8260b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -568,15 +568,119 @@
.markdown-preview pre code.language-ps .hljs-operator {
color: #f472b6 !important; /* Pink for operators */
}
+
+ /* Mobile Responsive Styles */
+ @media (max-width: 768px) {
+ /* Hide sidebar by default on mobile */
+ .mobile-sidebar {
+ position: fixed;
+ left: -100%;
+ top: 0;
+ height: 100vh;
+ width: 80% !important;
+ max-width: 300px !important;
+ z-index: 1000;
+ transition: left 0.3s ease;
+ }
+
+ /* Show sidebar when open */
+ .mobile-sidebar-open {
+ left: 0;
+ }
+
+ /* Mobile overlay */
+ .mobile-overlay {
+ position: fixed;
+ inset: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+ display: none;
+ }
+
+ .mobile-overlay-visible {
+ display: block;
+ }
+
+ /* Hamburger button */
+ .mobile-menu-button {
+ display: flex !important;
+ }
+
+ /* Hide desktop resize handle on mobile */
+ .sidebar-resize-handle,
+ .resize-handle {
+ display: none;
+ }
+
+ /* Make editor take full width on mobile */
+ .mobile-editor {
+ width: 100% !important;
+ }
+
+ /* Stack view modes vertically on mobile */
+ .mobile-view-toggle {
+ flex-direction: column;
+ gap: 0.25rem;
+ }
+
+ /* Smaller buttons on mobile */
+ .mobile-toolbar button {
+ padding: 0.5rem;
+ font-size: 0.875rem;
+ }
+
+ /* Smaller text input on mobile */
+ .mobile-toolbar input {
+ min-width: 100px !important;
+ max-width: 200px !important;
+ font-size: 1rem !important;
+ }
+
+ /* Hide split view on mobile (not enough space) */
+ .mobile-hide-split {
+ display: none !important;
+ }
+
+ /* Make toolbar wrap on very small screens */
+ .mobile-toolbar {
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ }
+
+ /* Larger touch targets */
+ .note-item,
+ .folder-item {
+ padding: 0.75rem !important;
+ min-height: 44px;
+ }
+ }
+
+ /* Hide mobile menu button on desktop */
+ @media (min-width: 769px) {
+ .mobile-menu-button {
+ display: none !important;
+ }
+ }
+
+
+