starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-10-13 08:02:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: the revealed sidebar is a panel under the header, not a card over the page

Browse Source 
No rounded corners, no inset from the window: it starts at the header's bottom edge and
runs to the left and bottom edges, with one border down its right side and a shadow to
lift it off the page. A card floating in from nowhere read as a separate thing; this
reads as the sidebar the header sits on top of.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Guilhem Lemouel
2026-09-23 15:53:35 +02:00
co-authored by Claude Opus 5
parent d3345a81b3
commit 06d191eb82
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(root)/(logged)/+layout.svelte
+6 -9
View File
@@ -1151,15 +1151,16 @@
{/if}
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
<!-- Detached, the drawer is a floating card rather than a full-height panel, and it
starts right below the handle that opened it, wherever that handle sits. -->
<!-- Detached, the drawer starts at the header's bottom edge and runs to the left and
bottom edges of the window — a panel the header sits on top of, not a card
floating over the page. -->
<!-- Detached, this outside-click catcher starts where the card does rather than at
the top of the viewport: it would otherwise cover the header's toggle, whose
hover opened the card, and swallow the click meant to put the sidebar back. -->
<div
class={classNames(
'fixed left-0 right-0 bottom-0 flex z-40',
detachedFloating ? 'pl-1 pb-2' : 'top-0'
detachedFloating ? '' : 'top-0'
)}
style:top={detachedFloating ? `${navHandleSlot.cardTop}px` : undefined}
onclick={(e) => {
@@ -1181,12 +1182,8 @@
}}
class={classNames(
'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-300 transform',
detachedFloating ? 'rounded-lg border shadow-lg overflow-hidden' : '',
menuOpen
? 'translate-x-0'
: detachedFloating
? '-translate-x-[calc(100%+0.5rem)]'
: '-translate-x-full'
detachedFloating ? 'border-r shadow-lg overflow-hidden' : '',
menuOpen ? 'translate-x-0' : '-translate-x-full'
)}
>
<div