Updates

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

@@ -3,6 +3,10 @@
 import Link from 'next-intl/link';
 
 export default function DesktopMenu({ items }: { items: [] }) {
+  if (!items) {
+    return;
+  }
+
   return (
     <ul className="flex gap-6">
       {items.map((item: { title: string; slug: string }, i: number) => {

components/layout/header/header.tsx

@@ -2,9 +2,12 @@ import Cart from 'components/cart';
 import OpenCart from 'components/cart/open-cart';
 import Logo from 'components/ui/logo/logo';
 
+import { getMainMenu } from '@/lib/sanity/sanity.fetch';
 import Link from 'next/link';
 import { Suspense } from 'react';
+import DesktopMenu from './desktop-menu/desktop-menu';
 import HeaderRoot from './header-root';
+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';
@@ -14,10 +17,10 @@ interface HeaderProps {
   locale: string;
 }
 export default async function Header({ locale }: HeaderProps) {
-  // const params = {
+  const params = {
-  //   locale: locale
+    locale: locale
-  // };
+  };
-  // const mainMenu = await getCachedClient()(categoriesQuery, params);
+  const mainMenu = await getMainMenu(params.locale);
 
   return (
     <HeaderRoot>
@@ -25,7 +28,7 @@ export default async function Header({ locale }: HeaderProps) {
         <div className="relative flex w-full items-center justify-between px-4 py-2 lg:px-8 2xl:px-16">
           <div className="-translate-x-2 transform md:hidden">
             <Suspense fallback={<OpenMobileMenu />}>
-              {/* <MobileMenuModal items={mainMenu} /> */}
+              <MobileMenuModal items={mainMenu} />
             </Suspense>
           </div>
 
@@ -40,7 +43,9 @@ export default async function 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">
-            <Suspense>{/* <DesktopMenu items={mainMenu} /> */}</Suspense>
+            <Suspense>
+              <DesktopMenu items={mainMenu} />
+            </Suspense>
           </div>
           <div className="flex translate-x-2 transform justify-end space-x-1">
             <Suspense fallback={<OpenSearch />}>

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

@@ -6,12 +6,16 @@ import { useState } from 'react';
 import OpenMobileMenu from './open-mobile-menu';
 
 interface MobileMenuModalProps {
-  items: [];
+  items: [] | null;
 }
 
 export default function MobileMenuModal({ items }: MobileMenuModalProps) {
   const [isOpen, setIsOpen] = useState(false);
 
+  if (!items) {
+    return;
+  }
+
   return (
     <>
       <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>

lib/sanity/queries.tsx

@@ -269,7 +269,7 @@ export const categoryQuery = `*[_type == "category" && slug.current == $slug &&
 }`;
 
 // Categories query
-export const categoriesQuery = `*[_type == "category" && language == $locale] | order(title asc) {
+export const mainMenuQuery = `*[_type == "category" && language == $locale] | order(title asc) {
   _type,
   title,
   "slug": slug.current,

lib/sanity/sanity.fetch.ts

@@ -7,9 +7,9 @@ import { draftMode } from 'next/headers'
 
 import { revalidateSecret } from './sanity.api'
 
-import { categoryQuery, homePageQuery, pageQuery, productQuery, searchPageQuery } from './queries'
+import { categoryQuery, homePageQuery, mainMenuQuery, pageQuery, productQuery, searchPageQuery } from './queries'
 
-import { CategoryPayload, HomePagePayload, PagePayload, ProductPayload, SearchPayload } from './sanity.types'
+import { CategoryPayload, HomePagePayload, MainMenuPayload, PagePayload, ProductPayload, SearchPayload } from './sanity.types'
 
 export const token = process.env.SANITY_API_READ_TOKEN
 
@@ -56,7 +56,7 @@ export function getHomePage(locale: string) {
   return sanityFetch<HomePagePayload | null>({
     query: homePageQuery,
     params: { locale },
-    tags: ['home', 'products', 'categories', 'page'],
+    tags: ['home', 'products', 'categories', 'page', 'menu'],
   })
 }
 
@@ -90,4 +90,12 @@ export function getSearch(slug: string, locale: string) {
     params: { slug, locale },
     tags: ['search'],
   })
+}
+
+export function getMainMenu(locale: string) {
+  return sanityFetch<MainMenuPayload | null>({
+    query: mainMenuQuery,
+    params: { locale },
+    tags: ['menu'],
+  })
 }

lib/sanity/sanity.types.ts

@@ -58,4 +58,10 @@ export interface SearchPayload {
     description?: string;
     image: Image
   }
+}
+
+export interface MainMenuPayload {
+  title?: string
+  _type?: string
+  items: []
 }

lib/sanity/utils/get-preview-url.ts

@@ -3,6 +3,7 @@ import { isDev, SanityDocument } from 'sanity'
 import { localStorefrontPreviewUrl, publicStorefrontPreviewUrl } from '../constants'
 
 const SANITY_STUDIO_API_READ_TOKEN = "skYG2HXNga8uxSL7rFIreJEnP0SdVjCZ2nzB8rUHD4wRWxXPGceXTuR5vCVBP99mWZ9ULhghmpUyX7EtzDmJusSk6Gwvdr3nLAsdWI9ZktIWvSWUNpHbu0Xfrrt0UUaktrLglk7ToABvjXlaPHLpOIR3dnjl4MGByutPmyra0b5t20kgDrmF"
+
 // Customise this function to show the correct URL based on the current document
 export default async function getPreviewUrl(doc: SanityDocument) {
 

package.json

@@ -42,7 +42,7 @@
     "clsx": "^1.2.1",
     "framer-motion": "^8.5.5",
     "is-empty-iterable": "^3.0.0",
-    "next": "13.4.13",
+    "next": "13.4.19",
     "next-intl": "2.19.1",
     "next-sanity": "^5.4.2",
     "react": "18.2.0",

pnpm-lock.yaml

@@ -75,14 +75,14 @@ dependencies:
     specifier: ^3.0.0
     version: 3.0.0
   next:
-    specifier: 13.4.13
+    specifier: 13.4.19
-    version: 13.4.13(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
+    version: 13.4.19(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
   next-intl:
     specifier: 2.19.1
-    version: 2.19.1(next@13.4.13)(react@18.2.0)
+    version: 2.19.1(next@13.4.19)(react@18.2.0)
   next-sanity:
     specifier: ^5.4.2
-    version: 5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.13)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
+    version: 5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.19)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11)
   react:
     specifier: 18.2.0
     version: 18.2.0
@@ -1284,8 +1284,8 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@next/env@13.4.13:
+  /@next/env@13.4.19:
-    resolution: {integrity: sha512-fwz2QgVg08v7ZL7KmbQBLF2PubR/6zQdKBgmHEl3BCyWTEDsAQEijjw2gbFhI1tcKfLdOOJUXntz5vZ4S0Polg==}
+    resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==}
     dev: false
 
   /@next/eslint-plugin-next@13.4.13:
@@ -1294,8 +1294,8 @@ packages:
       glob: 7.1.7
     dev: true
 
-  /@next/swc-darwin-arm64@13.4.13:
+  /@next/swc-darwin-arm64@13.4.19:
-    resolution: {integrity: sha512-ZptVhHjzUuivnXMNCJ6lER33HN7lC+rZ01z+PM10Ows21NHFYMvGhi5iXkGtBDk6VmtzsbqnAjnx4Oz5um0FjA==}
+    resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -1303,8 +1303,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64@13.4.13:
+  /@next/swc-darwin-x64@13.4.19:
-    resolution: {integrity: sha512-t9nTiWCLApw8W4G1kqJyYP7y6/7lyal3PftmRturIxAIBlZss9wrtVN8nci50StDHmIlIDxfguYIEGVr9DbFTg==}
+    resolution: {integrity: sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -1312,8 +1312,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu@13.4.13:
+  /@next/swc-linux-arm64-gnu@13.4.19:
-    resolution: {integrity: sha512-xEHUqC8eqR5DHe8SOmMnDU1K3ggrJ28uIKltrQAwqFSSSmzjnN/XMocZkcVhuncuxYrpbri0iMQstRyRVdQVWg==}
+    resolution: {integrity: sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1321,8 +1321,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl@13.4.13:
+  /@next/swc-linux-arm64-musl@13.4.19:
-    resolution: {integrity: sha512-sNf3MnLAm8rquSSAoeD9nVcdaDeRYOeey4stOWOyWIgbBDtP+C93amSgH/LPTDoUV7gNiU6f+ghepTjTjRgIUQ==}
+    resolution: {integrity: sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1330,8 +1330,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu@13.4.13:
+  /@next/swc-linux-x64-gnu@13.4.19:
-    resolution: {integrity: sha512-WhcRaJJSHyx9OWmKjjz+OWHumiPZWRqmM/09Bt7Up4UqUJFFhGExeztR4trtv3rflvULatu9IH/nTV8fUUgaMA==}
+    resolution: {integrity: sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1339,8 +1339,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl@13.4.13:
+  /@next/swc-linux-x64-musl@13.4.19:
-    resolution: {integrity: sha512-+Y4LLhOWWZQIDKVwr2R17lq2KSN0F1c30QVgGIWfnjjHpH8nrIWHEndhqYU+iFuW8It78CiJjQKTw4f51HD7jA==}
+    resolution: {integrity: sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1348,8 +1348,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc@13.4.13:
+  /@next/swc-win32-arm64-msvc@13.4.19:
-    resolution: {integrity: sha512-rWurdOR20uxjfqd1X9vDAgv0Jb26KjyL8akF9CBeFqX8rVaBAnW/Wf6A2gYEwyYY4Bai3T7p1kro6DFrsvBAAw==}
+    resolution: {integrity: sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -1357,8 +1357,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc@13.4.13:
+  /@next/swc-win32-ia32-msvc@13.4.19:
-    resolution: {integrity: sha512-E8bSPwRuY5ibJ3CzLQmJEt8qaWrPYuUTwnrwygPUEWoLzD5YRx9SD37oXRdU81TgGwDzCxpl7z5Nqlfk50xAog==}
+    resolution: {integrity: sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -1366,8 +1366,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc@13.4.13:
+  /@next/swc-win32-x64-msvc@13.4.19:
-    resolution: {integrity: sha512-4KlyC6jWRubPnppgfYsNTPeWfGCxtWLh5vaOAW/kdzAk9widqho8Qb5S4K2vHmal1tsURi7Onk2MMCV1phvyqA==}
+    resolution: {integrity: sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -6090,7 +6090,7 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /next-intl@2.19.1(next@13.4.13)(react@18.2.0):
+  /next-intl@2.19.1(next@13.4.19)(react@18.2.0):
     resolution: {integrity: sha512-fk+IGWXxA+UOk+3rIhQqSPYxka+Hk9qKaIpbeF3nNlf8dp1td0oT6srVrPw/uZl5Qoj8El3qQ2mVd3RTLA25cg==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -6099,12 +6099,12 @@ packages:
     dependencies:
       '@formatjs/intl-localematcher': 0.2.32
       negotiator: 0.6.3
-      next: 13.4.13(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
+      next: 13.4.19(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       use-intl: 2.19.1(react@18.2.0)
     dev: false
 
-  /next-sanity@5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.13)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
+  /next-sanity@5.4.2(@sanity/client@6.4.4)(@sanity/icons@2.4.1)(@sanity/types@3.15.0)(@sanity/ui@1.7.4)(@types/styled-components@5.1.26)(next@13.4.19)(react@18.2.0)(sanity@3.15.0)(styled-components@5.3.11):
     resolution: {integrity: sha512-gLpS0GlapXtDjRUaPcZ9DUeiNSznhtqh0kyxygQS9MDtecCiphVAhXYwvJMQcxfY1u5KVWAxZMyy+Bs6h8G+jA==}
     engines: {node: '>=16.14'}
     peerDependencies:
@@ -6126,7 +6126,7 @@ packages:
       '@sanity/webhook': 2.0.0
       '@types/styled-components': 5.1.26
       groq: 3.15.0
-      next: 13.4.13(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
+      next: 13.4.19(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       sanity: 3.15.0(@types/node@18.13.0)(@types/react@18.2.19)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11)
       styled-components: 5.3.11(@babel/core@7.22.10)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)
@@ -6134,8 +6134,8 @@ packages:
       - supports-color
     dev: false
 
-  /next@13.4.13(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0):
+  /next@13.4.19(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-A3YVbVDNeXLhWsZ8Nf6IkxmNlmTNz0yVg186NJ97tGZqPDdPzTrHotJ+A1cuJm2XfuWPrKOUZILl5iBQkIf8Jw==}
+    resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==}
     engines: {node: '>=16.8.0'}
     hasBin: true
     peerDependencies:
@@ -6149,7 +6149,7 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.4.13
+      '@next/env': 13.4.19
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
       caniuse-lite: 1.0.30001519
@@ -6160,15 +6160,15 @@ packages:
       watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.13
+      '@next/swc-darwin-arm64': 13.4.19
-      '@next/swc-darwin-x64': 13.4.13
+      '@next/swc-darwin-x64': 13.4.19
-      '@next/swc-linux-arm64-gnu': 13.4.13
+      '@next/swc-linux-arm64-gnu': 13.4.19
-      '@next/swc-linux-arm64-musl': 13.4.13
+      '@next/swc-linux-arm64-musl': 13.4.19
-      '@next/swc-linux-x64-gnu': 13.4.13
+      '@next/swc-linux-x64-gnu': 13.4.19
-      '@next/swc-linux-x64-musl': 13.4.13
+      '@next/swc-linux-x64-musl': 13.4.19
-      '@next/swc-win32-arm64-msvc': 13.4.13
+      '@next/swc-win32-arm64-msvc': 13.4.19
-      '@next/swc-win32-ia32-msvc': 13.4.13
+      '@next/swc-win32-ia32-msvc': 13.4.19
-      '@next/swc-win32-x64-msvc': 13.4.13
+      '@next/swc-win32-x64-msvc': 13.4.19
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros