generateur_v3/frontend/src/components/NavLink.svelte

<script>
    import { page } from '$app/stores';
    export let href = "/";
    export let exact = false;
    export let no_hover = false;
</script>

<a href={href} class:no_hover class:selected={exact ? $page.url.pathname === href: $page.url.pathname.includes(href)}><slot/></a>

<style lang="scss">
    a {
		cursor: pointer;
		margin: 0 10px;
		color: $primary-dark;
		text-decoration: none;
		position: relative;
		font-weight: 600;
		transition: color 0.3s;
		font-size: 16px;
		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 2px;
			background: currentColor;
			bottom: 5px;
			left: 0;
			pointer-events: none;
			transform-origin: 100% 50%;
			transform: scale3d(0, 1, 1);
			transition: transform 0.3s;
		}
		&:hover {
			color: $primary;
			transform: scale(1.05);
			&:not(.no_hover)::before {
				transform-origin: 0% 50%;
				transform: scale3d(1, 1, 1);
			}
		}
	}
	.selected {
		font-weight: bolder;
		color: $primary;
		transform: scale(1.05);
		&::before {
			content: none;
		}
	}
</style>