From 2018d83e1cd3df486c1ef29956e3e0401a0ab850 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 5 Apr 2022 09:17:02 +0100
Subject: [PATCH] Navigation: Add persistence to collapsible nav items (#47292)

---
 public/app/core/components/NavBar/Next/NavBarMenu.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/app/core/components/NavBar/Next/NavBarMenu.tsx b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
index e5c17517721..3c7bfe2b442 100644
--- a/public/app/core/components/NavBar/Next/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
@@ -9,6 +9,7 @@ import { NavBarMenuItem } from './NavBarMenuItem';
 import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu';
 import { isMatchOrChildMatch } from '../utils';
 import { NavBarToggle } from './NavBarToggle';
+import { useLocalStorage } from 'react-use';
 
 export interface Props {
   activeItem?: NavModelItem;
@@ -217,6 +218,7 @@ function CollapsibleNavItem({
   className?: string;
 }) {
   const styles = useStyles2(getCollapsibleStyles);
+  const [sectionExpanded, setSectionExpanded] = useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false);
 
   return (
     <li className={cx(styles.menuItem, className)}>
@@ -235,7 +237,8 @@ function CollapsibleNavItem({
       </NavBarItemWithoutMenu>
       <div className={styles.collapsibleSectionWrapper}>
         <CollapsableSection
-          isOpen={false}
+          isOpen={Boolean(sectionExpanded)}
+          onToggle={(isOpen) => setSectionExpanded(isOpen)}
           className={styles.collapseWrapper}
           contentClassName={styles.collapseContent}
           label={