menu.tsx

// @computer_modules

import { useSystem, useSession } from "@/Stores/index.tsx";
import { MenuLink, MenuLogo, MenuNotifications, MenuProfile, MenuSearch } from "@/Modules/Computer/Components/index.tsx";

const MenuLeft = function() {
    const { user } = useSession();
    const { Translation } = useSystem();
    return (
        <div className="flex justify-center items-center gap-4">
            <MenuLogo/>
            <div className="flex justify-center">
                { (user && user.type !== "clientOf") &&
                    <MenuLink link="/dashboard" name={Translation.menu.dashboard} id="/dashboard"/>
                }
                <MenuLink link="/devices" name={Translation.menu.devices} id={["/devices", "/groups", "/stock", "/clients", "/cameras", "/chips"]}/>
                <MenuLink link="/wip" name={Translation.menu.resales} id="/resales"/>
                <MenuLink link="/wip" name={Translation.menu.requests} id="/requests"/>
                <MenuLink link="/financial" name={Translation.menu.financial} id="/financial"/>
            </div>
        </div>
    );
};

const MenuRight = function() {
    return (
        <div className="flex items-center gap-4">
            <MenuSearch/>
            <MenuNotifications/>
            <MenuProfile/>
        </div>
    );
};

const Menu = function () {
    return (
        <div className="bg-highlight border-b border-neutral flex justify-center h-24 shadow-style-cloud transition-all">
            <div className="w-desktop flex gap-8 justify-between">
                <MenuLeft/>
                <MenuRight/>
            </div>
        </div>
    );
};

export default Menu;