Added sidebar stickiness, icon clicking #155
Conversation
src/lib/SideBar.svelte
Outdated
| 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.
I think timeouts are numerical ids, so we should initialize this with 0
src/lib/SideBar.svelte
Outdated
| function showInfo(info) { | ||
| activeInfo = info; | ||
| clearTimeout(hideTimeout); // Cancel timeout |
There was a problem hiding this comment.
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
src/lib/SideBar.svelte
Outdated
| 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.
Let's keep all the logic in functions above
src/lib/SideBar.svelte
Outdated
| function hideInfo() { | ||
| activeInfo = null; | ||
| hideTimeout = setTimeout(() => { | ||
| if (!isPanelHovered) { |
There was a problem hiding this comment.
How can this happen? We call clearTimeout when setting isPanelHovered to true
There was a problem hiding this comment.
I'm not very sure what you meant by this, but when we leave the panel, isPanelHovered is set to false. After the timeout got called and is over, the rest of variables get set to null and 0 which says that there is no hovering over the panel
There was a problem hiding this comment.
isPanelHovered can only be false here. When set to true we also call clearTimeout, so the code will never run in the first place.
| } | ||
| function handleClick(icon) { | ||
| if (activeInfo === icon.info) { | ||
| activeInfo = null; |
There was a problem hiding this comment.
Can you clarify if the indented UX here is to close a panel by clicking on it even if hovering?
There was a problem hiding this comment.
The intention with this is that when we hover over the panel/icon and click on a icon, the panel closes. The reason behind this was to be able to immediately go to the command line instead of moving the mouse from the panel and waiting that small moment to wait for timeout to be over before you're able to see/type. It felt move efficient. Please let me know if you want to keep it or be changed
src/lib/SideBar.svelte
Outdated
| /> | ||
| {: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.
Use tailwind CSS classes instead of a custom style
src/lib/SideBar.svelte
Outdated
| function hideInfo() { | ||
| activeInfo = null; | ||
| hideTimeout = setTimeout(() => { | ||
| if (!isPanelHovered) { |
There was a problem hiding this comment.
isPanelHovered can only be false here. When set to true we also call clearTimeout, so the code will never run in the first place.
No description provided.