swaf/src/assets/views/components/NavMenuItem.svelte

<script>
    import Icon from "../utils/Icon.svelte";
    import Form from "../utils/Form.svelte";

    export let href;
    export let icon;
    export let text;
    export let action = false;
</script>

<style lang="scss">
	@import "../../scss/helpers";

	li {
		display: flex;
		flex-direction: row;
		align-items: center;

		line-height: 1;

		@include medium-le {
			&:not(:first-child) {
				margin-top: 8px;
			}
		}

		@include large-ge {
            &:not(:first-child) {
				margin-left: 8px;
            }
		}

		a {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: auto;
			padding: 8px;

			border-radius: 3px;

			&:hover {
				background-color: rgba(0, 0, 0, 0.07);

				@include darkMode {
					background-color: rgba(255, 255, 255, 0.07);
				}
			}

			text-transform: uppercase;
		}

		:global(form) {
			width: 100%;

			:global(button) {
				display: flex;
				width: 100%;
				margin: 0;
				padding: 8px;
			}
		}

		:global(.icon) {
			--icon-size: 16px;
			margin-right: 8px;
		}
	}
</style>

<li>
    {#if action}
        <Form action={href} submitIcon={icon} submitText={text}/>
    {:else}
        <a href={href}>
            <Icon name={icon}/>
            <span class="tip">{text}</span></a>
    {/if}
</li>