Tested to add algolia search

components/layout/header/header.tsx

@@ -1,29 +1,33 @@
+import { categoriesQuery } from '@/lib/sanity/queries';
+import { clientFetch } from '@/lib/sanity/sanity.client';
 import Cart from 'components/cart';
 import OpenCart from 'components/cart/open-cart';
 import Logo from 'components/ui/logo/logo';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import HeaderRoot from './header-root';
-import MainMenu from './main-menu/main-menu';
 import MobileMenuModal from './mobile-menu/modal';
 import OpenMobileMenu from './mobile-menu/open-mobile-menu';
 import SearchModal from './search/modal';
 import OpenSearch from './search/open-search';
 import UserModal from './user-menu/modal';
 import OpenUserMenu from './user-menu/open-user-menu';
-
 interface HeaderProps {
   locale: string;
 }
+export default async function Header({ locale }: HeaderProps) {
+  const params = {
+    locale: locale
+  };
+  const mainMenu = await clientFetch(categoriesQuery, params);
 
-const Header = ({ locale }: HeaderProps) => {
   return (
     <HeaderRoot>
       <div className="relative flex flex-col border-b border-ui-border bg-app">
         <div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
           <div className="-translate-x-3 transform md:hidden">
             <Suspense fallback={<OpenMobileMenu />}>
-              <MobileMenuModal locale={locale} />
+              <MobileMenuModal items={mainMenu} />
             </Suspense>
           </div>
 
@@ -38,9 +42,19 @@ const Header = ({ locale }: HeaderProps) => {
           </div>
 
           <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
-            <MainMenu locale={locale} />
+            <ul className="flex gap-6">
+              {mainMenu.map((item: { title: string; slug: string }, i: number) => {
+                return (
+                  <li key={i}>
+                    <Link className="font-medium" href={`/category/${item.slug}`}>
+                      {item.title}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
           </div>
-          <div className="flex translate-x-3 transform justify-end space-x-1">
+          <div className="flex translate-x-2 transform justify-end space-x-1">
             <Suspense fallback={<OpenSearch />}>
               <SearchModal />
             </Suspense>
@@ -55,6 +69,4 @@ const Header = ({ locale }: HeaderProps) => {
       </div>
     </HeaderRoot>
   );
-};
-
-export default Header;
+}

components/layout/header/main-menu/main-menu.tsx

@@ -1,33 +0,0 @@
-import { categoriesQuery } from '@/lib/sanity/queries';
-import { clientFetch } from '@/lib/sanity/sanity.client';
-import Link from 'next/link';
-
-interface MainMenuProps {
-  locale: string;
-}
-
-export default async function MainMenu({ locale }: MainMenuProps) {
-  const params = {
-    locale: locale
-  };
-
-  const categories = await clientFetch(categoriesQuery, params);
-
-  if (!categories) {
-    return;
-  }
-
-  return (
-    <ul className="flex flex-col gap-4 lg:flex-row lg:gap-6">
-      {categories.map((category: { slug: string } | any, index: number) => {
-        return (
-          <li className="font-medium" key={index}>
-            <Link className="hover:underline" href={`/category/${category.slug}`}>
-              {category.title}
-            </Link>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

components/layout/header/mobile-menu/modal.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import Link from 'next/link';
 import { useState } from 'react';
-import MainMenu from '../main-menu/main-menu';
 import OpenMobileMenu from './open-mobile-menu';
 
 interface MobileMenuModalProps {
-  locale: string;
+  items: [];
 }
 
-export default function MobileMenuModal({ locale }: MobileMenuModalProps) {
+export default function MobileMenuModal({ items }: MobileMenuModalProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -23,7 +23,17 @@ export default function MobileMenuModal({ locale }: MobileMenuModalProps) {
             <SheetTitle className="text-lg font-semibold">Menu</SheetTitle>
           </SheetHeader>
           <div className="mt-4">
-            <MainMenu locale={locale} />
+            <ul className="flex flex-col gap-2">
+              {items.map((item: { title: string; slug: string }, i: number) => {
+                return (
+                  <li key={i}>
+                    <Link onClick={() => setIsOpen(false)} href={`/category/${item.slug}`}>
+                      {item.title}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
           </div>
         </SheetContent>
       </Sheet>

components/layout/header/search/modal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Search from '@/components/search/search';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -19,6 +20,7 @@ export default function SearchModal() {
           <SheetHeader>
             <SheetTitle className="text-lg font-semibold">{t('search')}</SheetTitle>
           </SheetHeader>
+          <Search />
         </SheetContent>
       </Sheet>
     </>

components/layout/header/search/open-search.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 export default function OpenSearch({ className }: { className?: string }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center text-high-contrast">
+    <div className="relative flex h-10 w-10 items-center justify-center text-high-contrast">
       <MagnifyingGlassIcon
         className={clsx('h-5 transition-all ease-in-out hover:scale-110 ', className)}
       />

components/layout/header/user-menu/modal.tsx

@@ -5,8 +5,6 @@ import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import OpenUserMenu from './open-user-menu';
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
 export default function UserModal() {
   const [isOpen, setIsOpen] = useState(false);
   const t = useTranslations('auth');
@@ -21,15 +19,6 @@ export default function UserModal() {
           <SheetHeader>
             <SheetTitle className="text-lg font-semibold">{t('login.logIn')}</SheetTitle>
           </SheetHeader>
-
-          <Tabs defaultValue="login" className="mt-4 w-full">
-            <TabsList>
-              <TabsTrigger value="login">{t('login.logIn')}</TabsTrigger>
-              <TabsTrigger value="register">{t('signUp.register')}</TabsTrigger>
-            </TabsList>
-            <TabsContent value="login">Log in to your account here.</TabsContent>
-            <TabsContent value="register">Register for account here.</TabsContent>
-          </Tabs>
         </SheetContent>
       </Sheet>
     </>

components/layout/header/user-menu/open-user-menu.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 export default function OpenUserMenu({ className }: { className?: string }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center text-high-contrast">
+    <div className="relative flex h-10 w-10 items-center justify-center text-high-contrast">
       <UserCircleIcon
         className={clsx(
           'h-5 stroke-current transition-all ease-in-out hover:scale-110 ',