---
import { navLinks } from '../../data/nav-links';
---

<nav>
	<ul>
		{
			navLinks.map((link) => (
				<li>
					<a href={`/${link.path}`}>{link.label}</a>
				</li>
			))
		}
	</ul>
</nav>

<style lang="scss">
	@use '../../styles/variables.scss' as *;

	ul {
		display: flex;
		flex-direction: row;
		list-style: none;
		gap: 10px;
		font-size: 1.15rem;
		font-weight: 600;
		align-items: center;

		& a {
			color: var(--text);
			padding: 5px 10px;
		}
	}

	@media screen and (max-width: $max-mobile-width) {
		nav {
			display: none;
		}
	}
</style>