chore(PPDSE-2397): chore-ppdse-2397-search-mobile-menu (#362)

* chore(PPDSE-2397): chore-ppdse-2397-added prop * chore(PPDSE-2397): chore-ppdse-2397-wrapped icon button instead
newscorp-ghfb · Sep 7, 2022 · d95f16d · d95f16d
1 parent fd0a727
commit d95f16d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/site/components/search/search.tsx b/site/components/search/search.tsx
@@ -18,7 +18,11 @@ const SearchIconContainer = styled(Visible)`
   ${getSpacingCssFromTheme('marginBottom', 'space010')};
 `;
 
-export const Search: React.FC = () => {
+interface SearchProps {
+  sidebarOpen?: boolean;
+}
+
+export const Search: React.FC<SearchProps> = ({sidebarOpen}) => {
   const searchButtonRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const [initialQuery, setInitialQuery] = React.useState<string | undefined>(
@@ -52,19 +56,21 @@ export const Search: React.FC = () => {
   return (
     <>
       <SearchIconContainer xs sm md>
-        <IconButton
-          aria-label="Search"
-          data-testid="search-icon-button"
-          overrides={{
-            stylePreset: 'iconButtonMinimalPrimary',
-          }}
-          ref={searchButtonRef}
-          onClick={onOpen}
-        >
-          <IconFilledSearch
-            overrides={{size: 'iconSize020', stylePreset: 'inkContrast'}}
-          />
-        </IconButton>
+        {sidebarOpen ? undefined : (
+          <IconButton
+            aria-label="Search"
+            data-testid="search-icon-button"
+            overrides={{
+              stylePreset: 'iconButtonMinimalPrimary',
+            }}
+            ref={searchButtonRef}
+            onClick={onOpen}
+          >
+            <IconFilledSearch
+              overrides={{size: 'iconSize020', stylePreset: 'inkContrast'}}
+            />
+          </IconButton>
+        )}
       </SearchIconContainer>
       <Visible lg xl>
         <Button

diff --git a/site/components/site-header.tsx b/site/components/site-header.tsx
@@ -159,7 +159,7 @@ const SiteHeader = React.forwardRef<HeaderRef, HeaderProps>(
             >
               <NewsKitLogo />
             </Link>
-            <Search />
+            <Search sidebarOpen={sidebarOpen} />
           </GridLayout>
         </Visible>
         <Visible lg xl>