From 2d1db42de487885f8f9a4ef4051fff2b15a12842 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 20 Feb 2024 13:22:17 +0800
Subject: [PATCH] Add menu close button to the legacy menu

---
 .../templates/navMenu/LibraryLegacyMenu.tsx   | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
index 6dc8948e6..e88263331 100644
--- a/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef } from 'react'
 import { StyledText } from '../../elements/StyledText'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
-import { Circle } from 'phosphor-react'
+import { Circle, X } from 'phosphor-react'
 import {
   Subscription,
   SubscriptionType,
@@ -103,19 +103,45 @@ export function LibraryLegacyMenu(props: LibraryFilterMenuProps): JSX.Element {
             width: '100%',
             transition: 'visibility 0s, top 150ms',
           },
-          zIndex: 3,
+          zIndex: 10,
         }}
       >
         <Box
           css={{
             width: '100%',
             px: '25px',
-            pb: '25px',
+            pb: '17px',
             pt: '4.5px',
             lineHeight: '1',
+            '@mdDown': {
+              pb: '0px',
+              pt: '5px',
+              px: '15px',
+            },
           }}
         >
-          <LogoBox />
+          <SpanBox css={{ '@mdDown': { display: 'none' } }}>
+            <LogoBox />
+          </SpanBox>
+
+          <Button
+            style="plainIcon"
+            css={{
+              display: 'none',
+              '@mdDown': {
+                display: 'flex',
+                ml: 'auto',
+                pt: '10px',
+                pb: '0px',
+              },
+            }}
+            onClick={(event) => {
+              props.setShowFilterMenu(false)
+              event.preventDefault()
+            }}
+          >
+            <X size={30} />
+          </Button>
         </Box>
         <SavedSearches {...props} savedSearches={savedSearches} />
         <Subscriptions {...props} subscriptions={subscriptions} />