Adding in functionality for Wordpress Menus, and logic to switch to Sheet when menu is too big

src/components/common/Navigation.tsx

@@ -15,13 +15,9 @@ import { useMediaQuery } from "react-responsive";
 
 import { Skeleton } from "../ui/skeleton";
 import { Sheet, SheetContent, SheetHeader, SheetTrigger } from "../ui/sheet";
-import { useGetPagesQuery } from "@/services/pages";
 import { cn } from "@/utils/utils";
 import { Button } from "../ui/button";
-
-const styles = {
-  fontFamily: "'Ubuntu', sans-serif",
-};
+import { useGetMenuQuery } from "@/services/navigation";
 
 const ListItem = React.forwardRef<
   React.ElementRef<"a">,
@@ -58,7 +54,7 @@ const Navigation = (props: any): JSX.Element => {
       setColorChange(false);
     }
   };
-  const { data: pages, isSuccess, isLoading } = useGetPagesQuery();
+  const { data: menu, isSuccess, isLoading } = useGetMenuQuery("primary-menu");
   const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
   useEffect(() => {
     window.addEventListener("scroll", changeNavbarColor);
@@ -86,7 +82,7 @@ const Navigation = (props: any): JSX.Element => {
               </p>
             </div>
           </Link>
-          {isTabletOrMobile ? (
+          {isTabletOrMobile || menu?.items.length >= 4 ? (
             <Sheet>
               <SheetTrigger asChild>
                 <Button className="bg-gray-700">
@@ -121,12 +117,15 @@ const Navigation = (props: any): JSX.Element => {
                   >
                     Home
                   </Link>
-                  <Link
-                    href="/about"
-                    className="p-2"
-                  >
-                    About
-                  </Link>
+                  {menu.items?.map((link: any) => (
+                    <Link
+                      key={link.ID}
+                      href={`/${link.slug}`}
+                      className="p-2"
+                    >
+                      {link.title}
+                    </Link>
+                  ))}
                   <Link
                     href="/portfolio"
                     className="p-2"
@@ -152,14 +151,20 @@ const Navigation = (props: any): JSX.Element => {
                   Home
                 </Button>
               </Link>
-              <Link href="/about">
-                <Button
-                  variant={"ghost"}
-                  size={"lg"}
+              {menu?.items.map((link: any) => (
+                <Link
+                  key={link.ID}
+                  href={`/${link.slug}`}
+                  className="w-full"
                 >
-                  About
-                </Button>
-              </Link>
+                  <Button
+                    size={"lg"}
+                    variant={"ghost"}
+                  >
+                    {link.title}
+                  </Button>
+                </Link>
+              ))}
               <Link href="/portfolio">
                 <Button
                   variant={"ghost"}

src/lib/redux/middleware.ts

@@ -1,4 +1,5 @@
 /* Core */
+import { menusApi } from '@/services/navigation'
 import { pagesApi } from '@/services/pages'
 import { portfolioApi } from '@/services/portfolio'
 import { postsApi } from '@/services/posts'
@@ -7,6 +8,7 @@ const middleware = [
   postsApi.middleware,
   pagesApi.middleware,
   portfolioApi.middleware,
+  menusApi.middleware,
 ]
 
 export { middleware }

src/lib/redux/rootReducer.ts

@@ -1,3 +1,4 @@
+import { menusApi } from "@/services/navigation";
 import { pagesApi } from "@/services/pages";
 import { portfolioApi } from "@/services/portfolio";
 import { postsApi } from "@/services/posts";
@@ -6,4 +7,5 @@ export const reducer = {
   [postsApi.reducerPath]: postsApi.reducer,
   [pagesApi.reducerPath]: pagesApi.reducer,
   [portfolioApi.reducerPath]: portfolioApi.reducer,
+  [menusApi.reducerPath]: menusApi.reducer,
 };

src/pages/[slug].tsx

@@ -33,10 +33,14 @@ export const getStaticProps = wrapper.getStaticProps(
 );
 
 const Page = ({ page }: any) => {
+  console.log(page);
   return (
     <Internal>
-      <div className="container my-32">
-        {parser(page.content.rendered, { trim: true })}
+      <div className="container my-24 md:my-36 page-content">
+        <h1 className="text-4xl md:text-[64px] text-primary md:mb-6 font-sans font-bold">
+          {page.title.rendered}
+        </h1>
+        <div className="">{parser(page.content.rendered, { trim: true })}</div>
       </div>
     </Internal>
   );

src/pages/blog/[slug]/index.tsx

@@ -4,7 +4,6 @@ import { getPost, getPosts, getRunningQueriesThunk } from "@/services/posts";
 import { wrapper, reduxStore } from "@/lib/redux";
 import Internal from "@/components/common/Internal";
 import ScrollDown from "@/components/common/scrollDown";
-import { revalidatePath } from "next/cache";
 
 export const getStaticPaths = async () => {
   const store = reduxStore();

src/services/navigation.ts

@@ -0,0 +1,24 @@
+import { WORDPRESS_BASE_API_MENUS } from '@/utils/common-utils';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { HYDRATE } from 'next-redux-wrapper';
+
+export const menusApi: any = createApi({
+  reducerPath: 'menus',
+  baseQuery: fetchBaseQuery({ baseUrl: WORDPRESS_BASE_API_MENUS }),
+  extractRehydrationInfo(action, { reducerPath }) {
+    if(action.type === HYDRATE) {
+      return action.payload[reducerPath]
+    }
+  },
+  tagTypes: ['Menus'],
+  endpoints: (builder) => ({
+    getMenu: builder.query({
+      query: (slug: string) => `/${slug}`,
+      providesTags: ['Menus'],
+    }),
+  })
+});
+
+export const { useGetMenuQuery, util: { getRunningQueriesThunk } } = menusApi;
+
+export const { getMenu } = menusApi.endpoints;

src/styles/globals.css

@@ -60,6 +60,7 @@
 }
 
 @layer utilities {
+  /* Post Content */
   .post-content h2.wp-block-heading {
     @apply text-4xl font-bold mb-4 text-primary;
   }
@@ -69,8 +70,13 @@
   .post-content img, video {
     @apply block w-full mb-10;
   }
+  /* END Post Content */
 
-  .post-content p {
+  .post-content p,
+  .page-content p {
     @apply mb-4 text-lg text-foreground leading-8;
   }
+
+  /* Page Content */
+  /* END Page Content */
 }

src/utils/common-utils.ts

@@ -1,3 +1,4 @@
 export const WORDPRESS_BASE_API = 'https://wordpress-1110286-3894329.cloudwaysapps.com/wp-json/wp/v2';
+export const WORDPRESS_BASE_API_MENUS = 'https://wordpress-1110286-3894329.cloudwaysapps.com/wp-json/menus/v1/menus';
 export const WORDPRESS_POSTS_FIELD_FILTERS = '?_fields=id,slug,title,_links,featured_media';
 export const WORDPRESS_POST_FIELD_FILTERS = '?_fields=id,slug,title,content,date,modified';