Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added buttons in nav bar & options in profile dropdown #165

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
+71 −81
Open

Added buttons in nav bar & options in profile dropdown #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8815cd
Added border around nav menu
mehul-m-prajapati Oct 20, 2024
e65261f
Added dropdown options and remove profile details from dashboard
mehul-m-prajapati Oct 21, 2024
64efc2e
Added event listener
mehul-m-prajapati Oct 21, 2024
77a44d2
removed borders
mehul-m-prajapati Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,9 @@ export default function Page() {

return isAuthenticated ? (
<>
<div className=" w-full h-auto bg-black text-white py-[8rem] flex flex-col">
<div className="w-full h-auto bg-black text-white py-[8rem] flex flex-col">
<main className="flex-grow container mx-auto px-4 py-8 flex flex-col lg:flex-row gap-8">
{/*
<div className="flex flex-col justify-start items-center gap-24 border-white md:border rounded-md p-10">
<h1 className="text-center text-4xl font-bold">Your Profile</h1>
{loading ? (
Expand All @@ -266,10 +267,12 @@ export default function Page() {
Log out
</LogoutLink>
</div>

) : (
<h1>No user details available</h1>
)}
</div>
*/}

<div className="flex-grow space-y-8">
<div className="w-full p-2 space-y-2">
Expand Down
147 changes: 67 additions & 80 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
"use client";
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
RegisterLink,
LoginLink,
LogoutLink,
} from "@kinde-oss/kinde-auth-nextjs/components";
import { userDetails } from "../action/userDetails";
import Image from "next/image";
Expand All @@ -14,15 +15,20 @@ import { IoMoon } from "react-icons/io5";

interface User {
picture: string;
given_name: string;
family_name: string;
email: string;
}

function Header() {
const { isAuthenticated } = useKindeBrowserClient();

const [user, setUser] = useState<User | null>(null);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isDropdownOpen, setIsDropdownOpen] = useState(false); // State for dropdown
const [isDarkMode, setIsDarkMode] = useState(false);
const router = useRouter();
const dropdownRef = useRef<HTMLDivElement | null>(null); // Ref for dropdown

useEffect(() => {
userDetails()
Expand All @@ -36,6 +42,19 @@ function Header() {
});
}, []);

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsDropdownOpen(false); // Close dropdown if clicked outside
}
};

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [dropdownRef]);

const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
Expand All @@ -50,6 +69,10 @@ function Header() {
document.body.classList.toggle("white"); // Ensure dark-mode CSS is applied
};

const toggleDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
};

