suroh/alex.portfolio
1
0
Fork 0
Code Actions

Update active page styles

Browse Source
This commit is contained in:
suroh 2025-02-09 17:08:42 +01:00
parent c10df3fa2c
commit 0063505229
3 changed files with 16 additions and 10 deletions
src
assets/styles
main.css
layouts
base.webc
components
alx-nav.webc

6
src/assets/styles/main.css

@ -53,6 +53,12 @@ nav {
ul li {
padding-block: 0.125em;
padding-inline: var(--menu-padding);
&:has(.active) {
background: light-dark(var(--neutral-900), var(--neutral-100));
color: light-dark(var(--neutral-100), var(--neutral-900));
}
}
.controls {

15
src/layouts/base.webc

@ -28,10 +28,12 @@
<a :href="'/' + lang + '/'">Home</a>
</li>
<li webc:for="category of collections.categories[lang]" >
<a :href="category[0].url" @text="category[0].data.title"></a>
<span class="active" webc:if="category[0].url === page.url" @text="category[0].data.title"></span>
<a webc:else :href="category[0].url" @text="category[0].data.title"></a>
</li>
<li webc:for="page of collections.pages[lang]" >
<a :href="page.url" @text="page.data.title"></a>
<li webc:for="singleton of collections.pages[lang]" >
<span class="active" webc:if="singleton.url === page.url" @text="singleton.data.title"></span>
<a :href="singleton.url" @text="singleton.data.title"></a>
</li>
</ul>
</alx-nav>
@ -41,13 +43,14 @@
class="subNav"
:data-test=""
:@active-nav="page.url.split('/')[2] === category[0].data.category"
:class="page.url.split('/')[1] === category[0].data.category ? '' : 'hidden'"
:class="page.url.split('/')[2] === category[0].data.category ? '' : 'hidden'"
:style="(page.url.split('/').filter(n => n)[page.url.split('/').filter(n => n).length - 1] === category[0].data.category) ?
`view-transition-name: --${category[0].data.category}-nav` : ''
">
<ul>
<li webc:for="page of category[1]">
<a :href="page.url" @text="page.data.title"></a>
<li webc:for="catPage of category[1]">
<span class="active" webc:if="catPage.url === page.url" @text="catPage.data.title"></span>
<a webc:else :href="catPage.url" @text="catPage.data.title"></a>
</li>
</ul>
</alx-nav>

5
src/layouts/components/alx-nav.webc

@ -37,7 +37,6 @@
.content {
display: flex;
flex-direction: column;
padding: var(--menu-padding);
width: calc(var(--nav-width));
}
@ -87,6 +86,4 @@ ul {
}
</style>
<script type="module" webc:scoped>
</script>
<script type="module" webc:scoped></script>