Skip to content

Commit e5efe4a

Browse files
ThisIs-DeveloperThisIs-Developer
committed
feat(ui): replace mobile menu with sliding sidebar
1 parent c3140a7 commit e5efe4a

6 files changed

Lines changed: 424 additions & 638 deletions

File tree

‎desktop-app/resources/index.html‎

Lines changed: 25 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -143,41 +143,38 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
143143
<i class="lucide lucide-menu"></i>
144144
</button>
145145

146-
<div id="mobile-menu-panel" class="mobile-menu-panel" role="dialog" aria-modal="true" aria-labelledby="mobile-menu-title" aria-hidden="true">
146+
<div id="mobile-menu-panel" class="mobile-menu-panel" role="dialog" aria-modal="true" aria-labelledby="mobile-menu-title" aria-hidden="true" tabindex="-1" inert>
147147
<div class="mobile-menu-header">
148148
<h2 id="mobile-menu-title" class="h5 m-0">Menu</h2>
149-
<button id="close-mobile-menu" class="tool-button" aria-label="Close menu">
149+
<button id="close-mobile-menu" class="tool-button" type="button" aria-label="Close menu">
150150
<i class="lucide lucide-x"></i>
151151
</button>
152152
</div>
153153

154-
<!-- Mobile Document Tabs Section -->
155-
<div class="mobile-tabs-section">
156-
<div class="mobile-tabs-header">
157-
<span class="mobile-tabs-label"><i class="lucide lucide-files me-1" aria-hidden="true"></i> Open documents</span>
158-
</div>
159-
<div id="mobile-tab-list" class="mobile-tab-list" role="tablist" aria-label="Document tabs">
160-
<!-- Dynamically populated by JavaScript -->
154+
<div class="mobile-menu-scroll">
155+
<div class="mobile-menu-overview">
156+
<div class="mobile-view-mode-group" role="group" aria-label="View mode">
157+
<button class="mobile-view-mode-btn" data-mode="editor" aria-pressed="false" title="Edit Markdown">
158+
<i class="lucide lucide-square-pen" aria-hidden="true"></i>
159+
<span>Edit</span>
160+
</button>
161+
<button class="mobile-view-mode-btn active" data-mode="split" aria-pressed="true" title="Split editor and live preview">
162+
<i class="lucide lucide-columns-2" aria-hidden="true"></i>
163+
<span>Split</span>
164+
</button>
165+
<button class="mobile-view-mode-btn" data-mode="preview" aria-pressed="false" title="Markdown preview only">
166+
<i class="lucide lucide-eye" aria-hidden="true"></i>
167+
<span>Preview</span>
168+
</button>
169+
</div>
170+
<div id="mobile-stats-container" class="mobile-stats-container" aria-label="Document statistics">
171+
<div class="stat-item"><i class="lucide lucide-clock-3" aria-hidden="true"></i><span id="mobile-reading-time">0</span><span id="mobile-lbl-min-read">Min Read</span></div>
172+
<div class="stat-item"><i class="lucide lucide-pilcrow" aria-hidden="true"></i><span id="mobile-word-count">0</span><span id="mobile-lbl-words">Words</span></div>
173+
<div class="stat-item"><i class="lucide lucide-case-sensitive" aria-hidden="true"></i><span id="mobile-char-count">0</span><span id="mobile-lbl-chars">Chars</span></div>
174+
</div>
161175
</div>
162-
</div>
163-
164-
<!-- Story 1.4: Mobile View Mode Buttons -->
165-
<div class="mobile-view-mode-group" role="group" aria-label="View mode">
166-
<button class="mobile-view-mode-btn" data-mode="editor" aria-pressed="false" title="Markdown editor only">
167-
<i class="lucide lucide-square-pen"></i>
168-
<span>Editor</span>
169-
</button>
170-
<button class="mobile-view-mode-btn active" data-mode="split" aria-pressed="true" title="Split editor and live preview">
171-
<i class="lucide lucide-columns-2"></i>
172-
<span>Split</span>
173-
</button>
174-
<button class="mobile-view-mode-btn" data-mode="preview" aria-pressed="false" title="Markdown preview only">
175-
<i class="lucide lucide-eye"></i>
176-
<span>Preview</span>
177-
</button>
178-
</div>
179176

