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

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

<style lang="scss">
    a {
		cursor: pointer;
		margin: 0 10px;
		color: yellow;
		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;
			top: 100%;
			left: 0;
			pointer-events: none;
			transform-origin: 100% 50%;
			transform: scale3d(0, 1, 1);
			transition: transform 0.3s;
		}
		&:hover {
			color: red;
			transform: scale(1.05);
			&::before {
				transform-origin: 0% 50%;
				transform: scale3d(1, 1, 1);
			}
		}
	}
	.selected {
		font-weight: bolder;
		color: red;
		transform: scale(1.05);
		&::before {
			content: none;
		}
	}
</style>