Add animation to sidebar entry and exit*

*chromium only currently

src/components/navigation/Sidebar.astro

···
       background-color: #00000080;
       backdrop-filter: blur(15px);
     }
+
+    /* animations */
+    --popover-animation-timing: 0.2s;
+    @media (prefers-reduced-motion: reduce) {
+      --popover-animation-timing: 0;
+    }
+    --popover-animation-easing: ease-in-out;
+
+    transition:
+      translate var(--popover-animation-timing, 0.2s)
+        var(--popover-animation-easing, linear) allow-discrete,
+      overlay var(--popover-animation-timing, 0.2s)
+        var(--popover-animation-easing, linear) allow-discrete,
+      display var(--popover-animation-timing, 0.2s)
+        var(--popover-animation-easing, linear) allow-discrete;
+
+    /* exit */
+    translate: 100% 0;
+    /* base */
+    &:popover-open {
+      translate: 0 0;
+      /* enter */
+      @starting-style {
+        translate: 100% 0;
+      }
+    }
+
+    &::backdrop {
+      transition:
+        display var(--popover-animation-timing)
+          var(--popover-animation-easing, linear) allow-discrete,
+        overlay var(--popover-animation-timing, 0.2s)
+          var(--popover-animation-easing, linear) allow-discrete,
+        opacity var(--popover-animation-timing)
+          var(--popover-animation-easing, linear) allow-discrete;
+
+      /* exit */
+      opacity: 0;
+    }
+    /* base */
+    &:popover-open::backdrop {
+      opacity: 1;
+      /* enter */
+      @starting-style {
+        opacity: 0;
+      }
+    }
   }
 </style>