From 9a42eda579d9c9efd8fc6840be2a9272990c605e Mon Sep 17 00:00:00 2001
From: jean-philippe martel <jpmartel98@gmail.com>
Date: Thu, 10 Oct 2024 20:29:16 -0400
Subject: [PATCH 1/3] initial  code to add the search functionnality onto the a
 small viewport

---
 .../src/components/docsearch/doc-search.tsx   | 54 +++++++++++++------
 .../docs/src/components/header/header.tsx     |  9 +++-
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/packages/docs/src/components/docsearch/doc-search.tsx b/packages/docs/src/components/docsearch/doc-search.tsx
index 4a809788590..01edc6e5bee 100644
--- a/packages/docs/src/components/docsearch/doc-search.tsx
+++ b/packages/docs/src/components/docsearch/doc-search.tsx
@@ -9,9 +9,11 @@ import {
   type Signal,
   $,
   sync$,
+  useTask$,
 } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
 import type { DocSearchHit, InternalDocSearchHit } from './types';
-import { type ButtonTranslations, DocSearchButton } from './doc-search-button';
+import { type ButtonTranslations } from './doc-search-button';
 import { DocSearchModal, type ModalTranslations } from './doc-search-modal';
 import styles from './doc-search.css?inline';
 
@@ -71,8 +73,16 @@ export const DocSearch = component$((props: DocSearchProps) => {
     status: 'idle',
     snippetLength: 10,
   });
-
   const searchButtonRef = useSignal<Element>();
