Automatically update the expandedKeys when using setActiveItemKey in …

…useSideMenu api (#424)

src/composables/useSideMenu.js

@@ -53,14 +53,41 @@ export function useSideMenu(_items, opts = {}) {
 		return expandedKeys;
 	}
 
+	function findParentKeys(items, key, parents = []) {
+		for (const item of items) {
+			// if item key matches the active key, return the item parents
+			if (item.key === key) {
+				return parents;
+			}
+
+			// if the item has nested items, continue searching
+			if (item.items) {
+				const result = findParentKeys(item.items, key, [...parents, item.key]);
+				if (result) {
+					return result;
+				}
+			}
+		}
+
+		// if the key was not found, return null
+		return null;
+	}
+
 	function setActiveItemKey(key = '') {
 		activeItemKey.value = key;
+
+		const parentKeys = findParentKeys(items.value, key);
+		if (parentKeys) {
+			setExpandedKeys([...parentKeys, ...Object.keys(_expandedKeys)]);
+		}
 	}
 
 	function compareUrlPaths(url1, url2) {
-		const parsedUrl1 = new URL(url1);
-		const parsedUrl2 = new URL(url2);
+		const parsedUrl1 = isValidURL(url1) ? new URL(url1) : false;
+		const parsedUrl2 = isValidURL(url2) ? new URL(url2) : false;
 		return (
+			parsedUrl1 &&
+			parsedUrl2 &&
 			parsedUrl1.pathname === parsedUrl2.pathname &&
 			parsedUrl1.hostname === parsedUrl2.hostname
 		);
@@ -110,6 +137,15 @@ export function useSideMenu(_items, opts = {}) {
 		return result;
 	}
 
+	function isValidURL(string) {
+		try {
+			new URL(string);
+			return true;
+		} catch (_) {
+			return false;
+		}
+	}
+
 	const sideMenuProps = computed(() => ({
 		items: items.value,
 		expandedKeys: expandedKeys.value,

src/composables/useSideMenu.mdx

@@ -102,7 +102,7 @@ const {selectedItem} = useSideMenu(items, 'menuItem2_1'); // will return {label:
 
 ### setActiveItemKey
 
-This function allows you to set a new active item key dynamically from within your component or from other components that consume the `useSideMenu` composable. It accepts a string that represents the key of the item you want to set as active. This value will be assigned to the `activeItemKey` ref.
+This function allows you to set a new active item key dynamically from within your component or from other components that consume the `useSideMenu` composable. It accepts a string that represents the key of the item you want to set as active. This value will be assigned to the `activeItemKey` ref. Additionally, the function updates the `expandedKeys` to include the parent keys of the active item, while retaining the initially expanded keys set in the API.
 
 ```javascript
 const {activeItemKey, setActiveItemKey} = useSideMenu(items, {