From 49c9b373d61c74245d9a88740e58ad514104c8ff Mon Sep 17 00:00:00 2001
From: Jean-Marie 'Histausse' Mineau <ty-webtempl-f76b@jean-marie.mineau.eu>
Date: Wed, 18 Mar 2026 22:34:12 +0100
Subject: [PATCH] add animations to nav-menu

---
 lib/nav_menu.typ | 47 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/lib/nav_menu.typ b/lib/nav_menu.typ
index 1bccf4c..0e93ae9 100644
--- a/lib/nav_menu.typ
+++ b/lib/nav_menu.typ
@@ -46,14 +46,29 @@
 ) = {
   ```raw-css
   body:has(#nav-menu-toggle:checked) #icon-nav-menu { display: none; }
-  body:has(#nav-menu-toggle:checked) #icon-nav-menu-close { display: block; }
-  body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu { display: block; }
+  body:has(#nav-menu-toggle:checked) #icon-nav-menu-close { display: flex; }
+  body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu { display: flex; }
   body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu-close { display: none; }
   #nav-menu-toggle-label {
     display: flex;
     justify-content: center;
     align-items: center;
 
+    &:has(input:focus-visible) icon-container {
+      outline: 2px solid var(--color-button-focus);
+    }
+    &:hover icon-container { 
+      box-shadow: inset 0px 0px 0.4em 0px var(--color-button-shadow);
+      cursor: pointer;
+    }
+
+    icon-container {
+      padding: 0.2em;
+      border-radius: 0.5em;
+      justify-content: center;
+      align-items: center;
+    }
+
     input {
       opacity: 0;
       position: absolute;
@@ -81,16 +96,40 @@
 #let nav-menu(body) = {
   ```raw-css
   body:has(#nav-menu-toggle:not(:checked)) nav-menu {
-    display: none;
+    /*display: none;*/
+    /* visibility: hidden + max-height: 0 ~= display: none
+    */
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
   }
   nav-menu {
-    display: block;
     border-top: solid 1px var(--color-border);
     border-bottom: solid 1px var(--color-border);
     text-align: center;
     font-size: 1.25em;
     padding-left: 2rem;
     padding-right: 2rem;
+    max-height: 100%;
+    visibility: visible;
+
+    @starting-style {
+      opacity: 0;
+      max-height: 0;
+    }
+
+    /* Uses visibility instead of diplay for animation because Firefox 
+     * preferes making slopeware instead of fixing this bug:
+     * https://bugzilla.mozilla.org/show_bug.cgi?id=1882408
+     */
+    transition:
+      opacity 0.5s ease-in,
+      /*display 0.5s,*/
+      visibility 0.5s,
+      max-height 0.5s ease-out;
+    transition-behavior: allow-discrete;
+
+
 
     ul {
       list-style: none;