Rev 4250 | Rev 5373 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React, { useEffect, useState, useRef } from "react";
import SocialNetworks from "../../../../dashboard/components/home-section/SocialNetworks";
import ProfileInfo from "../../../../dashboard/components/home-section/ProfileInfo";
import MyGroups from "../../../../shared/helpers/my-groups-helper/MyGroups";
import SuggestedGroupsHelper from "../../../../shared/helpers/suggested-groups-helper/SuggestedGroupsHelper";
const ResponsiveNavbar = ({ show, navbarVars }) => {
// const { authorization } = props.companyVars
// const {allowProfile, allowFollower, allowUser, allowFeed, allowJob, allowCompany, allowSetting} = authorization
const [shouldRender, setShouldRender] = useState(show);
const responsiveNavbar = useRef()
const handleUnmount = () => !show && setShouldRender(false)
useEffect(() => {
if (show) return setShouldRender(show)
}, [show]);
useEffect(() => {
const handleClickOutside = (event) => {
if (responsiveNavbar.current && !responsiveNavbar.current.contains(event.target)) {
setShouldRender(false)
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [responsiveNavbar]);
return (
<nav
className={`responsiveNavbar ${shouldRender ? 'slideIn' : 'slideOut'} p-0`}
onAnimationEnd={handleUnmount}
ref={responsiveNavbar}
>
<ProfileInfo
{...navbarVars}
headerClasses="d-flex rounded-0"
/>
<MyGroups suggestedClassname="d-block" />
<SuggestedGroupsHelper suggestedClassname='d-block' />
<SocialNetworks />
</nav>
)
}
export default ResponsiveNavbar;