close when clicking just the icon (#47331)

This commit is contained in:
Ashley Harrison
2022-04-05 16:16:05 +01:00
committed by GitHub
parent a5b2ef3116
commit 9b61f1cd9f

View File

@@ -184,7 +184,7 @@ function NavItem({
if (linkHasChildren(link)) { if (linkHasChildren(link)) {
return ( return (
<CollapsibleNavItem link={link} isActive={isMatchOrChildMatch(link, activeItem)}> <CollapsibleNavItem onClose={onClose} link={link} isActive={isMatchOrChildMatch(link, activeItem)}>
<ul className={styles.children}> <ul className={styles.children}>
{link.children.map( {link.children.map(
(childLink) => (childLink) =>
@@ -210,7 +210,12 @@ function NavItem({
); );
} else if (link.id === 'saved-items') { } else if (link.id === 'saved-items') {
return ( return (
<CollapsibleNavItem link={link} isActive={isMatchOrChildMatch(link, activeItem)} className={styles.savedItems}> <CollapsibleNavItem
onClose={onClose}
link={link}
isActive={isMatchOrChildMatch(link, activeItem)}
className={styles.savedItems}
>
<em className={styles.savedItemsText}>No saved items</em> <em className={styles.savedItemsText}>No saved items</em>
</CollapsibleNavItem> </CollapsibleNavItem>
); );
@@ -301,11 +306,13 @@ function CollapsibleNavItem({
isActive, isActive,
children, children,
className, className,
onClose,
}: { }: {
link: NavModelItem; link: NavModelItem;
isActive?: boolean; isActive?: boolean;
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
onClose: () => void;
}) { }) {
const styles = useStyles2(getCollapsibleStyles); const styles = useStyles2(getCollapsibleStyles);
const [sectionExpanded, setSectionExpanded] = useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false); const [sectionExpanded, setSectionExpanded] = useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false);
@@ -317,7 +324,10 @@ function CollapsibleNavItem({
label={link.text} label={link.text}
url={link.url} url={link.url}
target={link.target} target={link.target}
onClick={link.onClick} onClick={() => {
link.onClick?.();
onClose();
}}
className={styles.collapsibleMenuItem} className={styles.collapsibleMenuItem}
> >
{link.img && ( {link.img && (