Updates

components/layout/footer/footer.tsx

@@ -1,5 +1,5 @@
 import Text from '@/components/ui/text';
-import { footerMenuQuery } from '@/lib/sanity/queries';
+import { footerMenusQuery } from '@/lib/sanity/queries';
 import { clientFetch } from '@/lib/sanity/sanity.client';
 import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
@@ -15,7 +15,7 @@ export default async function Footer({ locale }: FooterProps) {
     locale: locale
   };
 
-  const footerMenus = await clientFetch(footerMenuQuery, params);
+  const footerMenus = await clientFetch(footerMenusQuery, params);
 
   return (
     <footer className="border-t border-ui-border bg-app">
@@ -33,7 +33,7 @@ export default async function Footer({ locale }: FooterProps) {
               return (
                 <div key={index}>
                   <Text variant="label">{menu.title}</Text>
-                  <ul className="mt-2 flex flex-col space-y-1" aria-label={menu.title}>
+                  <ul className="mt-4 flex flex-col space-y-2" aria-label={menu.title}>
                     {menu.menu.links.map((link: object | any, index: number) => {
                       return (
                         <li className="text-sm" key={index}>

components/layout/header/desktop-menu.tsx

@@ -0,0 +1,33 @@
+import { categoriesQuery } from '@/lib/sanity/queries';
+import { clientFetch } from '@/lib/sanity/sanity.client';
+import Link from 'next/link';
+
+interface DesktopMenuProps {
+  locale: string;
+}
+
+export default async function DesktopMenu({ locale }: DesktopMenuProps) {
+  const params = {
+    locale: locale
+  };
+
+  const categories = await clientFetch(categoriesQuery, params);
+
+  if (!categories) {
+    return;
+  }
+
+  return (
+    <ul className="flex space-x-4 lg:space-x-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/header.tsx

@@ -3,6 +3,7 @@ import OpenCart from 'components/cart/open-cart';
 import Logo from 'components/ui/logo/logo';
 import Link from 'next/link';
 import { Suspense } from 'react';
+import DesktopMenu from './desktop-menu';
 import HeaderRoot from './header-root';
 import MobileModal from './mobile-modal';
 
@@ -13,7 +14,7 @@ interface HeaderProps {
 const Header = ({ locale }: HeaderProps) => {
   return (
     <HeaderRoot>
-      <div className="relative flex flex-col">
+      <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="md:hidden">
             <MobileModal />
@@ -21,7 +22,7 @@ const Header = ({ locale }: HeaderProps) => {
 
           <div className="flex items-center">
             <Link
-              href={`/${locale}`}
+              href={`/`}
               className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out md:relative md:left-0 md:top-0 md:translate-x-0 md:translate-y-0"
               aria-label="Logo"
             >
@@ -30,11 +31,14 @@ 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">
-            Desktop Menu
+            {/* @ts-expect-error Server Component */}
+            {/* https://github.com/vercel/next.js/issues/42292 */}
+            <DesktopMenu locale={locale} />
           </div>
           <div className="flex justify-end md:w-1/3">
             <Suspense fallback={<OpenCart />}>
-              {/*// @ts-ignore */}
+              {/* @ts-expect-error Server Component */}
+              {/* https://github.com/vercel/next.js/issues/42292 */}
               <Cart />
             </Suspense>
           </div>