From 31617a4698a3cc132fdd1e6467426ad0e6f342d2 Mon Sep 17 00:00:00 2001
From: Denis Fadeev <denis@fadeev.org>
Date: Tue, 6 Aug 2024 10:16:55 +0500
Subject: [PATCH] Move ZetaAI button to the search bar (#430)

---
 .../components/Layout/components/Header.tsx       | 15 ++++++++++++++-
 .../Layout/components/NavigationLayout.tsx        | 13 ++-----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/shared/components/Layout/components/Header.tsx b/src/components/shared/components/Layout/components/Header.tsx
index 2190430e..433bfaf7 100644
--- a/src/components/shared/components/Layout/components/Header.tsx
+++ b/src/components/shared/components/Layout/components/Header.tsx
@@ -2,6 +2,8 @@ import { Toolbar } from "@mui/material";
 import clsx from "clsx";
 import Link from "next/link";
 
+import { ZetaAiIcon } from "~/components/Cmdk/components/ZetaAiIcon";
+
 import { ClientOnlyPortal } from "../../ClientOnlyPortal";
 import { IconSearch, IconZetaDocsLogo } from "../../Icons";
 import { MobileMenuButton } from "./MobileMenuButton";
@@ -11,11 +13,22 @@ export const Header: React.FC<{
   isLeftDrawerOpen: boolean;
   toggleDrawerOpen: () => void;
   setIsLeftDrawerOpen: (isOpen: boolean) => void;
-}> = ({ isLeftDrawerOpen, toggleDrawerOpen, setIsLeftDrawerOpen }) => {
+  setIsCmdkOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  upSm: boolean;
+}> = ({ isLeftDrawerOpen, toggleDrawerOpen, setIsLeftDrawerOpen, setIsCmdkOpen, upSm }) => {
   return (
     <>
       <ClientOnlyPortal selector=".nextra-search">
         <IconSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-grey-400 dark:text-grey-300" />
+        <button
+          className="absolute top-1/2 -translate-y-1/2 right-4"
+          onClick={() => {
+            setIsCmdkOpen(true);
+            if (!upSm) setIsLeftDrawerOpen(false);
+          }}
+        >
+          <ZetaAiIcon width={"60"} />
+        </button>
       </ClientOnlyPortal>
 
       <Toolbar className="sm:hidden fixed z-[100] flex items-stretch w-full p-0 bg-grey-50 dark:bg-grey-900">
diff --git a/src/components/shared/components/Layout/components/NavigationLayout.tsx b/src/components/shared/components/Layout/components/NavigationLayout.tsx
index 1ed940d4..30a4980e 100644
--- a/src/components/shared/components/Layout/components/NavigationLayout.tsx
+++ b/src/components/shared/components/Layout/components/NavigationLayout.tsx
@@ -6,7 +6,6 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import { PropsWithChildren, useEffect, useMemo, useState } from "react";
 
-import { ZetaAiIcon } from "~/components/Cmdk/components/ZetaAiIcon";
 import { useCurrentBreakpoint } from "~/hooks/useCurrentBreakpoint";
 import { getRevealProps } from "~/lib/helpers/animations";
 
@@ -135,16 +134,6 @@ export const NavigationLayout: React.FC<NavigationLayoutProps> = ({ isMainPage,
 
             <div className="pb-6">
               <List className="w-full font-medium">
-                <ListItem className={clsx("px-5 sm:px-[30px] py-3 hover:!bg-[transparent] whitespace-nowrap")}>
-                  <button
-                    onClick={() => {
-                      setIsCmdkOpen(true);
-                      if (!upSm) setIsLeftDrawerOpen(false);
-                    }}
-                  >
-                    <ZetaAiIcon width={"60"} />
-                  </button>
-                </ListItem>
                 {navBottomItems.map((item) => (
                   <NavigationItem
                     key={item.label}
@@ -179,9 +168,11 @@ export const NavigationLayout: React.FC<NavigationLayoutProps> = ({ isMainPage,
         })}
       >
         <Header
+          setIsCmdkOpen={setIsCmdkOpen}
           isLeftDrawerOpen={isLeftDrawerOpen}
           toggleDrawerOpen={() => setIsLeftDrawerOpen((prev) => !prev)}
           setIsLeftDrawerOpen={setIsLeftDrawerOpen}
+          upSm={upSm}
         />
 
         <motion.div