feat(navigation): add pinning for sidebar menu items

packages/app-admin-ui/src/Navigation/PinnableMenuItem.tsx

@@ -21,7 +21,7 @@ type PinnableMenuItemProps = {
  * @param name - The unique name of the menu item.
  * @returns The localStorage key string for the pinned state.
  */
-export const PINNED_KEY = (name: string) => `navigation/${name}/pinned`;
+export const pinnedKey = (name: string) => `navigation/${name}/pinned`;
 
 /**
  * The localStorage key for the order of pinned menu items.
@@ -61,7 +61,7 @@ const parseOrder = (order: unknown): string[] => {
  * @note The pinned state and order are persisted in localStorage.
  */
 const usePinnedMenuItem = (name: string) => {
-    const pinKey = PINNED_KEY(name);
+    const pinKey = pinnedKey(name);
     const pinOrder = useLocalStorageValue(PINNED_ORDER_KEY);
     const isPinned = useLocalStorageValue(pinKey);
     const { set, remove } = useLocalStorage();

packages/app-admin-ui/src/Navigation/PinnedMenuItems.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { AdminConfig, useLocalStorageValues, useLocalStorageValue } from "@webiny/app-admin";
-import { PINNED_KEY, PINNED_ORDER_KEY, PinnableMenuItem } from "./PinnableMenuItem.js";
+import { pinnedKey, PINNED_ORDER_KEY, PinnableMenuItem } from "./PinnableMenuItem.js";
 import type { MenuConfig } from "@webiny/app-admin/config/AdminConfig/Menu.js";
 import { useSidebar } from "@webiny/admin-ui";
 
@@ -60,7 +60,7 @@ const getPinnableMenus = (menuItems: PinnedMenuItemsProps["menuItems"]) =>
  * @returns Array of local storage key strings.
  */
 const getPinnableKeys = (menus: PinnedMenuItemsProps["menuItems"]) =>
-    menus.map(({ name }) => PINNED_KEY(name));
+    menus.map(({ name }) => pinnedKey(name));
 
 /**
  * Parses the pinned order from a raw local storage value.
@@ -98,8 +98,16 @@ const getSortedPinnedItems = (
     pinnedStates: Record<string, boolean>,
     pinnedOrder: string[]
 ) => {
-    const pinned = menus.filter(({ name }) => pinnedStates[PINNED_KEY(name)]);
-    return pinned.sort((a, b) => pinnedOrder.indexOf(a.name) - pinnedOrder.indexOf(b.name));
+    const pinned = menus.filter(({ name }) => pinnedStates[pinnedKey(name)]);
+
+    return pinned.sort((a, b) => {
+        const aIdx = pinnedOrder.indexOf(a.name);
+        const bIdx = pinnedOrder.indexOf(b.name);
+        return (
+            (aIdx === -1 ? Number.MAX_SAFE_INTEGER : aIdx) -
+            (bIdx === -1 ? Number.MAX_SAFE_INTEGER : bIdx)
+        );
+    });
 };
 
 /**
@@ -115,8 +123,8 @@ const getSortedPinnedItems = (
  * <PinnedMenuItems menuItems={menus} />
  */
 export const PinnedMenuItems = ({ menuItems }: PinnedMenuItemsProps) => {
-    const pinnableMenus = useMemo(() => getPinnableMenus(menuItems), [menuItems]);
-    const pinnableKeys = useMemo(() => getPinnableKeys(pinnableMenus), [pinnableMenus]);
+    const pinnableMenus = getPinnableMenus(menuItems);
+    const pinnableKeys = getPinnableKeys(pinnableMenus);
     const pinnedStates = useLocalStorageValues(pinnableKeys);
     const rawPinnedOrder = useLocalStorageValue(PINNED_ORDER_KEY);
     const pinnedOrder = useMemo(() => parsePinnedOrder(rawPinnedOrder), [rawPinnedOrder]);