Ignore:
Timestamp:
01/21/25 03:08:24 (2 weeks ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
0c6b92a
Message:

F4 Finalna Verzija

File:
1 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/components/Profile/Profile.jsx

    r0c6b92a r79a0317  
    1 import React, { useState, useRef, useEffect, useContext } from "react";
    2 import { useNavigate, Link } from "react-router-dom";
     1import React, { useState, useRef, useEffect } from "react";
     2import ReactDOM from "react-dom";
     3import { useNavigate } from "react-router-dom";
    34import profile from "../../assets/person_icon.png";
    45import styles from "./Profile.module.css";
    … …  
    89    const { username, isAuthenticated } = useAppContext();
    910    const [open, setOpen] = useState(false);
    10     const menuRef = useRef(null);
     11    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
    1112    const imgRef = useRef(null);
    1213    const navigate = useNavigate();
    … …  
    1617    useEffect(() => {
    1718        const handleClickOutside = (e) => {
    18             if (menuRef.current && imgRef.current) {
    19                 if (!menuRef.current.contains(e.target) && !imgRef.current.contains(e.target)) {
    20                     setOpen(false);
    21                 }
     19            if (imgRef.current && !imgRef.current.contains(e.target)) {
     20                setOpen(false);
    2221            }
    2322        };
    … …  
    3029    }, []);
    3130
     31    const toggleMenu = () => {
     32        if (imgRef.current) {
     33            const rect = imgRef.current.getBoundingClientRect();
     34            setMenuPosition({
     35                top: rect.bottom + window.scrollY,
     36                left: rect.left + window.scrollX,
     37            });
     38        }
     39        setOpen(!open);
     40    };
     41
    3242    const handleMenuClick = (menu) => {
    3343        if (menu === "My Maps") {
    … …  
    3646            localStorage.removeItem("token");
    3747            window.location.reload();
     48        } else if (menu === "Login") {
     49            navigate("/Login");
    3850        }
    3951        setOpen(false);
    4052    };
    4153
     54    const renderDropdown = () => {
     55        if (!open) return null;
     56
     57        return ReactDOM.createPortal(
     58            <div
     59                className={styles.dropdownMenu}
     60                style={{
     61                    position: "absolute",
     62                    top: menuPosition.top,
     63                    left: menuPosition.left,
     64                }}
     65            >
     66                {isAuthenticated && <div className={styles.username}>{username}</div>}
     67                <ul className={styles.menuList}>
     68                    {menus.map((menu) => (
     69                        <li
     70                            key={menu}
     71                            className={styles.menuItem}
     72                            onClick={() => handleMenuClick(menu)}
     73                        >
     74                            {menu}
     75                        </li>
     76                    ))}
     77                </ul>
     78            </div>,
     79            document.body
     80        );
     81    };
     82
    4283    return (
    43         <div className={position === "fixed" ? styles.fixedProfileContainer : styles.inlineProfileContainer}>
     84        <div
     85            className={
     86                position === "fixed" ? styles.fixedProfileContainer : styles.inlineProfileContainer
     87            }
     88        >
    4489            <div className={styles.profileWrapper}>
    45                 <div className={styles.profileIconContainer} onClick={() => setOpen(!open)}>
    46                     <img src={profile} alt="profile" className={styles.profileImage} ref={imgRef} />
     90                <div
     91                    className={styles.profileIconContainer}
     92                    onClick={toggleMenu}
     93                    ref={imgRef}
     94                >
     95                    <img src={profile} alt="profile" className={styles.profileImage} />
    4796                </div>
    48                 {open && (
    49                     <div ref={menuRef} className={styles.dropdownMenu}>
    50                         {isAuthenticated && <div className={styles.username}>{username}</div>}
    51                         <ul className={styles.menuList}>
    52                             {menus.map((menu) =>
    53                                 menu === "Login" ? (
    54                                     <li key={menu} className={styles.menuItem}>
    55                                         <Link to="/login" className={styles.linkStyle}>{menu}</Link>
    56                                     </li>
    57                                 ) : (
    58                                     <li key={menu} onClick={() => handleMenuClick(menu)} className={styles.menuItem}>
    59                                         {menu}
    60                                     </li>
    61                                 )
    62                             )}
    63                         </ul>
    64                     </div>
    65                 )}
     97                {renderDropdown()}
    6698            </div>
    6799        </div>
Note: See TracChangeset for help on using the changeset viewer.