diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte index 13e9783bd..6797fa0a1 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte @@ -26,6 +26,10 @@ contextMenu?.show(e.clientX, e.clientY); } + function handleMinimize() { + settingsStore.set('dateStripCollapsed', true); + } + interface Props { isSidebarMode?: boolean; isToolbarExpanded?: boolean; @@ -248,6 +252,13 @@ class:toolbar-expanded={isToolbarExpanded} class:compact={settingsStore.dateStripCompact} > + + +
@@ -714,4 +725,47 @@ .date-strip-wrapper.compact .today-date { font-size: 0.625rem; } + + /* Minimize button */ + .minimize-btn { + position: absolute; + left: 0.5rem; + bottom: 34%; + transform: translateY(50%); + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: transparent; + border: none; + border-radius: 8px; + cursor: pointer; + color: hsl(var(--color-muted-foreground)); + pointer-events: auto; + transition: all 0.15s ease; + z-index: 10; + } + + .minimize-btn:hover { + background: hsl(var(--color-muted) / 0.8); + color: hsl(var(--color-foreground)); + } + + .minimize-btn:active { + transform: translateY(50%) scale(0.95); + } + + @media (max-width: 640px) { + .minimize-btn { + left: 0.25rem; + width: 32px; + height: 32px; + } + + .minimize-btn svg { + width: 18px; + height: 18px; + } + }