leumas-private-shared/src/SideBar/AsideRender.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import { useTrail, animated } from 'react-spring';
import MonitorSelector from '../MonitorSelector/MonitorSelector';
import hoverSound from '../assets/interface-click.wav';
import clickSound from '../assets/game-click.wav';
import {playHoverSound} from "../Helpers/playHoverSound"
import {playClickSound} from "../Helpers/playClickSound"
const AsideRender = ({ links, handleLinkClick, openDropdown, setMode , leumasId, setLeumasId }) => {
    // Define the trail animation
    const hoverAudio = new Audio(hoverSound);
    const clickAudio = new Audio(clickSound);



    
    const trail = useTrail(links.length, {
        from: { transform: 'translate3d(-100%,0,0)', opacity: 0 },
        to: { transform: 'translate3d(0%,0,0)', opacity: 1 },
    });

    return (
        <>
{
    trail.map((props, index) => (
        <animated.li style={props} key={links[index].id} className="mb-2 p-2 rounded">
            <div className="flex justify-between border-2 rounded-lg hover:scale-110 hover:shadow-xl">
                <button 
                    onMouseEnter={()=>playHoverSound(hoverAudio)}
                    onClick={() => {
                        playClickSound(clickAudio);
                        handleLinkClick(links[index]);
                    }}
                    className="focus:outline-none flex-grow flex items-center  hover:border-electric-blue hover:bg-blue-500 hoverEffect  p-2 rounded-lg shadow-xl"
                >
                    <span className="flex items-center space-x-2">
                        {links[index].icon}
                        <span >{links[index].name}</span>
                    </span>
                </button>

                {/* MonitorSelector for main links */}
                <MonitorSelector 
                    componentType={links[index].component} 
                    componentProps={{ ...props }}
                />

                {/* Show dropdown icon only if there are sublinks */}
 
            </div>
            
            {openDropdown === links[index].id && (
                <div className="mt-2 bg-blue-500 rounded p-2">
                    {links[index].sublinks && 
                        <ul className="mt-2">
                            {links[index].sublinks.map(sublink => (
                                <li key={sublink.id} className="mb-1 p-2 hover:bg-blue-400 hover:border-glow">
                                    <button 
                                        className="focus:outline-none w-full flex items-center justify-between hover:border-glow"
                                        onClick={() => setMode(sublink.component)}
                                    >
                                        {sublink.name}
                                        <MonitorSelector 
                                            componentType={() => sublink.component} 
                                            componentProps={{ ...props }}
                                        />
                                    </button>
                                </li>
                            ))}
                        </ul>
                    }
                </div>
            )}
        </animated.li>
    ))
}

        </>
    );
};


export default AsideRender;