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

make popup label instant for collapsed menu

Browse Source
This commit is contained in:
Ruben Fiszel
2023-11-04 17:33:43 +01:00
parent f772224271
commit a44b4d7ec8
1 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/sidebar/MenuLink.svelte
+53 -47
View File
@@ -3,6 +3,7 @@
import { navigating, page } from '$app/stores'
import Icon from 'svelte-awesome'
import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
import Popover from '../Popover.svelte'
export let label: string
export let href: string
@@ -23,52 +24,57 @@
</script>
{#if !disabled}
<a
{href}
class={classNames(
'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
isSelected ? 'bg-frost-700 hover:bg-[#30404e]' : 'hover:bg-[#34363c]',
'hover:transition-all',
$$props.class
)}
target={href.includes('http') ? '_blank' : null}
title={label}
>
{#if icon}
<svelte:component
this={icon}
size={16}
class={classNames(
'flex-shrink-0',
isSelected
? 'text-frost-200 group-hover:text-white'
: 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{:else if faIcon}
<Icon
data={faIcon}
class={classNames(
'flex-shrink-0',
isSelected ? 'text-white' : 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{/if}
<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
<a
{href}
class={classNames(
'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
isSelected ? 'bg-frost-700 hover:bg-[#30404e]' : 'hover:bg-[#34363c]',
'hover:transition-all',
$$props.class
)}
target={href.includes('http') ? '_blank' : null}
title={isCollapsed ? undefined : label}
>
{#if icon}
<svelte:component
this={icon}
size={16}
class={classNames(
'flex-shrink-0',
isSelected
? 'text-frost-200 group-hover:text-white'
: 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{:else if faIcon}
<Icon
data={faIcon}
class={classNames(
'flex-shrink-0',
isSelected ? 'text-white' : 'text-gray-100 group-hover:text-white',
'transition-all'
)}
/>
{/if}
{#if !isCollapsed}
<span
class={classNames(
'whitespace-pre truncate',
isSelected
? 'text-blue-100 group-hover:text-white font-semibold'
: 'text-gray-100 group-hover:text-white',
'transition-all duration-75'
)}
>
{label}
</span>
{/if}
</a>
{#if !isCollapsed}
<span
class={classNames(
'whitespace-pre truncate',
isSelected
? 'text-blue-100 group-hover:text-white font-semibold'
: 'text-gray-100 group-hover:text-white',
'transition-all duration-75'
)}
>
{label}
</span>
{/if}
</a>
<svelte:fragment slot="text">
{label}
</svelte:fragment>
</Popover>
{/if}