180-
<div class="mobile-menu-items">
177+
<nav class="mobile-menu-items" aria-label="Application menu">
181178
<div class="mobile-menu-accordion" data-mobile-menu-accordion>
182179
<section class="mobile-menu-section">
183180
<button class="mobile-menu-section-toggle" type="button" aria-expanded="false" aria-controls="mobile-menu-new-panel" data-mobile-menu-section-toggle>
@@ -238,16 +235,6 @@ <h2 id="mobile-menu-title" class="h5 m-0">Menu</h2>
238235
<span><i class="lucide lucide-settings" aria-hidden="true"></i>Settings</span><i class="lucide lucide-chevron-down mobile-menu-section-chevron" aria-hidden="true"></i>
239236
</button>
240237
<div id="mobile-menu-settings-panel" class="mobile-menu-section-panel" data-mobile-menu-section hidden>
241-
<button id="mobile-toggle-sync" class="mobile-menu-item tool-button sync-enabled sync-active" title="Toggle Sync Scrolling">
242-
<i class="lucide lucide-refresh-cw" aria-hidden="true"></i> Sync Off
243-
</button>
244-
<button id="mobile-copy-markdown" class="mobile-menu-item" title="Copy Markdown">
245-
<i class="lucide lucide-copy" aria-hidden="true"></i> Copy Markdown
246-
</button>
247-
<button id="mobile-review-toggle" class="mobile-menu-item" type="button" title="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
248-
<span><i class="lucide lucide-message-square-text" aria-hidden="true"></i>Review</span>
249-
<span id="mobile-review-count-badge" class="mobile-review-count-badge" aria-hidden="true" hidden>0</span>
250-
</button>
251238
<div class="mobile-menu-language dropdown w-100">
252239
<button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
253240
<i class="lucide lucide-languages" aria-hidden="true"></i> Language: <span id="mobile-current-lang-label">English</span>
@@ -281,6 +268,7 @@ <h2 id="mobile-menu-title" class="h5 m-0">Menu</h2>
281268
</div>
282269
</section>
283270
</div>
271+
</nav>
284272
</div>
285273
</div>
286274

@@ -1342,11 +1330,6 @@ <h3 id="review-composer-title">Add feedback</h3>
13421330
<i class="lucide lucide-case-sensitive me-1" aria-hidden="true"></i><span id="char-count">0</span> <span id="lbl-chars">Chars</span>
13431331
</div>
13441332
</div>
1345-
<div id="mobile-stats-container" class="mobile-stats-container" aria-label="Document statistics">
1346-
<div class="stat-item"><i class="lucide lucide-clock-3" aria-hidden="true"></i><span id="mobile-reading-time">0</span><span id="mobile-lbl-min-read">Min Read</span></div>
1347-
<div class="stat-item"><i class="lucide lucide-pilcrow" aria-hidden="true"></i><span id="mobile-word-count">0</span><span id="mobile-lbl-words">Words</span></div>
1348-
<div class="stat-item"><i class="lucide lucide-case-sensitive" aria-hidden="true"></i><span id="mobile-char-count">0</span><span id="mobile-lbl-chars">Chars</span></div>
1349-
</div>
13501333
<div id="save-status" class="app-save-status is-saved" data-state="saved" role="status" aria-live="polite" aria-atomic="true">
13511334
<i id="save-status-icon" class="lucide lucide-check" aria-hidden="true"></i>
13521335
<span id="save-status-text">All changes saved</span>

0 commit comments

Comments
 (0)