Skip to content

Commit

Permalink
Merge pull request #279 from Verifieddanny/feat-273
Browse files Browse the repository at this point in the history 
Feat 273
CLOSES #79
  • Loading branch information
@BigBen-7
BigBen-7 authored Mar 9, 2025
2 parents 028a9a1 + 6c7ddf2 commit 00c9c37
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 96 deletions.
4 changes: 2 additions & 2 deletions frontend/app/(root)/profile/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react";
import Profile from "@/components/Profile";
import ProfilePage from "@/components/Profile";

const page = () => {
return (
<div>
<Profile />
<ProfilePage />
</div>
);
};
Expand Down
260 changes: 166 additions & 94 deletions frontend/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,195 @@
"use client";

import React, { useState } from "react";
import React, { useState, useRef, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import DewordleIcon from "@/assets/dewordleIcon.svg";
import {
BarChartIcon as ChartNoAxesColumn,
Settings,
CircleHelp,
BarChartIcon,
Settings as SettingsIcon,
Bell,
HelpCircle,
LogOut,
ChevronDown
} from "lucide-react";
import LeaderBoardModal from "./LeaderBoardModal";
import { HelpGuide } from "./HelpGuide";
import { Setting } from "./Settings";

const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
const [isLeaderboardOpen, setIsLeaderboardOpen] = useState(false);
const [isHelpGuideOpen, setIsHelpGuideOpen] = useState(false);
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const [isProfileOpen, setIsProfileOpen] = useState(false);
const dropdownRef = useRef(null);
const profileButtonRef = useRef(null);
const router = useRouter();

const user = {
name: "John Stones",
email: "[email protected]",
avatar: "/avatar.jpg"
};

const toggleMenu = () => {
setIsOpen(!isOpen);
};

const toggleProfileDropdown = () => {
setIsProfileOpen(!isProfileOpen);
};

// Close dropdown when clicking outside
useEffect(() => {
const handleClickOutside = (event) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target) &&
profileButtonRef.current &&
!profileButtonRef.current.contains(event.target)
) {
setIsProfileOpen(false);
}
};

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

// Navigation handlers
const handleNavigation = (path) => {
setIsProfileOpen(false);
router.push(path);
};

