I tried to devide this code into two components, i mean the component that should work on client side (react hooks, …) and to the component that work on server side (async, await, …). But nothing came of it and i decided to return my code to the initial state for ur understanding what i mean
Navbar.tsx
"use client";
import Link from "next/link";
import MaxWidthWrapper from "./MaxWidthWrapper";
import { buttonVariants } from "./ui/button";
import {
Menu,
MenuButton,
MenuItem,
MenuItems,
Transition,
} from "@headlessui/react";
import { Fragment, useState } from "react";
import { cn } from "@/lib/utils";
import { useRef } from "react";
import Image from "next/image";
import { Globe, ChevronDownIcon } from "lucide-react";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
const Navbar = async ({ className }: { className?: string }) => {
const { getUser } = getKindeServerSession();
const user = await getUser();
const isAdmin = user?.email === process.env.ADMIN_EMAIL;
const productsItems = [
{
header: "Header 1",
items: {
list: ["Item1"],
href: "#",
},
},
{
header: "Header 2",
items: {
list: ["Item1"],
href: "#",
},
},
{
header: "Header 3",
items: {
list: ["Item1"],
href: "#",
},
},
{
header: "Header 4",
items: {
list: ["Item1"],
href: "#",
},
},
{
header: "Header 5",
items: {
list: ["Item1"],
href: "#",
},
},
{
header: "Header 6",
items: {
list: ["Item1"],
href: "#",
},
},
];
const triggerRef = useRef<HTMLButtonElement | null>(null);
const timeOutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const handleEnter = (isOpen: boolean) => {
timeOutRef.current && clearTimeout(timeOutRef.current);
!isOpen && triggerRef.current?.click();
};
const handleLeave = (isOpen: boolean, timeoutDuration: number) => {
timeOutRef.current = setTimeout(() => {
isOpen && triggerRef.current?.click();
}, timeoutDuration);
};
const language = [
{
code: "ru",
link: "/flag-round-ru.png",
},
{
code: "en",
link: "/flag-round-uk.png",
},
];
return (
<nav className="sticky z-[100] h-20 inset-x-0 top-0 w-full border-b border-gray-200 bg-white/75 backdrop-blur-lg transition-all">
<MaxWidthWrapper>
<div className="flex justify-between h-20 w-full border-b border-zinc-200">
<div className="h-full flex items-center ustify-start flex-none w-1/3">
<Menu as="div" className={cn("relative", className)}>
{({ open }) => (
<div
onMouseEnter={() => handleEnter(open)}
onMouseLeave={() => handleLeave(open, 100)}
>
<MenuButton
ref={triggerRef}
className={buttonVariants({
size: "sm",
variant: "transparent",
underline: "left",
})}
>
Option 1
<ChevronDownIcon
aria-hidden="true"
className="size-4 ml-1"
/>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<MenuItems
transition
anchor="bottom start"
className="translate-y-6 size-full bg-white text-sm/6 text-black px-4 transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
>
<div className="flex gap-x-28 px-14 p-6 ">
{productsItems.map((item) => (
<MenuItem
as="div"
key={item.header}
className="relative w-36"
>
<div className="flex flex-col items-center w-32">
<div>
<p
className={buttonVariants({
size: "lg",
variant: "none",
})}
>
{item.header}
<span className="absolute inset-0" />
</p>
</div>
<div className="z-10 text-center mt-5">
<Link
key={item.items.href}
href={item.items.href}
className={buttonVariants({
size: "base",
variant: "transparent",
})}
>
<ul>
{item.items.list.map((k) => (
<li key={k} className="py-2">
{k}
</li>
))}
</ul>
</Link>
</div>
</div>
</MenuItem>
))}
</div>
</MenuItems>
</Transition>
</div>
)}
</Menu>
</div>
<div className="h-full flex items-center flex-none">
<Image
src="/LOGO_2.png"
className="size-14"
width={100}
height={100}
alt="image"
/>
</div>
<div className="h-full flex items-center justify-end flex-none w-1/3 space-x-3">
{user ? (
<>
<Link
href="/api/auth/logout"
className={buttonVariants({
size: "sm",
variant: "ghost",
})}
>
Sign Out
</Link>
<div className="h-8 w-px bg-zinc-200 hidden sm:block" />
<div
className={buttonVariants({
size: "icon",
className: "hidden sm:flex items-center gap-1",
})}
>
<Globe className="h-5 w-5" />
</div>
{isAdmin ? (
<Link
href="/api/auth/logout"
className={buttonVariants({
size: "sm",
variant: "ghost",
})}
>
Dashboard
</Link>
) : null}
<Menu as="div" className={cn("relative")}>
<MenuButton
className={buttonVariants({
size: "icon",
className: "hidden sm:flex items:center gap-1",
})}
>
<Globe className="size-5" />
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<MenuItems
transition
anchor="bottom"
className="translate-y-5 rounded-lg bg-white text-sm/6 text-black transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
>
<div className="flex flex-col py-2">
{language.map((item) => (
<MenuItem
as="div"
key={item.code}
className={buttonVariants({
variant: "none",
})}
>
<div className="flex justify-evenly items-center">
<Image
src={item.link}
className="size-5"
width={100}
height={100}
alt="image"
/>
<p className="uppercase px-2">
{item.code}
<span className="absolute inset-0" />
</p>
</div>
<div className="my-1 h-px bg-white/5" />
</MenuItem>
))}
</div>
</MenuItems>
</Transition>
</Menu>
</>
) : (
<>
<Link
href="/api/auth/register"
className={buttonVariants({
size: "sm",
variant: "ghost",
})}
>
Sign up
</Link>
<Link
href="/api/auth/login"
className={buttonVariants({
size: "sm",
variant: "ghost",
})}
>
Log in
</Link>
<div className="h-8 w-px bg-zinc-200 hidden sm:block" />
<Menu as="div" className={cn("relative")}>
<MenuButton
className={buttonVariants({
size: "icon",
className: "hidden sm:flex items:center gap-1",
})}
>
<Globe className="size-5" />
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<MenuItems
transition
anchor="bottom"
className="translate-y-5 rounded-lg bg-white text-sm/6 text-black transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
>
<div className="flex flex-col py-2">
{language.map((item) => (
<MenuItem
as="div"
key={item.code}
className={buttonVariants({
variant: "none",
})}
>
<div className="flex justify-evenly items-center">
<Image
src={item.link}
className="size-5"
width={100}
height={100}
alt="image"
/>
<p className="uppercase px-2">
{item.code}
<span className="absolute inset-0" />
</p>
</div>
<div className="my-1 h-px bg-white/5" />
</MenuItem>
))}
</div>
</MenuItems>
</Transition>
</Menu>
</>
)}
</div>
</div>
</MaxWidthWrapper>
</nav>
);
};
export default Navbar;
Error: this method must be invoked in a node.js environment
Call Stack
createKindeServerClient
node_modules.pnpm@[email protected]node_modules@kinde-osskinde-typescript-sdkdistsdkclientsserverindex.js (7:1)
<unknown>
node_modules.pnpm@[email protected]_@[email protected][email protected]_@[email protected]_react-do_6wdbuzfuwlamiqxzpqmf3ejtvunode_modules@kinde-osskinde-auth-nextjsdistserverindex.js (1:15358)
(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_react-do_6wdbuzfuwlamiqxzpqmf3ejtvu/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/index.js
file:/C:/Users/Khusan/OneDrive/Desktop/milliy/.next/static/chunks/app/layout.js (28:1)
i described what i tried above in the description of my question, can u give solution to this problem, please
New contributor
Xusan Nishonov is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.