Move ZetaAI button to the search bar (#430)

zeta-chain · Aug 6, 2024 · 31617a4 · 31617a4
1 parent 57e34ca
commit 31617a4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git 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
@@ -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