Fix Filter-menu

assets/css/src/_index.scss

@@ -1,19 +1,25 @@
 body[data-template="index"] {
   .filter-menu {
-    display: flex;
-    flex-wrap: wrap;
-    opacity: 1;
-    position: relative;
     font-size: var(--font-size-L);
-    pointer-events: all;
+    position: sticky;
-    column-gap: calc(2 * var(--body-margin));
+    opacity: 1;
-    margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
-    width: calc(var(--index-width) - var(--body-margin));
     line-height: normal;
+    pointer-events: all;
+    margin: 0 0 var(--line-height-S) 0;
+    width: calc(var(--index-width) - var(--body-margin));
+    top: 0;
+    padding-top: calc(var(--line-height-S) * 3);
+    z-index: 2;
 
     button.active {
       text-decoration: underline;
     }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: calc(2 * var(--body-margin));
+    }
   }
 
   .projects-index summary {

assets/css/src/_mobile.scss

@@ -67,26 +67,30 @@
   }
 
   body[data-template="index"] {
-    ul.filter-menu {
+    .filter-menu {
-      position: fixed;
+      padding-top: 0;
-      top: var(--slider-height);
-      width: 100%;
-
-      margin: 0;
-      padding-top: var(--line-height-S);
     }
 
     ul.projects-index {
       position: absolute;
-      top: var(--slider-height);
+      top: 0;
 
       box-sizing: border-box;
       width: calc(100vw - calc(var(--body-margin) * 2));
-      height: calc(100vh - var(--slider-height));
+      height: 100vh;
       overflow: auto;
 
       padding-right: 1.5rem;
-      padding-top: calc((var(--line-height-S) * 5));
+      padding-top: calc(var(--font-size-XL) + (var(--line-height-S) * 1));
+      padding-bottom: calc(var(--font-size-XL));
+    }
+
+    ul.projects-index:has(.selected) {
+      top: var(--slider-height);
+
+      height: calc(100vh - var(--slider-height));
+
+      padding-top: var(--line-height-S);
       padding-bottom: calc(var(--font-size-XL));
     }
 

assets/css/style.css

@@ -590,21 +590,26 @@ dialog#mobile-menu-content::backdrop {
 }
 
 body[data-template=index] .filter-menu {
-  display: flex;
-  flex-wrap: wrap;
-  opacity: 1;
-  position: relative;
   font-size: var(--font-size-L);
-  pointer-events: all;
+  position: sticky;
-  -moz-column-gap: calc(2 * var(--body-margin));
+  opacity: 1;
-       column-gap: calc(2 * var(--body-margin));
-  margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
-  width: calc(var(--index-width) - var(--body-margin));
   line-height: normal;
+  pointer-events: all;
+  margin: 0 0 var(--line-height-S) 0;
+  width: calc(var(--index-width) - var(--body-margin));
+  top: 0;
+  padding-top: calc(var(--line-height-S) * 3);
+  z-index: 2;
 }
 body[data-template=index] .filter-menu button.active {
   text-decoration: underline;
 }
+body[data-template=index] .filter-menu ul {
+  display: flex;
+  flex-wrap: wrap;
+  -moz-column-gap: calc(2 * var(--body-margin));
+       column-gap: calc(2 * var(--body-margin));
+}
 body[data-template=index] .projects-index summary {
   cursor: pointer;
 }
@@ -672,22 +677,24 @@ body[data-template=index] .projects-index li.filtered-out {
     top: var(--slider-height);
     padding-top: 0;
   }
-  body[data-template=index] ul.filter-menu {
+  body[data-template=index] .filter-menu {
-    position: fixed;
+    padding-top: 0;
-    top: var(--slider-height);
-    width: 100%;
-    margin: 0;
-    padding-top: var(--line-height-S);
   }
   body[data-template=index] ul.projects-index {
     position: absolute;
-    top: var(--slider-height);
+    top: 0;
     box-sizing: border-box;
     width: calc(100vw - var(--body-margin) * 2);
-    height: calc(100vh - var(--slider-height));
+    height: 100vh;
     overflow: auto;
     padding-right: 1.5rem;
-    padding-top: calc(var(--line-height-S) * 5);
+    padding-top: calc(var(--font-size-XL) + var(--line-height-S) * 1);
+    padding-bottom: calc(var(--font-size-XL));
+  }
+  body[data-template=index] ul.projects-index:has(.selected) {
+    top: var(--slider-height);
+    height: calc(100vh - var(--slider-height));
+    padding-top: var(--line-height-S);
     padding-bottom: calc(var(--font-size-XL));
   }
   body[data-template=index] .selected .fix:hover + .toggle {

assets/js/filter-menu.js

@@ -1,5 +1,5 @@
 const filterButtons = document.querySelectorAll(".filter-menu button");
-const projectItems = document.querySelectorAll(".projects-index li");
+const projectItems = document.querySelectorAll(".projects-index li.project");
 
 function applyFilter(filter) {
   filterButtons.forEach((b) => b.classList.remove("active"));
@@ -11,6 +11,7 @@ function applyFilter(filter) {
   if (btn) btn.classList.add("active");
   projectItems.forEach((item) => {
     item.classList.toggle("filtered-out", item.dataset.category !== filter);
+    item.classList.remove("selected", "unselected");
   });
 }
 
@@ -23,6 +24,8 @@ filterButtons.forEach((btn) => {
   });
 });
 
-window.addEventListener("routechange", () => applyFilter(Router.getParam("filter")));
+window.addEventListener("routechange", () =>
+  applyFilter(Router.getParam("filter")),
+);
 
 applyFilter(Router.getParam("filter"));

assets/js/project-toggle.js

@@ -1,4 +1,4 @@
-const allProjects = document.querySelectorAll(".projects-index li");
+const allProjects = document.querySelectorAll(".projects-index li.project");
 
 function selectProject(slug) {
   if (!slug) {

assets/js/router.js

@@ -2,6 +2,7 @@ const Router = {
   getParam(key) {
     return new URLSearchParams(window.location.search).get(key);
   },
+
   setParam(key, value) {
     const url = new URL(window.location);
     if (value != null) {

site/templates/index.php

@@ -1,16 +1,20 @@
 <?php snippet('header') ?>
 
-<ul class="filter-menu">
+
-    <?php foreach ($categories as $key => $category): ?>
-    <li>
-        <button data-filter="<?= Str::slug($category)  ?>"><?= $category ?></button>
-    </li>
-    <?php endforeach; ?>
-</ul>
 
 <ul class="projects-index">
+    <li class="filter-menu">
+    <ul>
+        <?php foreach ($categories as $key => $category): ?>
+        <li>
+            <button data-filter="<?= Str::slug($category)  ?>"><?= $category ?></button>
+        </li>
+        <?php endforeach; ?>
+    </ul>
+    </li>
+
     <?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
-        <li data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
+        <li class="project" data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
             <div class="fix">
                 <button class="project-toggler grid">
                         <span> <?= $project->shownTitle() ?> </span>