Ignore:
Timestamp:
02/05/26 18:59:39 (5 months ago)
Author:
Filip Gavrilovski <filipgavrilovski28@…>
Branches:
main
Children:
cb4a1da
Parents:
15782a6
Message:

add landing page with partial mock data

File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/pages/Nav.tsx

    r15782a6 r694fc25  
     1import { useEffect, useRef, useState } from "react";
    12import { Link } from "react-router-dom";
    23import { toast } from "react-toastify";
    … …  
    56import { useAuth } from "../context/authContext";
    67
    7 const Nav = () => {
     8interface NavProps {
     9        isSidebarOpen?: boolean;
     10        onToggleSidebar?: () => void;
     11}
     12
     13const Nav = ({ isSidebarOpen = false, onToggleSidebar }: NavProps) => {
    814        const { user, setUser, isAuthLoading } = useAuth();
     15        const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     16        const dropdownRef = useRef<HTMLDivElement>(null);
    917
    1018        const handleLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
    … …  
    1321                        await axiosInstance.post("/auth/logout");
    1422                        setUser(undefined);
     23                        setIsDropdownOpen(false);
    1524                        toast.success("Logout successful!");
    1625                } catch (error) {
    … …  
    2029        };
    2130
     31        useEffect(() => {
     32                const handleClickOutside = (event: MouseEvent) => {
     33                        if (
     34                                dropdownRef.current &&
     35                                !dropdownRef.current.contains(event.target as Node)
     36                        ) {
     37                                setIsDropdownOpen(false);
     38                        }
     39                };
     40
     41                document.addEventListener("mousedown", handleClickOutside);
     42                return () => {
     43                        document.removeEventListener("mousedown", handleClickOutside);
     44                };
     45        }, []);
     46
    2247        return (
    23                 <div className="bg-gray-800 p-4 flex justify-between items-center">
    24                         <Link to="/" className="text-white text-lg font-semibold">
    25                                 <img src={Logo} alt="Finkwave Logo" className="h-12 w-auto" />
    26                         </Link>
     48                <div
     49                        className={`bg-gray-800 p-4 flex justify-between items-center fixed top-0 right-0 z-50 transition-all duration-300 ${
     50                                isSidebarOpen ? "left-64" : "left-0"
     51                        }`}
     52                >
     53                        <div className="flex items-center gap-4">
     54                                {onToggleSidebar && (
     55                                        <button
     56                                                onClick={onToggleSidebar}
     57                                                className="text-white hover:text-[#1db954] transition-colors p-2"
     58                                                aria-label="Toggle sidebar"
     59                                        >
     60                                                <svg
     61                                                        className="w-6 h-6"
     62                                                        fill="none"
     63                                                        stroke="currentColor"
     64                                                        viewBox="0 0 24 24"
     65                                                >
     66                                                        <path
     67                                                                strokeLinecap="round"
     68                                                                strokeLinejoin="round"
     69                                                                strokeWidth={2}
     70                                                                d="M4 6h16M4 12h16M4 18h16"
     71                                                        />
     72                                                </svg>
     73                                        </button>
     74                                )}
     75                                <Link to="/" className="text-white text-lg font-semibold">
     76                                        <img src={Logo} alt="Finkwave Logo" className="h-12 w-auto" />
     77                                </Link>
     78                        </div>
    2779
    2880                        <div className="flex items-center space-x-4">
    … …  
    3082                                        <div className="flex items-center space-x-3">
    3183                                                {user ? (
    32                                                         <div className="flex items-center space-x-3">
    33                                                                 <div className="flex items-center space-x-2 bg-slate-700 rounded-lg px-3 py-2">
     84                                                        <div className="relative" ref={dropdownRef}>
     85                                                                <button
     86                                                                        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
     87                                                                        className="focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full"
     88                                                                >
    3489                                                                        {user.profilePhoto ? (
    3590                                                                                <img
    3691                                                                                        src={`${baseURL}/${user.profilePhoto}`}
    3792                                                                                        alt={`${user.username}'s profile`}
    38                                                                                         className="w-8 h-8 rounded-full object-cover"
     93                                                                                        className="w-10 h-10 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
    3994                                                                                />
    4095                                                                        ) : (
    41                                                                                 <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
    42                                                                                         <span className="text-white text-sm font-semibold">
     96                                                                                <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all">
     97                                                                                        <span className="text-white text-lg font-semibold">
    4398                                                                                                {user.username.charAt(0).toUpperCase()}
    4499                                                                                        </span>
    45100                                                                                </div>
    46101                                                                        )}
     102                                                                </button>
    47103
    48                                                                         <div className="text-white">
    49                                                                                 <p className="text-sm font-medium">{user.username}</p>
    50                                                                                 <p className="text-xs text-gray-300 capitalize">
    51                                                                                         {user.role}
    52                                                                                 </p>
     104                                                                {isDropdownOpen && (
     105                                                                        <div className="absolute right-0 mt-2 w-48 bg-gray-700 rounded-lg shadow-lg py-1 z-50">
     106                                                                                <Link
     107                                                                                        to="#"
     108                                                                                        className="block px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
     109                                                                                        onClick={() => setIsDropdownOpen(false)}
     110                                                                                >
     111                                                                                        Account
     112                                                                                </Link>
     113                                                                                <button
     114                                                                                        onClick={handleLogout}
     115                                                                                        className="w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
     116                                                                                >
     117                                                                                        Log out
     118                                                                                </button>
    53119                                                                        </div>
    54                                                                 </div>
    55                                                                 <button
    56                                                                         onClick={handleLogout}
    57                                                                         className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm
    58                                     font-medium transition-colors duration-200 flex items-center space-x-1 cursor-pointer"
    59                                                                 >
    60                                                                         Logout
    61                                                                 </button>
     120                                                                )}
    62121                                                        </div>
    63122                                                ) : (
Note: See TracChangeset for help on using the changeset viewer.