'use client'
import { useState } from 'react';
import Link from 'next/link';
import Image from "next/image";
import { RegisterLink, LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";
const NavBar: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const [categoriesOpen, setCategoriesOpen] = useState(false);
const [mobileCategoriesOpen, setMobileCategoriesOpen] = useState(false);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
const toggleCategories = () => {
setCategoriesOpen(!categoriesOpen);
};
const toggleMobileCategories = () => {
setMobileCategoriesOpen(!mobileCategoriesOpen);
};
return (
<nav className="bg-white shadow-lg font-semibold relative z-50">
<div className="max-w-7xl mx-auto px-4">
<div className="flex justify-between">
<div className="flex space-x-4">
<div>
<Link href="/" className="flex items-center py-5 px-2 text-gray-600 hover:text-gray-900" passHref>
<Image src="/mainimages/logo.png" alt="Brand Logo" width="100" height="100" className="mr-1" />
</Link>
</div>
{/* Primary Navbar items */}
<div className="hidden md:flex items-center space-x-1 relative">
<div>
<button onClick={toggleCategories} className="py-5 px-3 text-gray-600 hover:text-gray-900 flex items-center relative z-50">
Categories
<svg className="h-5 w-5 ml-1 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clipRule="evenodd" />
</svg>
</button>
{categoriesOpen && (
<div className="absolute left-0 top-full z-50 mt-2 w-56 bg-white shadow-lg rounded-lg">
<div className="p-4">
<div className="group relative flex flex-col gap-y-4">
<div className="group relative flex items-start gap-x-2 rounded-lg p-2 text-sm leading-6 hover:bg-gray-50">
<div className="flex-auto">
<span className="block font-semibold text-gray-900">Creative & Visual Media</span>
<div className="pl-4 mt-2 space-y-2 font-normal">
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Graphic Design</Link>
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Video Production</Link>
</div>
</div>
</div>
<div className="group relative flex items-start gap-x-2 rounded-lg p-2 text-sm leading-6 hover:bg-gray-50">
<div className="flex-auto">
<span className="block font-semibold text-gray-900">Content Creation</span>
<div className="pl-4 mt-2 space-y-2 font-normal">
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Writing</Link>
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Translate</Link>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
<Link href="/projects" className="py-5 px-3 text-gray-600 hover:text-gray-900">
Projects
</Link>
<Link href="/blog" className="py-5 px-3 text-gray-600 hover:text-gray-900">
Blogs
</Link>
<Link href="/aboutus" className="py-5 px-3 text-gray-600 hover:text-gray-900">
About Us
</Link>
</div>
</div>
{/* Secondary Navbar items */}
<div className="hidden md:flex items-center space-x-1">
<div className="text-black hover:text-gray-600 mx-5">
<LoginLink>Login</LoginLink>
</div>
<div className="px-4 py-2 rounded-full bg-yellow-500 hover:bg-yellow-600 text-black font-semibold">
<RegisterLink>Sign Up</RegisterLink>
</div>
</div>
{/* Mobile button goes here */}
<div className="md:hidden flex items-center">
<button className="mobile-menu-button" onClick={toggleMenu}>
<svg
className="w-6 h-6 text-gray-500 hover:text-gray-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div>
</div>
{/* Mobile menu */}
<div className={`mobile-menu ${isOpen ? 'block' : 'hidden'} md:hidden`}>
<Link href="/projects" className="block py-2 px-4 text-sm hover:bg-gray-200 text-black">
Projects
</Link>
<Link href="/blog" className="block py-2 px-4 text-sm hover:bg-gray-200 text-black">
Blogs
</Link>
<Link href="/aboutus" className="block py-2 px-4 text-sm hover:bg-gray-200 text-black">
About Us
</Link>
<div className="relative">
<button onClick={toggleMobileCategories} className="block w-full text-left py-2 px-4 text-sm hover:bg-gray-200 text-black">
Categories
<svg className="inline-block w-4 h-4 ml-2 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clipRule="evenodd" />
</svg>
</button>
{mobileCategoriesOpen && (
<div className="pl-4">
<div className="py-2">
<span className="block font-semibold text-gray-900">Creative & Visual Media</span>
<div className="pl-4 mt-2 space-y-2 font-normal">
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Graphic Design</Link>
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Video Production</Link>
</div>
</div>
<div className="py-2">
<span className="block font-semibold text-gray-900">Content Creation</span>
<div className="pl-4 mt-2 space-y-2 font-normal">
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Writing</Link>
<Link href="#" className="block text-gray-600 hover:text-yellow-600">Translate</Link>
</div>
</div>
</div>
)}
</div>
<Link href="/login" className="block py-2 px-4 text-sm hover:bg-gray-200 text-black">
<LoginLink>Login</LoginLink>
</Link>
<Link href="/RegEntPage" className="block py-2 px-4 text-sm hover:bg-gray-200 text-black">
<RegisterLink>Sign Up</RegisterLink>
</Link>
</div>
</nav>
);
};
export default NavBar;
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import LogoutLink from "@kinde-oss/kinde-auth-nextjs/components";
export async function UserNav() {
const { getUser } = getKindeServerSession();
const user = await getUser();
return (
// other things..
user ? (
<>
<div className="hidden md:flex items-center space-x-1">
<div className="text-black hover:text-gray-600 mx-5">
<LogoutLink>Login</LogoutLink>
</div>
<div className="px-4 py-2 rounded-full bg-yellow-500 hover:bg-yellow-600 text-black font-semibold">
<Link href="/pages/dashbord">Dashboard</Link>
</div>
</div>
</>
) : (
<>
<div className="hidden md:flex items-center space-x-1">
<div className="text-black hover:text-gray-600 mx-5">
<LoginLink>Login</LoginLink>
</div>
<div className="px-4 py-2 rounded-full bg-yellow-500 hover:bg-yellow-600 text-black font-semibold">
<RegisterLink>Sign Up</RegisterLink>
</div>
</div>
</>
)
);
}
I need to merge these two codes. can anyone help me to make this? when i try to do it it says there is a server-side function and it cannot be used on the browser side.
I tried to merge these codes together and got an error like there is a server-side function and cannot use on the browser side
I also tried to merge these codes together and got an error message like there is a server-side function and cannot use on the browser side.
please help me to make this
New contributor
SamiBro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.