+  const isOpen = useSignal(false);
+
+  useTask$((ctx) => {
+    ctx.track(() => {
+      if (state.isOpen != isOpen.value) {
+        isOpen.value = state.isOpen;
+      }
+    });
+  });
 
   return (
     <div
@@ -89,6 +99,7 @@ export const DocSearch = component$((props: DocSearchProps) => {
             // another one.
             if (!document.body.classList.contains('DocSearch--active')) {
               state.isOpen = true;
+              isOpen.value = true;
             }
           }
           if (
@@ -102,6 +113,7 @@ export const DocSearch = component$((props: DocSearchProps) => {
             event.preventDefault();
             if (state.isOpen) {
               state.isOpen = false;
+              isOpen.value = false;
             } else if (!document.body.classList.contains('DocSearch--active')) {
               open();
             }
@@ -110,27 +122,35 @@ export const DocSearch = component$((props: DocSearchProps) => {
           if (searchButtonRef && searchButtonRef.value === document.activeElement) {
             if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
               state.isOpen = true;
+              isOpen.value = true;
               state.initialQuery = event.key;
             }
           }
         }),
       ]}
     >
-      <DocSearchButton
-        ref={searchButtonRef}
-        onClick$={() => {
-          state.isOpen = true;
-        }}
-      />
-      {state.isOpen && (
-        <DocSearchModal
-          aiResultOpen={aiResultOpen.value}
-          indexName={props.indexName}
-          apiKey={props.apiKey}
-          appId={props.appId}
-          state={state}
-        />
-      )}
+      <Modal.Root bind:show={isOpen}>
+        <Modal.Trigger
+          class="DocSearch DocSearch-Button"
+          onClick$={() => {
+            state.isOpen = true;
+            isOpen.value = true;
+          }}
+        >
+          Search
+        </Modal.Trigger>
+        <Modal.Panel class="w-full h-full">
+          {state.isOpen && (
+            <DocSearchModal
+              aiResultOpen={aiResultOpen.value}
+              indexName={props.indexName}
+              apiKey={props.apiKey}
+              appId={props.appId}
+              state={state}
+            />
+          )}
+        </Modal.Panel>
+      </Modal.Root>
     </div>
   );
 });
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index a9aa3a20816..5dad5cc0392 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -44,6 +44,13 @@ export const Header = component$(() => {
               <QwikLogo width={130} height={44} />
             </a>
           </div>
+          <div class="absolute right-8 lg:hidden">
+            <DocSearch
+              appId={import.meta.env.VITE_ALGOLIA_APP_ID}
+              apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
+              indexName={import.meta.env.VITE_ALGOLIA_INDEX}
+            />
+          </div>
           <button
             onClick$={() => {
               globalStore.headerMenuOpen = !globalStore.headerMenuOpen;
@@ -99,7 +106,7 @@ export const Header = component$(() => {
                 <span>Shop</span>
               </a>
             </li>
-            <li>
+            <li class="hidden lg:block">
               <DocSearch
                 appId={import.meta.env.VITE_ALGOLIA_APP_ID}
                 apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}

From 9fcc93fe2b41aa5698bd858ff4db0922115a0dbf Mon Sep 17 00:00:00 2001
From: jean-philippe martel <jpmartel98@gmail.com>
Date: Fri, 11 Oct 2024 20:06:56 -0400
Subject: [PATCH 2/3] second version with control being proped down

---
 .../components/docsearch/doc-search-modal.tsx |  9 ++-
 .../src/components/docsearch/doc-search.tsx   | 48 +++++----------
 .../src/components/docsearch/search-box.tsx   |  2 +-
 .../docs/src/components/header/header.tsx     | 58 +++++++++++++++----
 packages/docs/src/routes/api/qwik/api.json    |  4 +-
 packages/docs/src/routes/api/qwik/index.md    |  4 +-
 6 files changed, 72 insertions(+), 53 deletions(-)

diff --git a/packages/docs/src/components/docsearch/doc-search-modal.tsx b/packages/docs/src/components/docsearch/doc-search-modal.tsx
index 60393c1c101..8bcdf611360 100644
--- a/packages/docs/src/components/docsearch/doc-search-modal.tsx
+++ b/packages/docs/src/components/docsearch/doc-search-modal.tsx
@@ -33,6 +33,7 @@ export const DocSearchModal = component$(
     state,
     transformItems$ = identity,
     aiResultOpen,
+    isOpen,
     disableUserPersonalization = false,
   }: DocSearchModalProps) => {
     const containerRef = useSignal<Element>();
@@ -44,7 +45,7 @@ export const DocSearchModal = component$(
     const onSelectItem = noSerialize(({ item, event }: any) => {
       if (event) {
         if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
-          state.isOpen = false;
+          isOpen.value = false;
         }
       }
     }) as any;
@@ -167,7 +168,8 @@ export const DocSearchModal = component$(
         tabIndex={0}
         onMouseDown$={(event) => {
           if (event.target === containerRef.value) {
-            state.isOpen = false;
+            isOpen.value = false;
+            //state.isOpen.value = false;
           }
         }}
       >
@@ -178,7 +180,8 @@ export const DocSearchModal = component$(
               autoFocus={true}
               inputRef={inputRef as any}
               onClose$={() => {
-                state.isOpen = false;
+                //state.isOpen.value = false;
+                isOpen.value = false;
               }}
             />
           </header>
diff --git a/packages/docs/src/components/docsearch/doc-search.tsx b/packages/docs/src/components/docsearch/doc-search.tsx
index 01edc6e5bee..be7874b6891 100644
--- a/packages/docs/src/components/docsearch/doc-search.tsx
+++ b/packages/docs/src/components/docsearch/doc-search.tsx
@@ -1,4 +1,5 @@
 import type { SearchClient } from 'algoliasearch/lite';
+import { SearchIcon } from './icons/SearchIcon';
 import {
   component$,
   useStore,
@@ -13,7 +14,7 @@ import {
 } from '@builder.io/qwik';
 import { Modal } from '@qwik-ui/headless';
 import type { DocSearchHit, InternalDocSearchHit } from './types';
-import { type ButtonTranslations } from './doc-search-button';
+import { type ButtonTranslations, DocSearchButton } from './doc-search-button';
 import { DocSearchModal, type ModalTranslations } from './doc-search-modal';
 import styles from './doc-search.css?inline';
 
@@ -23,7 +24,6 @@ export type DocSearchTranslations = Partial<{
 }>;
 
 export type DocSearchState = {
-  isOpen: boolean;
   query: string;
   collections: {
     items: InternalDocSearchHit[];
@@ -36,10 +36,10 @@ export type DocSearchState = {
   status: 'idle' | 'loading' | 'stalled' | 'error';
   initialQuery?: string;
 };
-
 export interface DocSearchProps {
   appId: string;
   apiKey: string;
+  isOpen: Signal<boolean>;
   indexName: string;
   transformItems$?: (items: DocSearchHit[]) => DocSearchHit[];
   transformSearchClient?: (searchClient: SearchClient) => SearchClient;
@@ -57,12 +57,12 @@ export const AiResultOpenContext = createContextId<Signal<boolean>>('aiResultOpe
 
 export const DocSearch = component$((props: DocSearchProps) => {
   useStyles$(styles);
+
   const aiResultOpen = useSignal(false);
 
   useContextProvider(AiResultOpenContext, aiResultOpen);
 
   const state = useStore<DocSearchState>({
-    isOpen: false,
     initialQuery: '',
     query: '',
     collections: [],
@@ -73,17 +73,8 @@ export const DocSearch = component$((props: DocSearchProps) => {
     status: 'idle',
     snippetLength: 10,
   });
-  const searchButtonRef = useSignal<Element>();
-  const isOpen = useSignal(false);
-
-  useTask$((ctx) => {
-    ctx.track(() => {
-      if (state.isOpen != isOpen.value) {
-        isOpen.value = state.isOpen;
-      }
-    });
-  });
 
+  const searchButtonRef = useSignal<Element>();
   return (
     <div
       class={{ docsearch: true, 'ai-result-open': aiResultOpen.value }}
@@ -98,22 +89,20 @@ export const DocSearch = component$((props: DocSearchProps) => {
             // We check that no other DocSearch modal is showing before opening
             // another one.
             if (!document.body.classList.contains('DocSearch--active')) {
-              state.isOpen = true;
-              isOpen.value = true;
+              props.isOpen.value = true;
             }
           }
           if (
-            (event.key === 'Escape' && state.isOpen) ||
+            (event.key === 'Escape' && props.isOpen.value) ||
             // The `Cmd+K` shortcut both opens and closes the modal.
             (event.key === 'k' && (event.metaKey || event.ctrlKey)) ||
             // The `/` shortcut opens but doesn't close the modal because it's
             // a character.
-            (!isEditingContent(event) && event.key === '/' && !state.isOpen)
+            (!isEditingContent(event) && event.key === '/' && !props.isOpen.value)
           ) {
             event.preventDefault();
-            if (state.isOpen) {
-              state.isOpen = false;
-              isOpen.value = false;
+            if (props.isOpen.value) {
+              props.isOpen.value = false;
             } else if (!document.body.classList.contains('DocSearch--active')) {
               open();
             }
@@ -121,27 +110,18 @@ export const DocSearch = component$((props: DocSearchProps) => {
 
           if (searchButtonRef && searchButtonRef.value === document.activeElement) {
             if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
-              state.isOpen = true;
-              isOpen.value = true;
+              props.isOpen.value = true;
               state.initialQuery = event.key;
             }
           }
         }),
       ]}
     >
-      <Modal.Root bind:show={isOpen}>
-        <Modal.Trigger
-          class="DocSearch DocSearch-Button"
-          onClick$={() => {
-            state.isOpen = true;
-            isOpen.value = true;
-          }}
-        >
-          Search
-        </Modal.Trigger>
+      <Modal.Root bind:show={props.isOpen}>
         <Modal.Panel class="w-full h-full">
-          {state.isOpen && (
+          {props.isOpen.value && (
             <DocSearchModal
+              isOpen={props.isOpen}
               aiResultOpen={aiResultOpen.value}
               indexName={props.indexName}
               apiKey={props.apiKey}
diff --git a/packages/docs/src/components/docsearch/search-box.tsx b/packages/docs/src/components/docsearch/search-box.tsx
index 0f7b1e2ad6c..1dd34e0b1df 100644
--- a/packages/docs/src/components/docsearch/search-box.tsx
+++ b/packages/docs/src/components/docsearch/search-box.tsx
@@ -96,7 +96,7 @@ export const SearchBox = component$((props: SearchBoxProps) => {
               }
             }
             if (event.key === 'Escape') {
-              props.state.isOpen = false;
+              props.state.isOpen.value = false;
             }
             if (event.key === 'Enter') {
               if (props.state.activeItemId !== null) {
diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index 5dad5cc0392..feee96a017b 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,5 +1,12 @@
 import { useLocation } from '@builder.io/qwik-city';
-import { component$, useStyles$, useContext, useVisibleTask$ } from '@builder.io/qwik';
+import {
+  component$,
+  useStyles$,
+  useContext,
+  useVisibleTask$,
+  useSignal,
+  useTask$,
+} from '@builder.io/qwik';
 import { DocSearch } from '../docsearch/doc-search';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
@@ -15,9 +22,29 @@ import {
   setPreference,
   ThemeToggle,
 } from '../theme-toggle/theme-toggle';
+import { DocSearchButton } from '../docsearch/doc-search-button';
+import { SearchIcon } from '../docsearch/icons/SearchIcon';
+
+export const SearchButton = component$((props: { onClick$: () => void; className?: string }) => {
+  return (
+    <button
+      onClick$={props.onClick$}
+      class={`flex flex-row justify-between items-center py-0 px-2 my-0 mx-4 h-8 font-medium
+              text-center normal-case border-2 border-solid cursor-pointer select-none
+              border-sky-500 bg-neutral-900 text-sky-500 rounded-2xl ${props.className || ''}`}
+      type="button"
+      title="Search"
+      aria-label="Search"
+    >
+      <span class="mr-2">Search</span>
+      <SearchIcon />
+    </button>
+  );
+});
 
 export const Header = component$(() => {
   useStyles$(styles);
+  const shouldActivate = useSignal(false);
   const globalStore = useContext(GlobalStore);
   const pathname = useLocation().url.pathname;
 
@@ -44,11 +71,12 @@ export const Header = component$(() => {
               <QwikLogo width={130} height={44} />
             </a>
           </div>
-          <div class="absolute right-8 lg:hidden">
-            <DocSearch
-              appId={import.meta.env.VITE_ALGOLIA_APP_ID}
-              apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
-              indexName={import.meta.env.VITE_ALGOLIA_INDEX}
+          <div class="flex items-center">
+            <SearchButton
+              onClick$={() => {
+                shouldActivate.value = true;
+              }}
+              className=" absolute right-10 lg:hidden"
             />
           </div>
           <button
@@ -106,13 +134,15 @@ export const Header = component$(() => {
                 <span>Shop</span>
               </a>
             </li>
-            <li class="hidden lg:block">
-              <DocSearch
-                appId={import.meta.env.VITE_ALGOLIA_APP_ID}
-                apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
-                indexName={import.meta.env.VITE_ALGOLIA_INDEX}
+            <li>
+              <SearchButton
+                onClick$={() => {
+                  shouldActivate.value = true;
+                }}
+                className="hidden lg:flex"
               />
             </li>
+
             <li>
               <ThemeToggle />
             </li>
@@ -142,6 +172,12 @@ export const Header = component$(() => {
             </li>
           </ul>
         </div>
+        <DocSearch
+          isOpen={shouldActivate}
+          appId={import.meta.env.VITE_ALGOLIA_APP_ID}
+          apiKey={import.meta.env.VITE_ALGOLIA_SEARCH_KEY}
+          indexName={import.meta.env.VITE_ALGOLIA_INDEX}
+        />
       </header>
     </>
   );
diff --git a/packages/docs/src/routes/api/qwik/api.json b/packages/docs/src/routes/api/qwik/api.json
index c0ea1e399df..dcd73ac2522 100644
--- a/packages/docs/src/routes/api/qwik/api.json
+++ b/packages/docs/src/routes/api/qwik/api.json
@@ -1760,7 +1760,7 @@
         }
       ],
       "kind": "Function",
-      "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n    base?: string;\n    manifestHash?: string;\n    manifestURL?: string;\n    nonce?: string;\n}) => JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n</td><td>\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`<!-- -->. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`<!-- -->. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[JSXNode](#jsxnode)<!-- -->&lt;\"script\"&gt;",
+      "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n    base?: string;\n    manifestHash?: string;\n    manifestURL?: string;\n    nonce?: string;\n}) => JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n</td><td>\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`<!-- -->. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`<!-- -->. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nJSXNode&lt;\"script\"&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
       "mdFile": "qwik.prefetchgraph.md"
     },
@@ -1774,7 +1774,7 @@
         }
       ],
       "kind": "Function",
-      "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n    base?: string;\n    scope?: string;\n    path?: string;\n    verbose?: boolean;\n    fetchBundleGraph?: boolean;\n    nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker `import.meta.env.BASE_URL` or `/`<!-- -->. Default is `import.meta.env.BASE_URL` - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`<!-- -->.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[JSXNode](#jsxnode)<!-- -->&lt;'script'&gt;",
+      "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n    base?: string;\n    scope?: string;\n    path?: string;\n    verbose?: boolean;\n    fetchBundleGraph?: boolean;\n    nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker `import.meta.env.BASE_URL` or `/`<!-- -->. Default is `import.meta.env.BASE_URL` - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`<!-- -->.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nJSXNode&lt;'script'&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
       "mdFile": "qwik.prefetchserviceworker.md"
     },
diff --git a/packages/docs/src/routes/api/qwik/index.md b/packages/docs/src/routes/api/qwik/index.md
index 62e1aa35218..8dda3034dd5 100644
--- a/packages/docs/src/routes/api/qwik/index.md
+++ b/packages/docs/src/routes/api/qwik/index.md
@@ -3625,7 +3625,7 @@ _(Optional)_ Options for the loading prefetch graph.
 </tbody></table>
 **Returns:**
 
-[JSXNode](#jsxnode)&lt;"script"&gt;
+JSXNode&lt;"script"&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
 
@@ -3679,7 +3679,7 @@ Options for the prefetch service worker.
 </tbody></table>
 **Returns:**
 
-[JSXNode](#jsxnode)&lt;'script'&gt;
+JSXNode&lt;'script'&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
 

From c109ea1b0d7c7cfc08f70116e26cf6ad3773db33 Mon Sep 17 00:00:00 2001
From: jean-philippe martel <jpmartel98@gmail.com>
Date: Mon, 14 Oct 2024 13:52:34 -0400
Subject: [PATCH 3/3] clean up and consitent with the current implemenation

---
 packages/docs/src/components/header/header.tsx | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/docs/src/components/header/header.tsx b/packages/docs/src/components/header/header.tsx
index feee96a017b..dd4f4312dae 100644
--- a/packages/docs/src/components/header/header.tsx
+++ b/packages/docs/src/components/header/header.tsx
@@ -1,12 +1,5 @@
 import { useLocation } from '@builder.io/qwik-city';
-import {
-  component$,
-  useStyles$,
-  useContext,
-  useVisibleTask$,
-  useSignal,
-  useTask$,
-} from '@builder.io/qwik';
+import { component$, useStyles$, useContext, useVisibleTask$, useSignal } from '@builder.io/qwik';
 import { DocSearch } from '../docsearch/doc-search';
 import { CloseIcon } from '../svgs/close-icon';
 import { DiscordLogo } from '../svgs/discord-logo';
@@ -22,7 +15,6 @@ import {
   setPreference,
   ThemeToggle,
 } from '../theme-toggle/theme-toggle';
-import { DocSearchButton } from '../docsearch/doc-search-button';
 import { SearchIcon } from '../docsearch/icons/SearchIcon';
 
 export const SearchButton = component$((props: { onClick$: () => void; className?: string }) => {
@@ -36,7 +28,7 @@ export const SearchButton = component$((props: { onClick$: () => void; className
       title="Search"
       aria-label="Search"
     >
-      <span class="mr-2">Search</span>
+      <span class="mr-2  md:inline-block sm:hiddenmr-2 hidden sm:visible">Search</span>
       <SearchIcon />
     </button>
   );
@@ -134,15 +126,13 @@ export const Header = component$(() => {
                 <span>Shop</span>
               </a>
             </li>
-            <li>
+            <li class="hidden lg:flex">
               <SearchButton
                 onClick$={() => {
                   shouldActivate.value = true;
                 }}
-                className="hidden lg:flex"
               />
             </li>
-
             <li>
               <ThemeToggle />
             </li>