-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added sidebar stickiness, icon clicking #155
base: main
Are you sure you want to change the base?
Conversation
let activeInfo = null; // Tracks currently visible info | ||
let lastHoveredInfo = null; // Tracks last hovered info | ||
let isPanelHovered = false; // Tracks if info panel is hovered | ||
let hideTimeout = null; // Timeout for hiding info panel |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think timeouts are numerical ids, so we should initialize this with 0
function showInfo(info) { | ||
activeInfo = info; | ||
clearTimeout(hideTimeout); // Cancel timeout |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should reset hideTimeout to 0 to avoid clearing it multiple times. It might be also sensible to add an if(hideTimeout) before, unless we are sure the timeout is active
class="flex flex-col gap-5 shrink-0 w-80 h-full z-10 p-2 bg-neutral-600 text-gray-100 opacity-95" | ||
class:hidden={!activeInfo} | ||
on:mouseover={() => { | ||
isPanelHovered = true; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's keep all the logic in functions above
function hideInfo() { | ||
activeInfo = null; | ||
hideTimeout = setTimeout(() => { | ||
if (!isPanelHovered) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How can this happen? We call clearTimeout when setting isPanelHovered to true
} | ||
function handleClick(icon) { | ||
if (activeInfo === icon.info) { | ||
activeInfo = null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you clarify if the indented UX here is to close a panel by clicking on it even if hovering?
/> | ||
{:else} | ||
<div class="grow" on:mouseover={(e) => showInfo(null)}></div> | ||
<div class="grow" style="pointer-events: none;"></div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use tailwind CSS classes instead of a custom style
No description provided.