navigation: animate side nav hiding as progressive enhancement

WebEngineering-FHNW · Dec 14, 2024 · 3879440 · 3879440
1 parent 1ba3cb5
commit 3879440
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/docs/css/kolibri-base.css b/docs/css/kolibri-base.css
@@ -188,12 +188,20 @@ label + span > input:invalid + span.invalidation_marker {
       }
  }
 
-
+/* --- standard values --- */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms ;
   }
 }
+:root {
+    /*
+        Needed to animate e.g. from height:0 to height:auto.
+        Works in Chrome but does not work in FF, Safari yet (dec.24).
+    */
+    interpolate-size: allow-keywords; /* progressive enhancement*/
+}
+/* --- end of standard values --- */
 
 /* --- a11y support: the "skip" link --- */
 

diff --git a/docs/src/kolibri/navigation/projector/simple/simpleNavigationProjector.js b/docs/src/kolibri/navigation/projector/simple/simpleNavigationProjector.js
@@ -83,6 +83,7 @@ const projectorStyle = `
     <style data-style-id="${PAGE_CLASS}">    
         @layer navigationLayer {
             .${PAGE_CLASS} {
+                overflow-x: clip;
                 &.hide {                 
                     .toggler {                    
                         rotate:         0deg;
@@ -98,7 +99,7 @@ const projectorStyle = `
                     width:              2rem;
                     aspect-ratio:       1 / 1;
                     rotate:             180deg;
-                    transition:         rotate .3s ease-in-out;
+                    transition:         rotate .3s ease-in-out .1s; /* delayed and shorter than the width transition */
                 }
                 svg {
                     fill:               none;
@@ -107,11 +108,16 @@ const projectorStyle = `
                     stroke-linejoin:    round;
                 }
                 a {
+                    width:              auto;
                     color:              revert;
                     pointer-events:     revert;
                     user-select:        none;
                     text-wrap:          nowrap;
                     font-family:        system-ui;
+                    transition-property:        width;
+                    transition-duration:        .5s;
+                    transition-timing-function: ease-out;
+                    transition-behavior:        allow-discrete; /* progressive enhancement*/
                 }
                 a.visited {
                     text-decoration:    none;