From 5bbd90de375e29bc7fb9e0035403181f3b9867be Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 2 Mar 2023 19:32:34 +0800
Subject: [PATCH] Animate filter menu in from bottom

---
 .../web/components/elements/CloseButton.tsx   |  1 -
 .../templates/homeFeed/HomeFeedContainer.tsx  | 29 ++++++-------------
 .../templates/homeFeed/LibraryFilterMenu.tsx  | 13 +++++----
 3 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/packages/web/components/elements/CloseButton.tsx b/packages/web/components/elements/CloseButton.tsx
index b10d0508e..be36e720b 100644
--- a/packages/web/components/elements/CloseButton.tsx
+++ b/packages/web/components/elements/CloseButton.tsx
@@ -14,7 +14,6 @@ export function CloseButton(props: CloseButtonProps): JSX.Element {
     <Box
       css={{
         display: 'flex',
-        marginLeft: 'auto',
         height: '20px',
         width: '20px',
         alignItems: 'center',
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 12ebb8cd6..4c732b4e1 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -748,27 +748,16 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         setShowFilterMenu={setShowFilterMenu}
       />
       <HStack css={{ width: '100%', height: '100%' }}>
-        <SpanBox
-          css={{
-            display: 'block',
-            bg: 'red',
-            '@mdDown': {
-              opacity: showFilterMenu ? '1.0' : '0.0',
-              visibility: showFilterMenu ? 'visible' : 'hidden',
-            },
-            transition: 'visibility 0s, opacity 0.3s',
+        <LibraryFilterMenu
+          setShowAddLinkModal={props.setShowAddLinkModal}
+          searchTerm={props.searchTerm}
+          applySearchQuery={(searchQuery: string) => {
+            console.log('searching with searchQuery: ', searchQuery)
+            props.applySearchQuery(searchQuery)
           }}
-        >
-          <LibraryFilterMenu
-            setShowAddLinkModal={props.setShowAddLinkModal}
-            searchTerm={props.searchTerm}
-            applySearchQuery={(searchQuery: string) => {
-              console.log('searching with searchQuery: ', searchQuery)
-              props.applySearchQuery(searchQuery)
-            }}
-            setShowFilterMenu={setShowFilterMenu}
-          />
-        </SpanBox>
+          showFilterMenu={showFilterMenu}
+          setShowFilterMenu={setShowFilterMenu}
+        />
         <VStack
           alignment="center"
           css={{
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 2086a945f..f1e803470 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -19,6 +19,7 @@ type LibraryFilterMenuProps = {
   searchTerm: string | undefined
   applySearchQuery: (searchTerm: string) => void
 
+  showFilterMenu: boolean
   setShowFilterMenu: (show: boolean) => void
 }
 
@@ -40,27 +41,29 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
             display: 'none',
           },
           '@mdDown': {
-            top: '50px',
+            top: props.showFilterMenu ? '0px' : '100%',
             width: '100%',
             zIndex: 6, // Above the header
+            transform: 'translateY(0)',
+            transitionDuration: '200ms',
           },
-          transform: 'translateX(0)',
         }}
       >
-        {/* <Box
+        <HStack
           css={{
             width: '100%',
             height: '30px',
             py: '15px',
             px: '15px',
+            marginLeft: 'auto',
             '@md': {
               display: 'none',
             },
           }}
+          distribution="start"
         >
-          <MenuHeaderButton setShowFilterMenu={props.setShowFilterMenu} />
           <CloseButton close={() => props.setShowFilterMenu(false)} />
-        </Box> */}
+        </HStack>
         <SavedSearches {...props} />
         <Subscriptions {...props} />
         <Labels {...props} />