Feature: Embedded Menu is completed.

README.md

@@ -60,7 +60,7 @@ useEffect(() => {
         buttons: [
             {
                 redirectMain: "Home",
-                isCollabsable: true,
+                isCollapsible: true,
                 title: "Ana Sayfa",
                 icon: ({
                     color
@@ -76,7 +76,7 @@ useEffect(() => {
             },
             {
                 redirectMain: "Text",
-                isCollabsable: true,
+                isCollapsible: true,
                 title: "Deneme",
                 icon: ({
                     color

example/src/navigation/index.tsx

@@ -1,11 +1,14 @@
+import {
+    useEffect
+} from "react";
 import {
     View
 } from "react-native";
 import type RootStackParamList from "./type";
 import stylesheet from "./stylesheet";
 import {
-    NCoreUIKitTheme,
-    EmbeddedMenu
+    NCoreUIKitEmbeddedMenu,
+    NCoreUIKitTheme
 } from "ncore-ui-kit";
 import {
     NavigationContainer,
@@ -18,8 +21,8 @@ import {
 import {
     HomeIcon
 } from "lucide-react-native";
-import TextPage from "../pages/text";
 import Home from "../pages/home";
+import TextPage from "../pages/text";
 
 const RootStack = createNativeStackNavigator();
 
@@ -30,14 +33,9 @@ const RootNav = () => {
 
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
-    return <View
-        style={[
-            stylesheet.container
-        ]}
-    >
-        <EmbeddedMenu
-            navigation={navigation as unknown as NCoreUIKit.Navigation}
-            siteLogoProps={{
+    useEffect(() => {
+        NCoreUIKitEmbeddedMenu.load({
+            siteLogoProps: {
                 imageUrl: "https://www.nibgat.com/assets/images/logo.png",
                 onPress: () => {
                     navigation.navigate("Home");
@@ -49,11 +47,10 @@ const RootNav = () => {
                 isWorkWithAction: true,
                 subTitle: "Core Tech",
                 title: "NİBGAT® Deneme Anonim Ticaret Limited Şti."
-            }}
-            buttons={[
+            },
+            buttons: [
                 {
                     redirectMain: "Home",
-                    isCollabsable: true,
                     title: "Ana Sayfa",
                     icon: ({
                         color
@@ -63,7 +60,7 @@ const RootNav = () => {
                 },
                 {
                     redirectMain: "Home",
-                    isCollabsable: true,
+                    isCollapsible: true,
                     title: "Ana Sayfa",
                     icon: ({
                         color
@@ -79,7 +76,7 @@ const RootNav = () => {
                 },
                 {
                     redirectMain: "Text",
-                    isCollabsable: true,
+                    isCollapsible: true,
                     title: "Deneme",
                     icon: ({
                         color
@@ -97,7 +94,18 @@ const RootNav = () => {
                     title: "Text",
                     redirectMain: "TextPage"
                 }
-            ]}
+            ],
+            id: "main-menu"
+        });
+    }, []);
+
+    return <View
+        style={[
+            stylesheet.container
+        ]}
+    >
+        <NCoreUIKitEmbeddedMenu.Render
+            navigation={navigation as unknown as NCoreUIKit.Navigation}
             id="main-menu"
         />
         <RootStack.Navigator

src/components/embeddedMenu/components/menuButton/index.tsx

@@ -27,12 +27,18 @@ import RowCard from "../../../rowCard";
 
 const isPageActive = ((buttonItem: EmbeddedMenuButtonType, navigation: NCoreUIKit.Navigation) => {
     const state = navigation.getState();
-    const currentRoute = state?.routes?.[state.index];
+
+    if (!state || !state.routes) return false;
+
+    const activeIndex = state.index ?? 0;
+    const currentRoute = state?.routes?.[activeIndex];
 
     if(!currentRoute) return false;
 
     if(currentRoute.state) {
-        const nestedRoute = currentRoute.state.routes?.[currentRoute.state.index];
+        const nestedIndex = currentRoute.state.index ?? 0;
+        const nestedRoute = currentRoute.state.routes?.[nestedIndex];
+
         return nestedRoute?.name === (buttonItem.redirectSub ?? buttonItem.redirectMain);
     } else if(currentRoute.name) {
         return currentRoute.name === (buttonItem.redirectSub ?? buttonItem.redirectMain);
@@ -61,7 +67,7 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
     ] = useState<null | number>(null);
 
     const [
-        ,
+        navStateTracker,
         setNavStateTracker
     ] = useState(Date.now());
 
@@ -84,11 +90,11 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
         };
     }, [navigation]);
 
-    if(buttonItem.isCollabsable) {
+    if(buttonItem.isCollapsible) {
         useLayoutEffect(() => {
             if(measure === null) return;
 
-            if(buttonItem.isCollabs) {
+            if(buttonItem.isCollapse) {
                 Animated.timing(animatedCollabs, {
                     useNativeDriver: Platform.OS !== "web",
                     toValue: Number(measure),
@@ -104,7 +110,7 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
                 }).start();
             }
         }, [
-            buttonItem.isCollabs,
+            buttonItem.isCollapse,
             measure
         ]);
     }
@@ -120,15 +126,15 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
     }
 
     return <View
-        key={`menu-button-${id}-${buttonIndex}`}
+        key={`menu-button-${id}-${buttonIndex}-${navStateTracker.toString()}`}
     >
         <RowCard
             {...buttonItem.props}
             rightIcon={
-                isMenuCollabs && (buttonItem.isCollabsable || buttonItem.isShowRedirectIcon) ?
+                isMenuCollabs && (buttonItem.isCollapsible || buttonItem.isShowRedirectIcon) ?
                     () => {
-                        if(buttonItem.isCollabsable) {
-                            if(buttonItem.isCollabs) {
+                        if(buttonItem.isCollapsible) {
+                            if(buttonItem.isCollapse) {
                                 return <ChevronDownIcon
                                     color={isPActive ? colors.content.icon.onPrimary : colors.content.icon.low}
                                     size={18}
@@ -155,9 +161,9 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
             title={isMenuCollabs ? buttonItem.title : ""}
             icon={buttonItem.icon}
             onPress={() => {
-                if(buttonItem.isCollabsable) {
+                if(buttonItem.isCollapsible) {
                     updateMenuButtonCollabs({
-                        status: !buttonItem.isCollabs,
+                        status: !buttonItem.isCollapse,
                         buttonItem,
                         depthMap
                     });
@@ -175,13 +181,13 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
                     if(buttonItem.props?.onPress) buttonItem.props.onPress();
                 }
 
-                if(closeAction && !buttonItem.isCollabsable) closeAction();
+                if(closeAction && !buttonItem.isCollapsible) closeAction();
             }}
         />
         {
             buttonItem.subButtons && buttonItem.subButtons.length ?
                 <Animated.View
-                    onLayout={buttonItem.isCollabsable ? (event) => {
+                    onLayout={buttonItem.isCollapsible ? (event) => {
                         const height = event.nativeEvent.layout.height;
 
                         if(height !== 0 && measure === null) setMeasure(height);

src/components/embeddedMenu/components/menuButton/type.ts

@@ -6,12 +6,12 @@ import type IRowCardProps from "../../../rowCard/type";
 export type EmbeddedMenuButton = {
     subButtons?: Array<EmbeddedMenuButton>;
     isShowRedirectIcon?: NCoreUIKitIcon;
-    isCollabsable?: boolean;
+    isCollapsible?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
-    isCollabs?: boolean;
+    isCollapse?: boolean;
     title: string;
 };
 

src/components/embeddedMenu/index.tsx

@@ -25,7 +25,7 @@ import stylesheet, {
 } from "./stylesheet";
 import MenuButton from "./components/menuButton";
 import {
-    NCoreUIKitMenu,
+    NCoreUIKitEmbeddedMenu,
     NCoreUIKitTheme
 } from "../../core/hooks";
 import type {
@@ -53,7 +53,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     siteLogoProps,
     customTheme,
     navigation,
-    isCollabs,
+    isCollapse,
     onClosed,
     onOpened,
     buttons,
@@ -86,7 +86,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
         spaces
     });
 
-    const animatedX = useRef(new Animated.Value(!isCollabs ? minWidth : maxWidth)).current;
+    const animatedX = useRef(new Animated.Value(!isCollapse ? minWidth : maxWidth)).current;
 
     useImperativeHandle(
         ref,
@@ -98,8 +98,8 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     );
 
     useEffect(() => {
-        if(isCollabs !== undefined) setIsActive(isCollabs);
-    }, [isCollabs]);
+        if(isCollapse !== undefined) setIsActive(isCollapse);
+    }, [isCollapse]);
 
     useLayoutEffect(() => {
         if(isActive) {
@@ -192,7 +192,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
         depthMap: Array<number>;
         status: boolean;
     }) => {
-        const state = NCoreUIKitMenu.get({
+        const state = NCoreUIKitEmbeddedMenu.get({
             id
         });
 
@@ -211,7 +211,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                 if(index === depthMap.length - 1) {
                     return {
                         ...c_item,
-                        isCollabs: status
+                        isCollapse: status
                     };
                 }
 
@@ -226,7 +226,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
 
         state.buttons = newButtons;
 
-        NCoreUIKitMenu.update({
+        NCoreUIKitEmbeddedMenu.update({
             menuData: state,
             id: id
         });

src/components/embeddedMenu/type.ts

@@ -33,12 +33,12 @@ export type EmbeddedMenuLogoType = {
 export type EmbeddedMenuButton = {
     subButtons?: Array<EmbeddedMenuButton>;
     isShowRedirectIcon?: NCoreUIKitIcon;
-    isCollabsable?: boolean;
+    isCollapsible?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
-    isCollabs?: boolean;
+    isCollapse?: boolean;
     title: string;
 };
 
@@ -68,15 +68,15 @@ interface IEmbeddedMenuProps {
         maxWidth: number;
         minWidth: number;
     }) => ReactNode;
-    isCollabsable?: boolean;
+    isCollapsible?: boolean;
     isAutoClosed?: boolean;
+    isCollapse?: boolean;
     onOpened?: (props: {
         id?: string
     }) => void;
     onClosed?: (props: {
         id?: string
     }) => void;
-    isCollabs?: boolean;
     onClose?: (props: {
         id?: string
     }) => void;

src/components/menu/components/menuButton/index.tsx

@@ -83,11 +83,11 @@ const MenuButton: FC<IMenuButton> = ({
         };
     }, [navigation]);
 
-    if(buttonItem.isCollabsable) {
+    if(buttonItem.isCollapsible) {
         useLayoutEffect(() => {
             if(measure === null) return;
 
-            if(buttonItem.isCollabs) {
+            if(buttonItem.isCollapse) {
                 Animated.timing(animatedCollabs, {
                     useNativeDriver: Platform.OS !== "web",
                     toValue: Number(measure),
@@ -103,7 +103,7 @@ const MenuButton: FC<IMenuButton> = ({
                 }).start();
             }
         }, [
-            buttonItem.isCollabs,
+            buttonItem.isCollapse,
             measure
         ]);
     }
@@ -116,10 +116,10 @@ const MenuButton: FC<IMenuButton> = ({
         <RowCard
             {...buttonItem.props}
             rightIcon={
-                buttonItem.isCollabsable || buttonItem.isShowRedirectIcon ?
+                buttonItem.isCollapsible || buttonItem.isShowRedirectIcon ?
                     () => {
-                        if(buttonItem.isCollabsable) {
-                            if(buttonItem.isCollabs) {
+                        if(buttonItem.isCollapsible) {
+                            if(buttonItem.isCollapse) {
                                 return <ChevronDownIcon
                                     color={isPActive ? colors.content.icon.onPrimary : colors.content.icon.low}
                                     size={18}
@@ -146,9 +146,9 @@ const MenuButton: FC<IMenuButton> = ({
             title={buttonItem.title}
             icon={buttonItem.icon}
             onPress={() => {
-                if(buttonItem.isCollabsable) {
+                if(buttonItem.isCollapsible) {
                     updateMenuButtonCollabs({
-                        status: !buttonItem.isCollabs,
+                        status: !buttonItem.isCollapse,
                         buttonItem,
                         depthMap
                     });
@@ -166,13 +166,13 @@ const MenuButton: FC<IMenuButton> = ({
                     if(buttonItem.props?.onPress) buttonItem.props.onPress();
                 }
 
-                if(closeAction && !buttonItem.isCollabsable) closeAction();
+                if(closeAction && !buttonItem.isCollapsible) closeAction();
             }}
         />
         {
             buttonItem.subButtons && buttonItem.subButtons.length ?
                 <Animated.View
-                    onLayout={buttonItem.isCollabsable ? (event) => {
+                    onLayout={buttonItem.isCollapsible ? (event) => {
                         const height = event.nativeEvent.layout.height;
 
                         if(height !== 0 && measure === null) setMeasure(height);

src/components/menu/components/menuButton/type.ts

@@ -6,12 +6,12 @@ import type IRowCardProps from "../../../rowCard/type";
 export type MenuButton = {
     isShowRedirectIcon?: NCoreUIKitIcon;
     subButtons?: Array<MenuButton>;
-    isCollabsable?: boolean;
+    isCollapsible?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
-    isCollabs?: boolean;
+    isCollapse?: boolean;
     title: string;
 };
 

src/components/menu/index.tsx

@@ -54,7 +54,7 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     customTheme,
     navigation,
     modalProps,
-    isCollabs,
+    isCollapse,
     onClosed,
     onOpened,
     buttons,
@@ -115,8 +115,8 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     }, [measures]);
 
     useEffect(() => {
-        if(isCollabs !== undefined) setIsActive(isCollabs);
-    }, [isCollabs]);
+        if(isCollapse !== undefined) setIsActive(isCollapse);
+    }, [isCollapse]);
 
     useLayoutEffect(() => {
         if(isActive && isOpacityVisible) {
@@ -243,7 +243,7 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                 if(index === depthMap.length - 1) {
                     return {
                         ...c_item,
-                        isCollabs: status
+                        isCollapse: status
                     };
                 }
 

src/components/menu/type.ts

@@ -33,12 +33,12 @@ export type MenuLogoType = {
 export type MenuButton = {
     isShowRedirectIcon?: NCoreUIKitIcon;
     subButtons?: Array<MenuButton>;
-    isCollabsable?: boolean;
+    isCollapsible?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
-    isCollabs?: boolean;
+    isCollapse?: boolean;
     title: string;
 };
 
@@ -62,8 +62,9 @@ interface IMenuProps {
     buttons: Array<MenuButton>;
     isWorkWithModal?: boolean;
     modalProps?: IModalProps;
-    isCollabsable?: boolean;
+    isCollapsible?: boolean;
     isAutoClosed?: boolean;
+    isCollapse?: boolean;
     onOpened?: (props: {
         id?: string
     }) => void;
@@ -71,7 +72,6 @@ interface IMenuProps {
         id?: string
     }) => void;
     portalName?: string;
-    isCollabs?: boolean;
     logo?: MenuLogoType;
     onClose?: (props: {
         id?: string

src/context/embeddedMenu.tsx

@@ -0,0 +1,262 @@
+import {
+    type ReactNode,
+    Fragment
+} from "react";
+import {
+    type EmbeddedMenuContextType,
+    type EmbeddedMenuDataType
+} from "../types/embeddedMenu";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import {
+    uuid
+} from "../utils";
+import EmbeddedMenu from "../components/embeddedMenu";
+
+class NCoreUIKitEmbeddedMenu extends NCoreContext<EmbeddedMenuContextType, ConfigType<EmbeddedMenuContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<EmbeddedMenuDataType>
+    }) {
+        super({
+            get: () => undefined,
+            unload: () => "",
+            update: () => {},
+            close: () => {},
+            load: () => "",
+            open: () => {},
+            data: data
+        }, {
+            key: "NCoreUIKit-MenuContext"
+        });
+    };
+
+    load = (menuData: EmbeddedMenuDataType) => {
+        const currentData = this.state.data;
+
+        const menuID = menuData.id ? menuData.id : uuid();
+
+        currentData.push({
+            ...menuData,
+            id: menuID
+        });
+
+        this.setState({
+            data: currentData
+        });
+
+        return menuID;
+    };
+
+    get = ({
+        index,
+        id
+    }: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if(id) {
+            const currentIndex = currentData.findIndex(cI => cI.id === id);
+
+            return currentData[currentIndex];
+        }
+
+        if(index) {
+            return currentData[index];
+        }
+
+        return undefined;
+    };
+
+    update = ({
+        menuData,
+        index,
+        id
+    }: {
+        menuData: EmbeddedMenuDataType;
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if(id) {
+            const currentIndex = currentData.findIndex(cI => cI.id === id);
+
+            currentData[currentIndex] = menuData;
+        }
+
+        if(index) {
+            currentData[index] = menuData;
+        }
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    open = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData[keyIndex]!.isCollapse = true;
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined && currentData[props.index]) {
+            currentData[props.index!]!.isCollapse = true;
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+    };
+
+    close = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData[keyIndex]!.isCollapse = false;
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined && currentData[props.index]) {
+            currentData[props.index!]!.isCollapse = false;
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+    };
+
+    unload = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData.splice(keyIndex, 1);
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined) {
+            currentData.splice(props.index, 1);
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+
+        currentData.pop();
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    Render = ({
+        navigation,
+        children,
+        index,
+        id
+    }: {
+        navigation: NCoreUIKit.Navigation;
+        children?: ReactNode;
+        index?: number;
+        id?: string;
+    }) => {
+        const {
+            data
+        } = this.useContext();
+
+        if(id || index) {
+            const currentMenu = data.find((dItem, dIndex) => {
+                if(id) {
+                    return dItem.id === id;
+                } else {
+                    return dIndex === index;
+                }
+            });
+
+            if(!currentMenu) {
+                return null;
+            }
+
+            return <Fragment>
+                <EmbeddedMenu
+                    {...currentMenu}
+                    key={`NCoreUIKit-Menu-${currentMenu.id}`}
+                    id={currentMenu.id as string}
+                    close={() => {
+                        if(currentMenu.isAutoClosed) {
+                            this.close({
+                                id: currentMenu.id
+                            });
+                        }
+                    }}
+                    onClosed={() => {
+                        if(currentMenu.onClosed) {
+                            currentMenu.onClosed({
+                                id: currentMenu.id
+                            });
+                        }
+
+                        if(currentMenu.isAutoClosedOnClosed === undefined || currentMenu.isAutoClosedOnClosed === true) {
+                            this.close({
+                                id: currentMenu.id
+                            });
+                        }
+                    }}
+                    navigation={navigation}
+                />
+                {children}
+            </Fragment>;
+        }
+
+        return null;
+    };
+}
+export default NCoreUIKitEmbeddedMenu;

src/context/index.tsx

@@ -1,6 +1,7 @@
 import {
     type ReactNode
 } from "react";
+import NCoreUIKitEmbeddedMenu from "./embeddedMenu";
 import NCoreUIKitBottomSheet from "./bottomSheet";
 import NCoreUIKitLocalize from "./localize";
 import NCoreUIKitSnackBar from "./snackBar";
@@ -17,6 +18,7 @@ import {
 } from "../helpers/portalize";
 
 class CoreContext<T extends NCoreUIKitConfig> {
+    NCoreUIKitEmbeddedMenu: NCoreUIKitEmbeddedMenu;
     NCoreUIKitBottomSheet: NCoreUIKitBottomSheet;
     NCoreUIKitLocalize: NCoreUIKitLocalize<T>;
     NCoreUIKitSnackBar: NCoreUIKitSnackBar;
@@ -63,6 +65,10 @@ class CoreContext<T extends NCoreUIKitConfig> {
         this.NCoreUIKitMenu = new NCoreUIKitMenu({
             data: []
         });
+
+        this.NCoreUIKitEmbeddedMenu = new NCoreUIKitEmbeddedMenu({
+            data: []
+        });
     }
 
     Provider = ({
@@ -70,6 +76,7 @@ class CoreContext<T extends NCoreUIKitConfig> {
     }: {
         children: ReactNode
     }) => {
+        const EmbeddedMenuContext = this.NCoreUIKitEmbeddedMenu;
         const BottomSheetContext = this.NCoreUIKitBottomSheet;
         const LocalizeContext = this.NCoreUIKitLocalize;
         const SnackBarContext = this.NCoreUIKitSnackBar;
@@ -98,7 +105,9 @@ class CoreContext<T extends NCoreUIKitConfig> {
                                                                         <Host name="menu-system">
                                                                             <MenuContext.Provider>
                                                                                 <MenuContext.Render>
-                                                                                    {children}
+                                                                                    <EmbeddedMenuContext.Provider>
+                                                                                        {children}
+                                                                                    </EmbeddedMenuContext.Provider>
                                                                                 </MenuContext.Render>
                                                                             </MenuContext.Provider>
                                                                         </Host>

src/context/menu.tsx

@@ -108,7 +108,7 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
             const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
 
             if (keyIndex !== -1) {
-                currentData[keyIndex]!.isCollabs = true;
+                currentData[keyIndex]!.isCollapse = true;
 
                 this.setState({
                     data: currentData
@@ -119,7 +119,7 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
         }
 
         if (props && props.index !== undefined && currentData[props.index]) {
-            currentData[props.index!]!.isCollabs = true;
+            currentData[props.index!]!.isCollapse = true;
 
             this.setState({
                 data: currentData
@@ -139,7 +139,7 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
             const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
 
             if (keyIndex !== -1) {
-                currentData[keyIndex]!.isCollabs = false;
+                currentData[keyIndex]!.isCollapse = false;
 
                 this.setState({
                     data: currentData
@@ -150,7 +150,7 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
         }
 
         if (props && props.index !== undefined && currentData[props.index]) {
-            currentData[props.index!]!.isCollabs = false;
+            currentData[props.index!]!.isCollapse = false;
 
             this.setState({
                 data: currentData

src/core/hooks.ts

@@ -6,6 +6,7 @@ import type {
     LocalizeType,
     ThemesType
 } from "../types";
+import type NCoreUIKitEmbeddedMenuClass from "../context/embeddedMenu";
 import type NCoreUIKitBottomSheetClass from "../context/bottomSheet";
 import type NCoreUIKitLocalizeClass from "../context/localize";
 import type NCoreUIKitSnackBarClass from "../context/snackBar";
@@ -15,8 +16,9 @@ import type NCoreUIKitToastClass from "../context/toast";
 import type NCoreUIKitThemeClass from "../context/theme";
 import type NCoreUIKitMenuClass from "../context/menu";
 
-export let NCoreUIKitBottomSheet: NCoreUIKitBottomSheetClass;
 export let NCoreUIKitLocalize: NCoreUIKitLocalizeClass<LocalizeType>;
+export let NCoreUIKitEmbeddedMenu: NCoreUIKitEmbeddedMenuClass;
+export let NCoreUIKitBottomSheet: NCoreUIKitBottomSheetClass;
 export let NCoreUIKitTheme: NCoreUIKitThemeClass<ThemesType>;
 export let NCoreUIKitSnackBar: NCoreUIKitSnackBarClass;
 export let NCoreUIKitDialog: NCoreUIKitDialogClass;
@@ -25,6 +27,7 @@ export let NCoreUIKitToast: NCoreUIKitToastClass;
 export let NCoreUIKitMenu: NCoreUIKitMenuClass;
 
 export const initializeInstances = (NCoreUIKit: NCoreUIKitBase<NCoreUIKitConfig>) => {
+    NCoreUIKitEmbeddedMenu = NCoreUIKit.NCoreUIKitContext.NCoreUIKitEmbeddedMenu;
     NCoreUIKitBottomSheet = NCoreUIKit.NCoreUIKitContext.NCoreUIKitBottomSheet;
     NCoreUIKitLocalize = NCoreUIKit.NCoreUIKitContext.NCoreUIKitLocalize;
     NCoreUIKitSnackBar = NCoreUIKit.NCoreUIKitContext.NCoreUIKitSnackBar;

src/index.tsx

@@ -4,6 +4,7 @@ export {
 } from "./core";
 
 export {
+    NCoreUIKitEmbeddedMenu,
     NCoreUIKitBottomSheet,
     NCoreUIKitLocalize,
     NCoreUIKitSnackBar,

src/types/embeddedMenu.ts

@@ -0,0 +1,39 @@
+import type IEmbeddedMenuProps from "../components/embeddedMenu/type";
+
+export type MenuType = {
+    data?: Array<EmbeddedMenuDataType>;
+};
+
+export type EmbeddedMenuDataType = Omit<IEmbeddedMenuProps, "id" | "navigation"> & {
+    id?: string;
+};
+
+export type EmbeddedMenuContextType = {
+    load: (menuData: EmbeddedMenuDataType) => string;
+    get: (props?: {
+        index?: number;
+        id?: string;
+    }) => EmbeddedMenuDataType | undefined;
+    update: (props?: {
+        menuData: EmbeddedMenuDataType;
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<EmbeddedMenuDataType>;
+    unload: (props?: {
+        index?: number;
+        id?: string;
+    }) => string;
+    open: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+};
+
+export type EmbeddedMenuStateContextType = {
+    data: Array<EmbeddedMenuDataType>;
+};