66 lines
1.3 KiB
Text
66 lines
1.3 KiB
Text
---
|
|
const links = [
|
|
{ href: '/', text: 'Home' },
|
|
{ href: '/blog', text: 'Blog' },
|
|
{ href: '/portafolio', text: 'Portafolio' },
|
|
{ href: '/curriculum', text: 'Curriculum' },
|
|
{ href: '/contact', text: 'Contact' },
|
|
];
|
|
|
|
// TODO: Fix so the "active" class can come from the server so it doesnt flicker
|
|
---
|
|
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
|
<ul class="list-unstyle hstack">
|
|
{
|
|
links.map((link) => (
|
|
<li class="nav-item">
|
|
<a class="nav-link" href={link.href}>
|
|
{link.text}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
|
|
<script>
|
|
// Add active class to the current link
|
|
const link = document.querySelector(`a[href='${location.pathname}']`);
|
|
|
|
if (link) {
|
|
link.classList.add("active");
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
nav {
|
|
width: fit-content;
|
|
}
|
|
|
|
li > a {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
a {
|
|
--boder-color: transparent;
|
|
color: var(--prj-link-text);
|
|
border: 1px solid var(--boder-color);
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
|
|
transition: background-color 200ms, color 200ms;
|
|
}
|
|
|
|
a.active {
|
|
border: 1px solid var(--prj-accent-bg);
|
|
}
|
|
|
|
a:hover {
|
|
--border-color: var(--prj-accent-bg);
|
|
background-color: var(--prj-accent-bg);
|
|
color: var(--prj-accent-text);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
</style>
|