score:1

import React, { useState } from 'react';
import './navbar.css';
import Logo from '../../assets/img/ubuntu.jpg';
import { Dropdown } from '../ui/dropdown/Dropdown';

export const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [style, setStyle] = useState(true);
    const [styleIcon, setStyleIcon] = useState(true);

    const toggling = () => {
        setIsOpen(!isOpen);
        changeStyle();
        changeStyleIcon();
    };
    const changeStyle = () => {
        setStyle(!style);
    };
    const changeStyleIcon = () => {
        setStyleIcon(!styleIcon);
    };

    const handleClickHeadings = ['Enterprise', 'Developer'];

    return (
        <>
            <div className="div_main_navbar">
                <div className="div_main_title">
                    <div className="div_main_button">
                        <img className="img_logo" src={Logo} alt="logo" />
                    </div>
                    {handleClickHeadings.map((heading) => {
                        return (
                            <HandleClickDiv
                                heading={heading}
                                styleIcon={styleIcon}
                                isOpen={isOpen}
                                setIsOpen={setIsOpen}
                            />
                        );
                    })}
                    <div
                        className={
                            style ? 'div_main_button' : 'div_main_button_change_color'
                        }
                        onClick={toggling}
                    >
                        <strong className="label_strong">Community</strong>
                        <div className="div_icon">
                            <i
                                className={
                                    styleIcon ? 'fa-solid fa-angle-down' : 'fa-solid fa-angle-up'
                                }
                            ></i>
                        </div>
                    </div>
                    <div
                        className={
                            style ? 'div_main_button' : 'div_main_button_change_color'
                        }
                        onClick={toggling}
                    >
                        <strong className="label_strong">Download</strong>
                        <div className="div_icon">
                            <i
                                className={
                                    styleIcon ? 'fa-solid fa-angle-down' : 'fa-solid fa-angle-up'
                                }
                            ></i>
                        </div>
                    </div>
                </div>
                <div className="div_main_search_signin">
                    <div className="div_main_se_in">
                        <strong className="label_strong">Search</strong>
                    </div>
                    <div className="div_main_se_in">
                        <strong className="label_strong">Sign in</strong>
                    </div>
                </div>
            </div>
            {isOpen && <Dropdown />}
        </>
    );
};

score:2

import React, { useState } from 'react';
import './navbar.css';
import Logo from '../../assets/img/ubuntu.jpg'
import { Dropdown } from '../ui/dropdown/Dropdown';

const BUTTONS = {
   enterprise: 1,
   developer: 2,
}

export const Navbar = () => {

    const [isOpen, setIsOpen] = useState(false);
    const [style, setStyle] = useState(true);
    const [styleIcon, setStyleIcon] = useState(true);
    const [isActive, setIsActive] = useState(); //leave it empty as no active buttons initially

    const handleClick = (buttonId) => {
        setIsActive(buttonId);
        setIsOpen(!isOpen);
    };

    const toggling = () => {
        setIsOpen(!isOpen);
        changeStyle();
        changeStyleIcon();
    };
    const changeStyle = () => {
        setStyle(!style);
    };
    const changeStyleIcon = () => {
        setStyleIcon(!styleIcon);
    };
return (
        <>
            <div className="div_main_navbar">
                <div className="div_main_title">
                    <div className="div_main_button">
                        <img className="img_logo" src={Logo} alt="logo" />
                    </div>
                    <div  
                        style={{
                            backgroundColor: isActive === BUTTONS.enterprise ? 'salmon' : '',
                            color: isActive === BUTTONS.enterprise ? 'white' : '',
                        }}
                        onClick={() => handleClick(BUTTONS.enterprise)}
                    >
                        <strong className="label_strong">Enterprise</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div
                        style={{
                            backgroundColor: isActive === BUTTONS.developer ? 'salmon' : '',
                            color: isActive === BUTTONS.developer ? 'white' : '',
                        }}
                        onClick={() => handleClick(BUTTONS.developer)}
                    >
                        <strong className="label_strong">Developer</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Community</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Download</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                </div>
                <div className="div_main_search_signin">
                    <div className="div_main_se_in">
                        <strong className="label_strong">Search</strong>            
                    </div>
                    <div className="div_main_se_in">
                        <strong className="label_strong">Sign in</strong>
                    </div>
                </div>
                
            </div>
            {
                isOpen && (
                    <Dropdown/>
                )
            }
        </>
    )
}

Related Query

More Query from same tag