aside-menu-mrf/components/AsideMenu.js

This library adds a side menu to the project.

import "../styles/global.css";
import styles from "./styles.module.css";

import menu from "../assets/icons/menu-regular-24.png";
import logout from "../assets/icons/log-out-regular-24.png";
import chevron from "../assets/icons/chevron-down-regular-24.png";
import { useState } from "react";

const MenuContainer = props => {
    return (
        <section className={styles.asideMenu}>
            <div className={styles.container}>
                <LogoDetails
                    logo={props.logo}
                    companyName={props.companyName}
                />
                <div className={styles.menuOptions}>
                    {props.children}
                </div>
                <AccountDetails
                    accountUser={props.accountUser}
                    accountAcessType={props.accountAcessType}
                />
            </div>
        </section>
    );
}

const LogoDetails = props => {
    return (
        <div className={styles.logoDetails}>
            <div className={styles.logo}>
                <img src={props.logo} alt="Logo Empel" />
                <span>{props.companyName}</span>
            </div>
            <img src={menu} alt="Menu" />
        </div>
    );
}

const NavLinks = props => {
    return (
        <ul className={styles.navLinks}>
            {props.children}
        </ul>
    );
}

const NavLink = props => {
    const [active, setActive] = useState(false);
    return (
        <li className={styles.navLink} onMouseLeave={() => setActive(false)} onMouseEnter={() => setActive(true)}>
            <a href="/">
                <div className={styles.link}>
                    <img src={props.icon} alt="Icon"></img>
                    <span>{props.name}</span>
                </div>
                <img src={chevron} alt="Icon" className={(active && props.children) ? styles.rotateArrow : styles.notRotateArrow}></img>
            </a>
            {
                active ? props.children : <></>
            }
        </li >
    );
}

const SubNavLinks = props => {
    return (
        <ul className={styles.subNavLinks}>
            {props.children}
        </ul>
    );
}

const SubNavLink = props => {
    return (
        <li className={styles.subNavLink}>
            <a href="/">{props.name}</a>
        </li>
    );
}

const AccountDetails = props => {
    return (
        <div className={styles.accoutDetails}>
            <div className={styles.account}>
                <div className={styles.accProfile}></div>
                <div className={styles.accInfo}>
                    <span>{props.accountUser}</span>
                    <span>{props.accountAcessType}</span>
                </div>
            </div>
            <img src={logout} alt="Icon logout"></img>
        </div>
    );
}

export {
    MenuContainer,
    NavLinks,
    NavLink,
    SubNavLinks,
    SubNavLink
}