@kadconsulting/dry
Version:
KAD Reusable Component Library
34 lines • 2.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import './SubNavigation.scss';
// TODO-DRY: icon needs to be easer to use
import Icon from '../../Icons/Icon/Icon';
import { ChevronDown, ChevronUp } from '../../Icons/paths';
import { IconSizes } from '../../Icons/Icon/IconTypes';
import { Link } from '../../@primitives';
const SubNavigationItem = ({ subNavItem, depth, }) => {
const [isOpen, setIsOpen] = useState(false);
const hasSubRoutes = subNavItem.subRoutes && Object.keys(subNavItem.subRoutes).length > 0;
const toggleDropdown = (event) => {
event.stopPropagation(); // Stop event from bubbling up
setIsOpen(!isOpen);
};
return (_jsxs("li", { className: `subnavigation-list-item ${isOpen ? 'open' : 'closed'} ${hasSubRoutes ? 'has-subroutes' : ''}`, children: [_jsxs("div", { className: 'flex', onClick: hasSubRoutes ? toggleDropdown : undefined, children: [subNavItem.icon && (_jsx("div", { className: 'icon-container', children: subNavItem?.icon })), _jsx(Link, { value: subNavItem.name, className: 'nav-bar-link', href: `/${subNavItem.path}` }), hasSubRoutes && (_jsxs("span", { className: 'subnavigation-dropdown-indicator', children: [!isOpen && (_jsx(Icon, { color: '#667085', Path: ChevronDown, size: IconSizes.SMALL })), isOpen && (_jsx(Icon, { color: '#667085', Path: ChevronUp, size: IconSizes.SMALL }))] }))] }), hasSubRoutes && isOpen && (_jsx("ul", { className: `subnavigation-sub-list depth-${depth}`, children: subNavItem.subRoutes &&
Object.keys(subNavItem.subRoutes).map((key) => {
if (!subNavItem.subRoutes)
return null;
return (_jsx(SubNavigationItem, { subNavItem: subNavItem.subRoutes[key], depth: depth + 1 }, key));
}) }))] }));
};
const SubNavigation = ({ subNavigation }) => {
return (_jsx("ul", { className: 'subnavigation-list', children: Object.keys(subNavigation).map((key) => {
const subNavItem = subNavigation[key];
if (!subNavItem) {
console.warn(`No sub-navigation item for key: ${key}`);
return null;
}
return (_jsx(SubNavigationItem, { subNavItem: subNavItem, depth: 0 }, key));
}) }));
};
export default SubNavigation;
//# sourceMappingURL=SubNavigation.js.map