DutchEllie
/
svelte-testing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more easily visible navbar

This commit is contained in:
DutchEllie 2022-07-02 18:19:16 +02:00
parent a7099ee6cc
commit df67f55ad9
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/navbutton.svelte
View File

@ -1,15 +1,26 @@
<script>
import {page} from '$app/stores';
export let link = '';
export let text = '';
</script>
<a href="{link}">
<button class="text-slate-50 py-2 px-4 font-montserrat font-light link-underline">
<button class="{$page.url.pathname == link ? "active-now" : ""} text-violet-50 py-2 px-4 font-montserrat font-light link-underline">
{text}
</button>
</a>
<style>
.active-now:before {
content: '';
position: absolute;
width: 100%;
transform: scaleX(1);
height: 2px;
bottom: 0;
left: 0;
background-color: #638CF6;
}
.link-underline {
display: inline-block;
position: relative;