windmill/frontend/src/lib/components/sidebar/MenuLink.svelte

<script lang="ts">
	import { classNames } from '$lib/utils'
	import { navigating, page } from '$app/stores'
	import Popover from '../Popover.svelte'

	export let label: string
	export let href: string
	export let icon: any | undefined = undefined
	export let isCollapsed: boolean
	export let disabled: boolean = false
	export let lightMode: boolean = false

	let isSelected = false

	navigating.subscribe(() => {
		if (href === '/') {
			isSelected = $page.url.pathname === href
		} else {
			isSelected = $page.url.pathname.includes(href)
		}
	})
</script>

{#if !disabled}
	<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
					? lightMode
						? 'bg-surface-selected hover:bg-surface-hover rounded-none'
						: 'bg-frost-700 hover:bg-[#30404e]'
					: lightMode
					? 'hover:bg-surface-hover rounded-none'
					: 'hover:bg-[#2A3648]',

				'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
							? lightMode
								? 'text-primary group-hover:text-secondary'
								: 'text-frost-200 group-hover:text-white'
							: lightMode
							? 'text-primary group-hover:text-secondary'
							: 'text-gray-100 group-hover:text-white',
						'transition-all'
					)}
				/>
			{/if}

			{#if !isCollapsed}
				<span
					class={classNames(
						'whitespace-pre truncate',
						isSelected
							? lightMode
								? 'text-primary group-hover:text-secondary'
								: 'text-frost-200 group-hover:text-white'
							: lightMode
							? 'text-primary group-hover:text-secondary'
							: 'text-gray-100 group-hover:text-white',
						'transition-all duration-75'
					)}
				>
					{label}
				</span>
			{/if}
		</a>
		<svelte:fragment slot="text">
			{label}
		</svelte:fragment>
	</Popover>
{/if}