include selectedPage of EnsembleMenu in js context and bindings

Author: anserwaseem

apps/kitchen-sink/src/ensemble/widgets/Header.yaml

@@ -2,7 +2,7 @@ Widget:
   inputs:
     - message
   onLoad:
-    executeCode: 
+    executeCode:
       body: |
         console.log("hello from header", message);
       onComplete:
@@ -58,6 +58,8 @@ Widget:
             styles:
               gap: 10
             children:
+              - Text:
+                  text: Selected Page ${selectedPage}
               - Avatar:
                   styles:
                     backgroundColor: "#171B2A"

packages/runtime/src/runtime/menu.tsx

@@ -166,10 +166,12 @@ export const EnsembleMenu: React.FC<{
   const [isCollapsed, setIsCollapsed] = useState<boolean>(
     type === EnsembleMenuModelType.Drawer,
   );
+  const [selectedItem, setSelectedItem] = useState<string | undefined>();
 
   const outletContext = {
     isMenuCollapsed: isCollapsed,
     setMenuCollapsed: setIsCollapsed,
+    selectedPage: selectedItem,
   };
   const { id, items: rawItems, styles, header, footer, onCollapse } = menu;
   // custom items may contain their own bindings to be evaluated in dynamic context
@@ -178,15 +180,21 @@ export const EnsembleMenu: React.FC<{
   );
 
   const { values } = useRegisterBindings(
-    { itemInputs, styles, header, footer, isCollapsed },
+    {
+      itemInputs,
+      styles,
+      header,
+      footer,
+      isCollapsed,
+      selectedPage: selectedItem,
+    },
     id,
     {
       setIsCollapsed,
     },
   );
 
   const location = useLocation();
-  const [selectedItem, setSelectedItem] = useState<string | undefined>();
 
   const items = useMemo(
     () =>