1 files changed, 24 insertions, 8 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 04c155eb..75b755c0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -474,7 +474,7 @@ $: {
     }
 
     .header.header-hidden {
-      transform: none;
+      transform: translateY(calc(-100% - 2rem));
     }
 
     .menu-toggle {
@@ -526,10 +526,6 @@ $: {
     }
 
     .nav-items {
-      display: none;
-    }
-
-    .header.menu-open .nav-items {
       display: flex;
       flex-direction: column;
       align-items: stretch;
@@ -545,16 +541,36 @@ $: {
         0 0 0 5px var(--base02);
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
+      transform-origin: top right;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-8px) scale(0.96);
+      pointer-events: none;
+      transition:
+        opacity var(--duration-fast) var(--ease-out-quart),
+        transform var(--duration-fast) var(--ease-out-quart),
+        visibility 0s linear var(--duration-fast);
+    }
+
+    .header.menu-open .nav-items {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+      pointer-events: auto;
+      transition:
+        opacity var(--duration-fast) var(--ease-out-quart),
+        transform var(--duration-fast) var(--ease-out-quart),
+        visibility 0s linear 0s;
     }
 
-    .header.menu-open .nav-items :global(.header-item) {
+    .nav-items :global(.header-item) {
       display: block;
       margin: 0;
       padding: 0.6rem 0.75rem;
     }
 
-    .header.menu-open .nav-items :global(.separator),
-    .header.menu-open .nav-items :global(.header-item:has(.avatar)) {
+    .nav-items :global(.separator),
+    .nav-items :global(.header-item:has(.avatar)) {
       display: none;
     }
   }