return (
<div className="absolute top-0 bg-transparent w-full z-[999] py-6 pr-4 md:px-4 md:py-6">
<div className="flex justify-between items-center">
Expand Down Expand Up @@ -131,100 +154,64 @@ function Header() {
function renderMenuItems() {
return (
<>
<div
className={`flex justify-center items-center gap-6 ${
isMenuOpen ? `flex-col` : `flex-row`
}`}
>
<Link
href="/"
onClick={() => handleNavigation("/")}
className="mono hover:text-gray-300"
>
Home
</Link>
<Link
href="/explore-events"
onClick={() => handleNavigation("/explore-events")}
className="mono hover:text-gray-300"
>
Explore Events
</Link>
<div className={`flex justify-center items-center gap-6 ${isMenuOpen ? `flex-col` : `flex-row`}`}>
<Link href="/" onClick={() => handleNavigation("/")} className="mono rounded-md px-4 py-2 hover:bg-gray-600 transition-colors">Home</Link>
<Link href="/explore-events" onClick={() => handleNavigation("/explore-events")} className="mono rounded-md px-4 py-2 hover:bg-gray-600 transition-colors">Explore Events</Link>
{isAuthenticated && (
<Link
href="/explore-event-space"
onClick={() => handleNavigation("/explore-event-space")}
className="mono hover:text-gray-300"
>
Explore Event Spaces
</Link>
<Link href="/explore-event-space" onClick={() => handleNavigation("/explore-event-space")} className="mono rounded-md px-4 py-2 hover:bg-gray-600 transition-colors">Explore Event Spaces</Link>
)}

<Link
href="/about"
onClick={() => handleNavigation("/about")}
className="mono hover:text-gray-300"
>
About Us
</Link>
<Link
href="/contact"
onClick={() => handleNavigation("/contact")}
className="mono hover:text-gray-300"
>
Contact
</Link>
<Link
href="/contributors"
onClick={() => handleNavigation("/contributors")}
className="mono hover:text-gray-300"
>
Contributors
</Link>
<Link href="/about" onClick={() => handleNavigation("/about")} className="mono rounded-md px-4 py-2 hover:bg-gray-600 transition-colors">About Us</Link>
<Link href="/contact" onClick={() => handleNavigation("/contact")} className="mono rounded-md px-4 py-2 hover:bg-gray-600 transition-colors">Contact</Link>
<Link href="/contributors" onClick={() => handleNavigation("/contributors")} className="mono rounded-md px-4 py-2 hover:bg-gray-600 transition-colors">Contributors</Link>
</div>
{isAuthenticated ? (
<>
<Link
onClick={() => handleNavigation("/dashboard")}
href="/dashboard"
className="mono justify-center items-center flex hover:text-gray-300"
>
<Image
src={user?.picture || "/profile.jpg"}
alt="Profile"
width={56}
height={56}
className="rounded-full size-10 border-2 border-white"
/>
</Link>
<button onClick={toggleTheme} className="bg-black p-2 rounded-md">
{isDarkMode ? (
<BsBrightnessLow size={24} />
) : (
<IoMoon size={24} />
<div className="relative" ref={dropdownRef}>
<Link onClick={toggleDropdown} href="#" className="mono justify-center items-center flex hover:text-gray-300">
<Image
src={user?.picture || "/profile.jpg"}
alt="Profile"
width={56}
height={56}
className="rounded-full size-10 border-2 border-white"
/>
</Link>
{isDropdownOpen && (
<div className="absolute right-0 mt-2 w-48 bg-black rounded-md shadow-lg z-20">
<div className="py-1 px-2 text-white-700">
<p className="font-bold">{user?.given_name} {user?.family_name}</p>
<p className="text-sm">{user?.email}</p>
</div>
<div className="flex flex-col justify-center">
<Link onClick={() => handleNavigation("/dashboard")} href="/dashboard" className="mono rounded-md px-2 py-2 hover:bg-gray-600 transition-colors">
Dashboard
</Link>
</div>
<div className="flex flex-col justify-center">
<LogoutLink
className="mono rounded-md px-2 py-2 hover:bg-gray-600 transition-colors"
postLogoutRedirectURL="/"
>
Log out
</LogoutLink>
</div>
</div>
)}
</div>
<button onClick={toggleTheme} className="bg-black p-2 rounded-md">
{isDarkMode ? <BsBrightnessLow size={24} /> : <IoMoon size={24} />}
</button>
</>
) : (
<>
<LoginLink
postLoginRedirectURL="/dashboard"
className="mono transition ease-in-out delay-100 hover:scale-105 border-white border-double border-2 hover:border-white hover:shadow-[5px_5px_0px_0px_rgb(255,255,255)] rounded-md px-4 py-1"
>
<LoginLink postLoginRedirectURL="/dashboard" className="mono transition ease-in-out delay-100 hover:scale-105 rounded-md px-4 py-1 hover:bg-gray-600 transition-colors">
Sign in
</LoginLink>
<RegisterLink
postLoginRedirectURL="/dashboard"
className="mono transition ease-in-out delay-100 hover:scale-105 border-white border-double border-2 hover:border-white hover:shadow-[5px_5px_0px_0px_rgb(255,255,255)] rounded-md px-4 py-1"
>
<RegisterLink postLoginRedirectURL="/dashboard" className="mono transition ease-in-out delay-100 hover:scale-105 rounded-md px-4 py-1 hover:bg-gray-600 transition-colors">
Sign up
</RegisterLink>
<button onClick={toggleTheme} className="bg-black p-2 rounded-md">
{isDarkMode ? (
<BsBrightnessLow size={24} />
) : (
<IoMoon size={24} />
)}
{isDarkMode ? <BsBrightnessLow size={24} /> : <IoMoon size={24} />}
</button>
</>
)}
Expand Down