Improve the menu animation on mobile

omnivore-app · Feb 20, 2024 · 42bb460 · 42bb460
1 parent e649e07
commit 42bb460
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
@@ -99,9 +99,10 @@ export function LibraryLegacyMenu(props: LibraryFilterMenuProps): JSX.Element {
             display: 'none',
           },
           '@mdDown': {
-            visibility: props.showFilterMenu ? 'visible' : 'hidden',
             width: '100%',
-            transition: 'visibility 0s, top 150ms',
+            transition: 'top 100ms, visibility 100ms',
+            top: props.showFilterMenu ? '0' : '100%',
+            visibility: props.showFilterMenu ? 'visible' : 'hidden',
           },
           zIndex: 10,
         }}

diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -113,8 +113,8 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           },
           '@mdDown': {
             width: '100%',
-            transition: 'left 50ms, top 750ms',
-            left: props.showFilterMenu ? '0' : '-500px',
+            transition: 'top 100ms, visibility 100ms',
+            top: props.showFilterMenu ? '0' : '100%',
             visibility: props.showFilterMenu ? 'visible' : 'hidden',
           },
           zIndex: 10,