Update active page styles

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 {

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]" >
+          <li webc:for="singleton of collections.pages[lang]" >
-            <a :href="page.url" @text="page.data.title"></a>
+            <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]">
+          <li webc:for="catPage of category[1]">
-            <a :href="page.url" @text="page.data.title"></a>
+            <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>

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 type="module" webc:scoped></script>
-
-</script>