alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(website): add html components imports to build script

Browse source
This commit is contained in:
Alexander Navarro 2024-12-24 10:50:57 -03:00
parent 698294c74e
commit e9db7de13c
3 changed files with 32 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

93
packages/website/templates/partials/navbar.html
View file

@ -1,93 +0,0 @@
<div id="main-navbar" class="pt-1">
<nav class="navbar navbar-desktop msp-d-none msp-d-lg-block msp-container">
<ul class="msp-list-unstyle msp-hstack">
<li class="nav-item">
<a class="nav-link" href={link.href}>{link.text}</a>
</li>
</ul>
</nav>
<div class="msp-text-end msp-d-lg-none">
<OffCanvasBtn />
<OffCanvas>
<nav class="navbar navbar-mobile">
<ul class="list-unstyle text-start">
<li class="nav-item mb-3">
<a class="nav-link" href={link.href}>{link.text}</a>
</li>
</ul>
</nav>
</OffCanvas>
</div>
</div>
<script>
const setActiveLink = () => {
const links =
document.querySelectorAll < HTMLAnchorElement > (`#main-navbar a`);
links.forEach((link) => {
if (link.pathname === '/' && location.pathname === '/') {
link.classList.add('active');
return;
}
if (link.pathname === '/' && location.pathname !== '/') {
link.classList.remove('active');
return;
}
location.pathname.startsWith(link.pathname) ?
link.classList.add('active') :
link.classList.remove('active');
});
};
// Add active class to the current link
document.addEventListener('astro:page-load', setActiveLink, {
once: true
});
document.addEventListener('astro:after-swap', setActiveLink);
</script>
<style lang="scss">
nav {
width: 100%;
}
.navbar-desktop ul {
width: fit-content;
margin-left: auto;
.nav-item {
margin-bottom: 0;
}
}
ul {
padding: 0;
}
li>a {
padding: 0.25rem 0.5rem;
}
a {
--boder-color: transparent;
border: 1px solid transparent;
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>