feat(sidebar): Notion-style collapse/peek, desktop reopen button, Ctrl+\\ toggle
Stop collapsing the sidebar on navigation (was hiding the nav when opening Shared pages). Show the hamburger in the top-left on desktop when collapsed, add a left-edge hover zone that floats the sidebar in and auto-collapses on mouse leave, and bind Ctrl/Cmd+\\ to toggle it.
This commit is contained in:
@@ -166,6 +166,31 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Notion-style collapsed peek (hover the left edge) ── */
|
||||
.sidebar-peek-zone {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 8px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sidebar.peeking {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--sidebar-width);
|
||||
min-width: var(--sidebar-width);
|
||||
z-index: 1001;
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
|
||||
animation: fd-sidebar-peek-in .16s ease-out;
|
||||
}
|
||||
@keyframes fd-sidebar-peek-in {
|
||||
from { transform: translateX(-100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Workspace header — Notion style */
|
||||
.sidebar-workspace-header {
|
||||
display: flex;
|
||||
@@ -3530,6 +3555,12 @@ button.breadcrumb-current { max-width: 260px; }
|
||||
}
|
||||
.hamburger-btn:hover { background: var(--bg-hover); }
|
||||
|
||||
/* Show the hamburger on desktop only when the sidebar is collapsed,
|
||||
so it can be reopened from the top-left corner. */
|
||||
@media (min-width: 769px) {
|
||||
.hamburger-btn.hamburger-desktop-show { display: flex; }
|
||||
}
|
||||
|
||||
/* ── Mobile Sidebar Overlay ── */
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
@@ -3611,6 +3642,12 @@ button.breadcrumb-current { max-width: 260px; }
|
||||
}
|
||||
.sidebar-back-btn { display: flex; }
|
||||
.sidebar-uncollapse-btn { display: none !important; }
|
||||
.sidebar-peek-zone { display: none; }
|
||||
.sidebar.peeking {
|
||||
width: 85vw;
|
||||
max-width: 320px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ── Topbar ── */
|
||||
.topbar {
|
||||
|
||||
Reference in New Issue
Block a user