[PATCH yew-widget-toolkit-assets 1/2] nav: add classes for animated navigation drawer menus

[Dominik Csapak <d.csapak@proxmox.com>]

to animate expanding/collapsing of menus in navigation drawers, we have
to add some classes. Since we also want to be able to enable/disable
animation, use a css variable for the transition that is set
accordingly.

The only broadly compatible CSS way to animate the height of something
where the height is unknown ("auto"), is by using a grid layout and
using a '1fr' row template for it.

("auto" height is not animatable, and calc-size only exists in chrome
for now)

The markup has to be changed in the rust code for this to work.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_nav.scss | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 08102d4..48cda9a 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -157,6 +157,36 @@
         text-shadow: none !important;
         color: var(--pwt-color);
     }
+
+    --pwt-transition-time: 0s;
+
+    &.animated {
+        --pwt-transition-time: 0.1s;
+    }
+
+    .pwt-nav-menu-item-arrow {
+        transition: var(--pwt-transition-time);
+        &.expanded {
+            --dir: -180deg;
+            transform: rotateZ(var(--dir));
+        }
+
+        [dir="rtl"] &.expanded {
+          --dir: 180deg;
+        }
+    }
+
+    .pwt-nav-menu-animation-container {
+        transition: var(--pwt-transition-time);
+        overflow: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+        min-height: fit-content;
+
+        &.expanded {
+            grid-template-rows: 1fr;
+        }
+    }
 }
 
 .pwt-nav-menu-icon {
-- 
2.47.3