From 208ac1ac3a8d60f56e12efa63d24d4fd8c1ae9e5 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sat, 23 Sep 2023 09:31:48 +0200
Subject: [PATCH] Added smooth transition to sidebar navigation

---
 .../stylesheets/main/components/_nav.scss     | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/templates/assets/stylesheets/main/components/_nav.scss b/src/templates/assets/stylesheets/main/components/_nav.scss
index 4a3f341bf..b04501dc5 100644
--- a/src/templates/assets/stylesheets/main/components/_nav.scss
+++ b/src/templates/assets/stylesheets/main/components/_nav.scss
@@ -385,7 +385,7 @@
       background-color: transparent;
     }
 
-    // Toggle for nested navigation
+    // Hide nested navigation
     &__toggle ~ & {
       display: flex;
       opacity: 0;
@@ -522,14 +522,32 @@
       }
     }
 
-    // Hide toggle for nested navigation
+    // Hide nested navigation
     &__toggle ~ & {
-      display: none;
+      display: grid;
+      grid-template-rows: 0fr;
+      visibility: collapse;
+      opacity: 0;
+      transition:
+        grid-template-rows 250ms cubic-bezier(0.86, 0, 0.07, 1),
+        opacity            250ms,
+        visibility           0ms 250ms;
+
+      // Navigation list
+      > .md-nav__list {
+        overflow: hidden;
+      }
     }
 
     // Show nested navigation when toggle is active or indeterminate
     &__toggle:is(:checked, :indeterminate) ~ & {
-      display: block;
+      grid-template-rows: 1fr;
+      visibility: visible;
+      opacity: 1;
+      transition:
+        grid-template-rows 250ms cubic-bezier(0.86, 0, 0.07, 1),
+        opacity            150ms 100ms,
+        visibility           0ms;
     }
 
     // Hide navigation title in nested navigation