return (
<div className="navbar bg-[#FAF7F7] shadow-md h-[70px] bg-background ">
<div className="navbar bg-white shadow-md h-[70px]">
<div className="w-full max-w-[1440px] mx-auto flex items-center justify-between px-4 lg:px-14">
{/* Navbar Start: Dewordle Icon */}
{/* Navbar Start: Dewordle Logo */}
<div className="navbar-start flex items-center">
<Image
src={DewordleIcon}
alt="Dewordle icon"
width={200}
height={150}
className="flex-shrink-0"
/>
<Link href="/" className="flex items-center">
<Image src={DewordleIcon} alt="logo" width={147} height={44} quality={90}/>
</Link>
</div>

{/* Navbar End: Icons and Connect Button */}
<div className="navbar-end hidden md:flex items-center gap-6 text-[#29296E] dark:text-[#B14CF9]">
{/* Icons */}
<button onClick={() => setIsLeaderboardOpen(true)}>
<ChartNoAxesColumn
color="#29296E"
size={24}
className="hover:scale-110 hover:shadow-lg transition-transform"
/>
</button>
<button onClick={() => setIsSettingsOpen(true)}>
<Settings
color="#29296E"
size={24}
className="hover:scale-110 hover:shadow-lg transition-transform"
/>
</button>
{/* Navbar End: User Profile and Help */}
<div className="navbar-end flex items-center gap-x-12 mt-4">
{/* User Profile Button */}
<div className="relative">
<button
ref={profileButtonRef}
onClick={toggleProfileDropdown}
className="flex items-center gap-2 text-[#29296E] font-medium"
>
<div className="w-8 h-8 rounded-full overflow-hidden flex items-center justify-center border-2 border-[#29296E]">
{user.avatar ? (
<Image
src={user.avatar}
alt={user.name}
width={32}
height={32}
className="object-cover"
/>
) : (
<span className="text-sm font-medium text-[#29296E]">
{user.name.charAt(0)}
</span>
)}
</div>
<span className="hidden sm:inline">Hi John</span>
<ChevronDown size={16} />
</button>

{/* Profile Dropdown */}
{isProfileOpen && (
<div
ref={dropdownRef}
className="absolute -right-20 mt-2 bg-white rounded-lg shadow-lg py-4 z-50 w-[20rem]"
>
{/* Profile Info */}
<div className="flex flex-col items-center justify-center px-4 py-4">
<div className="w-20 h-20 rounded-full overflow-hidden flex items-center justify-center border-4 border-[#29296E] mb-2">
{user.avatar ? (
<Image
src={user.avatar}
alt={user.name}
width={80}
height={80}
className="object-cover"
/>
) : (
<span className="text-2xl font-medium text-[#29296E]">
{user.name.charAt(0)}
</span>
)}
</div>
<h3 className="text-xl font-semibold text-center">{user.name}</h3>
<p className="text-sm text-gray-500 text-center">{user.email}</p>

<button
onClick={() => handleNavigation('/profile')}
className="w-full mt-3 py-2 bg-[#29296E] text-white font-medium rounded-full"
>
View Profile
</button>
</div>

{/* Menu Items */}
<div className="mt-2">
<button
onClick={() => handleNavigation('/setting')}
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 bg-gray-100"
>
<SettingsIcon size={18} className="text-[#29296E]" />
<span>Settings</span>
</button>

<button
onClick={() => handleNavigation('/stats')}
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3"
>
<BarChartIcon size={18} className="text-[#29296E]" />
<span>Stats</span>
</button>

<button
onClick={() => handleNavigation('/notifications')}
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3"
>
<Bell size={18} className="text-[#29296E]" />
<span>Notifications</span>
</button>

<div className="mt-12">
<button
onClick={() => handleNavigation('/logout')}
className="w-full px-4 py-2 text-left flex items-center gap-3"
>
<LogOut size={18} className="text-[#29296E]" />
<span>Log Out</span>
</button>
</div>
</div>
</div>
)}
</div>

<button onClick={() => setIsHelpGuideOpen(true)}>
<CircleHelp
color="#29296E"
size={24}
className="hover:scale-110 hover:shadow-lg transition-transform"
/>
{/* Help Button */}
<button
onClick={() => setIsHelpGuideOpen(true)}
className="flex items-center text-[#29296E]"
>
<HelpCircle size={24} />
<span className="ml-1 hidden sm:inline">Help</span>
</button>

{/* Connect Button */}
<button className="bg-[#29296E] w-[150px] h-[39px] text-white text-sm font-semibold rounded-[15px] flex items-center justify-center transform transition-transform hover:scale-110 hover:shadow-lg">
Connect
</button>
<button className="bg-[#29296E] w-[150px] h-[39px] text-white text-sm font-semibold rounded-full flex items-center justify-center transform transition-transform hover:scale-110 hover:shadow-lg">
Connect
</button>
</div>

{/* Hamburger Menu */}
{/* Mobile Menu */}
<div className="md:hidden">
<button
onClick={toggleMenu}
Expand All @@ -91,63 +212,14 @@ const Navbar = () => {
</button>
</div>

{/* Dropdown Menu */}
{isOpen && (
<div className="absolute top-[85px] left-0 w-full bg-white shadow-lg rounded-lg py-2 z-50">
<div className="flex flex-col items-center gap-4 py-2">
{/* Icons */}
<div className="flex justify-center gap-6 text-[#29296E] dark:text-[#B14CF9]">
<button onClick={() => setIsLeaderboardOpen(true)}>
<ChartNoAxesColumn
color="#29296E"
size={32}
className="hover:scale-110 hover:shadow-lg transition-transform cursor-pointer"
/>
</button>

<button onClick={() => setIsSettingsOpen(true)}>
<Settings
color="#29296E"
size={32}
className="hover:scale-110 hover:shadow-lg transition-transform cursor-pointer"
/>
</button>

<CircleHelp
color="#29296E"
size={32}
className="hover:scale-110 hover:shadow-lg transition-transform cursor-pointer"
/>
</div>

{/* Connect Button */}
<button className="bg-[#29296E] w-[150px] h-[39px] text-white text-sm font-semibold rounded-[15px] flex items-center justify-center transform transition-transform hover:scale-110 hover:shadow-lg mt-4">
Connect
</button>
</div>
</div>
)}

{/* Leaderboard Modal */}
<LeaderBoardModal
isOpen={isLeaderboardOpen}
onClose={() => setIsLeaderboardOpen(false)}
/>

{/* Help Guide Modal */}
<HelpGuide
isOpen={isHelpGuideOpen}
onClose={() => setIsHelpGuideOpen(false)}
/>

{/* Setting modal components */}
<Setting
isOpen={isSettingsOpen}
onClose={() => setIsSettingsOpen(false)}
/>
</div>
</div>
);
};

export default Navbar;
export default Navbar;
Binary file added frontend/public/avatar.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 00c9c37

Please sign in to comment.