@shopgate/engage
Version:
Shopgate's ENGAGE library.
49 lines (48 loc) • 1.61 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { INDEX_PATH } from '@shopgate/pwa-common/constants/RoutePaths';
import SideNavigationCategories from "./SideNavigationCategories";
import SideNavigationLinks from "./SideNavigationLinks";
import SideNavigationItem from "./SideNavigationItem";
import { useSideNavigation } from "./SideNavigation.hooks";
import { container } from "./SideNavigationContent.style";
/**
* SideNavigationContent component.
* @param {Object} props - The component props.
* @param {Object} [props.classNames] - The class names for the navigation visibility.
* @returns {JSX.Element} The rendered component.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SideNavigationContent = ({
classNames
}) => {
const {
isVisible
} = useSideNavigation();
const wrapperClass = useMemo(() => {
if (!classNames) {
return '';
}
const {
visible = '',
hidden = ''
} = classNames;
return isVisible ? visible : hidden;
}, [classNames, isVisible]);
return /*#__PURE__*/_jsx("div", {
className: wrapperClass,
children: isVisible && /*#__PURE__*/_jsx("nav", {
className: container,
children: /*#__PURE__*/_jsxs("ul", {
children: [/*#__PURE__*/_jsx(SideNavigationItem, {
href: INDEX_PATH,
label: "navigation.home"
}), /*#__PURE__*/_jsx(SideNavigationCategories, {}), /*#__PURE__*/_jsx(SideNavigationLinks, {})]
})
})
});
};
SideNavigationContent.defaultProps = {
classNames: null
};
export default SideNavigationContent;