Mobile filter menu stuff

packages/web/components/elements/CloseButton.tsx

@@ -0,0 +1,56 @@
+import { X } from 'phosphor-react'
+import { useState } from 'react'
+import { Button } from './Button'
+import { Box } from './LayoutPrimitives'
+
+type CloseButtonProps = {
+  close: () => void
+}
+
+export function CloseButton(props: CloseButtonProps): JSX.Element {
+  const [hover, setHover] = useState(false)
+
+  return (
+    <Box
+      css={{
+        display: 'flex',
+        marginLeft: 'auto',
+        height: '20px',
+        width: '20px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '1000px',
+        background: '#EBEBEB',
+        '&:hover': {
+          bg: '#898989',
+        },
+      }}
+      onMouseOver={() => setHover(true)}
+      onMouseOut={() => setHover(false)}
+    >
+      <Button
+        css={{
+          cursor: 'pointer',
+          marginLeft: 'auto',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        style="ghost"
+        onClick={() => {
+          props.close()
+        }}
+      >
+        <X
+          width={10}
+          height={10}
+          weight="bold"
+          color={hover ? '#EBEBEB' : '#898989'}
+          className="xMark"
+        />
+      </Button>
+    </Box>
+  )
+}

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -732,6 +732,8 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     props.reloadItems()
   }
 
+  const [showFilterMenu, setShowFilterMenu] = useState(false)
+
   return (
     <VStack css={{ width: '100%', height: '100%' }}>
       <LibraryHeader
@@ -742,13 +744,19 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           console.log('searching with searchQuery: ', searchQuery)
           props.applySearchQuery(searchQuery)
         }}
+        showFilterMenu={showFilterMenu}
+        setShowFilterMenu={setShowFilterMenu}
       />
       <HStack css={{ width: '100%', height: '100%' }}>
         <SpanBox
           css={{
+            display: 'block',
+            bg: 'red',
             '@mdDown': {
-              display: 'none',
+              opacity: showFilterMenu ? '1.0' : '0.0',
+              visibility: showFilterMenu ? 'visible' : 'hidden',
             },
+            transition: 'visibility 0s, opacity 0.3s',
           }}
         >
           <LibraryFilterMenu
@@ -758,16 +766,13 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
               console.log('searching with searchQuery: ', searchQuery)
               props.applySearchQuery(searchQuery)
             }}
+            setShowFilterMenu={setShowFilterMenu}
           />
         </SpanBox>
         <VStack
           alignment="center"
           css={{
-            px: '$3',
             width: '100%',
-            '@smDown': {
-              px: '$2',
-            },
           }}
         >
           <Toaster />

packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

@@ -7,6 +7,9 @@ import { CaretRight, Circle, DotsThree, Plus } from 'phosphor-react'
 import { useGetSubscriptionsQuery } from '../../../lib/networking/queries/useGetSubscriptionsQuery'
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { CloseButton } from '../../elements/CloseButton'
+import { MenuHeaderButton } from './LibraryHeader'
+import { LayoutType } from './HomeFeedContainer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '300px'
 
@@ -15,6 +18,8 @@ type LibraryFilterMenuProps = {
 
   searchTerm: string | undefined
   applySearchQuery: (searchTerm: string) => void
+
+  setShowFilterMenu: (show: boolean) => void
 }
 
 export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
@@ -34,8 +39,28 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           '&::-webkit-scrollbar': {
             display: 'none',
           },
+          '@mdDown': {
+            top: '50px',
+            width: '100%',
+            zIndex: 6, // Above the header
+          },
+          transform: 'translateX(0)',
         }}
       >
+        {/* <Box
+          css={{
+            width: '100%',
+            height: '30px',
+            py: '15px',
+            px: '15px',
+            '@md': {
+              display: 'none',
+            },
+          }}
+        >
+          <MenuHeaderButton setShowFilterMenu={props.setShowFilterMenu} />
+          <CloseButton close={() => props.setShowFilterMenu(false)} />
+        </Box> */}
         <SavedSearches {...props} />
         <Subscriptions {...props} />
         <Labels {...props} />
@@ -51,6 +76,9 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           minWidth: LIBRARY_LEFT_MENU_WIDTH,
           height: '100%',
           bg: '$grayBase',
+          '@mdDown': {
+            display: 'none',
+          },
         }}
       ></Box>
     </>
@@ -206,6 +234,8 @@ type FilterButtonProps = {
   filterTerm: string
   searchTerm: string | undefined
   applySearchQuery: (searchTerm: string) => void
+
+  setShowFilterMenu: (show: boolean) => void
 }
 
 function FilterButton(props: FilterButtonProps): JSX.Element {
@@ -249,6 +279,7 @@ function FilterButton(props: FilterButtonProps): JSX.Element {
       }}
       onClick={(e) => {
         props.applySearchQuery(props.filterTerm)
+        props.setShowFilterMenu(false)
         e.preventDefault()
       }}
     >

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -11,11 +11,7 @@ import { GridSelectorIcon } from '../../elements/images/GridSelectorIcon'
 import { LayoutType } from './HomeFeedContainer'
 import { PrimaryDropdown } from '../PrimaryDropdown'
 import { LogoBox } from '../../elements/LogoBox'
-import {
-  OmnivoreLogoIcon,
-  OmnivoreNameLogo,
-  OmnivoreSmallLogo,
-} from '../../elements/images/OmnivoreNameLogo'
+import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
 
 type LibraryHeaderProps = {
   layout: LayoutType
@@ -23,6 +19,9 @@ type LibraryHeaderProps = {
 
   searchTerm: string | undefined
   applySearchQuery: (searchQuery: string) => void
+
+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
 }
 
 const FOCUSED_BOXSHADOW = '0px 0px 2px 2px rgba(255, 234, 159, 0.56)'
@@ -108,7 +107,7 @@ function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         },
       }}
     >
-      <MenuHeaderButton />
+      <MenuHeaderButton {...props} />
       <ControlButtonBox
         layout={props.layout}
         updateLayout={props.updateLayout}
@@ -117,19 +116,30 @@ function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
   )
 }
 
-function MenuHeaderButton(): JSX.Element {
+type MenuHeaderButtonProps = {
+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
+}
+
+export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element {
   return (
     <HStack
       css={{
         ml: '10px',
-        minWidth: '60px',
-        minHeight: '30px',
-        bg: '#F0F0F0',
+        width: '60px',
+        height: '30px',
+        // minWidth: '60px',
+        // minHeight: '30px',
+        bg: props.showFilterMenu ? '#898989' : '#F0F0F0',
         borderRadius: '5px',
         px: '5px',
+        cursor: 'pointer',
       }}
       alignment="center"
       distribution="around"
+      onClick={() => {
+        props.setShowFilterMenu(!props.showFilterMenu)
+      }}
     >
       <OmnivoreSmallLogo size={15} strokeColor="black" />
       <FunnelSimple size={16} color="#6A6968" />