markmental/eternalibre-notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added toggle for the Folder nav and moved Save Note to the 'File ->' menu

Browse source
This commit is contained in:
mrkmntal 2026-10-05 15:55:34 -04:00
commit 306c3c1e6e
4 changed files with 205 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

7
static/app.js
View file

@ -18,6 +18,9 @@ function app() {
// the highlight follows the pointer instead of accumulating on every item
// the cursor sweeps across.
_dropTarget: null,
// Whether the folder navigation is collapsed. Shared between the mobile
// pull-tab button and the View menu toggle so they stay in sync.
folderNavCollapsed: false,
init() {
// Close menus on any click outside the menu bar. Alpine's `.outside`
@ -258,6 +261,10 @@ function app() {
this.editorVisible = !this.editorVisible;
},
toggleFolderNav() {
this.folderNavCollapsed = !this.folderNavCollapsed;
},
focusEditor() {
const editor = document.getElementById('editor');
if (editor) editor.focus();

59
static/style.css
View file

@ -505,14 +505,7 @@ button, input, select, textarea {
Needs its own background because it now overlays the scrolling note items.
The z-index is scoped to the sidebar and safe under the stacking-context
rule in AGENTS.md §7: no menu dropdowns live in here to trap. */
.folder-nav {
list-style: none;
margin: 0;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
border-bottom: 1px solid var(--ui-border);
.folder-nav-container {
position: sticky;
top: 0;
z-index: 2;
@ -523,6 +516,52 @@ button, input, select, textarea {
flex-shrink: 0;
}
.folder-nav {
list-style: none;
margin: 0;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
border-bottom: 1px solid var(--ui-border);
}
/* Pull-tab toggle — hidden on desktop, shown on mobile */
.folder-nav-toggle {
display: none;
width: 100%;
min-height: 44px;
align-items: center;
justify-content: center;
background: var(--app-bg);
border: none;
border-bottom: 1px solid var(--ui-border);
color: var(--app-fg);
opacity: 0.6;
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.15s ease;
}
.folder-nav-toggle:hover {
opacity: 0.8;
}
.folder-nav-toggle-icon {
font-size: 18px;
line-height: 1;
transition: transform 0.15s ease;
}
/* Collapsed state — hides the folder list but keeps the toggle visible */
.folder-nav-container.collapsed .folder-nav {
display: none;
}
.folder-nav-container.collapsed .folder-nav-toggle-icon {
transform: rotate(180deg);
}
.nav-item a {
display: flex;
align-items: center;
@ -1327,6 +1366,10 @@ button, input, select, textarea {
min-height: 44px;
}
.folder-nav-toggle {
display: flex;
}
.folder-nav {
padding: 8px;
}