Bugfix: Menu redirect animation problems fixed.

example/src/navigation/index.tsx

@@ -19,12 +19,25 @@ import {
     createNativeStackNavigator
 } from "@react-navigation/native-stack";
 import {
+    ComponentIcon,
     HomeIcon
 } from "lucide-react-native";
-import Home from "../pages/home";
 import TextPage from "../pages/text";
+import Home from "../pages/home";
 
 const RootStack = createNativeStackNavigator();
+const ComponentsStack = createNativeStackNavigator();
+
+const ComponentsNav = () => {
+    return <ComponentsStack.Navigator
+        initialRouteName="TextPage"
+    >
+        <ComponentsStack.Screen
+            name="TextPage"
+            component={TextPage}
+        />
+    </ComponentsStack.Navigator>;
+};
 
 const RootNav = () => {
     const {
@@ -51,7 +64,8 @@ const RootNav = () => {
             buttons: [
                 {
                     redirectMain: "Home",
-                    title: "Ana Sayfa",
+                    isUseLocalize: true,
+                    title: "home",
                     icon: ({
                         color
                     }) => <HomeIcon
@@ -59,42 +73,25 @@ const RootNav = () => {
                     />
                 },
                 {
-                    redirectMain: "Home",
-                    isCollapsible: true,
-                    title: "Ana Sayfa",
-                    icon: ({
-                        color
-                    }) => <HomeIcon
-                        color={colors.content.icon[color]}
-                    />,
-                    subButtons: [
-                        {
-                            title: "Text",
-                            redirectMain: "TextPage"
-                        }
-                    ]
-                },
-                {
-                    redirectMain: "Text",
+                    redirectMain: "Components",
+                    isUseLocalize: true,
                     isCollapsible: true,
-                    title: "Deneme",
+                    title: "components",
                     icon: ({
                         color
-                    }) => <HomeIcon
+                    }) => <ComponentIcon
                         color={colors.content.icon[color]}
                     />,
                     subButtons: [
                         {
-                            title: "Noliii",
-                            redirectMain: "Home"
+                            redirectMain: "Components",
+                            redirectSub: "TextPage",
+                            title: "Text"
                         }
                     ]
-                },
-                {
-                    title: "Text",
-                    redirectMain: "TextPage"
                 }
             ],
+            isAutoClosed: true,
             id: "main-menu"
         });
     }, []);
@@ -110,14 +107,17 @@ const RootNav = () => {
         />
         <RootStack.Navigator
             initialRouteName="Home"
+            screenOptions={{
+                headerShown: false
+            }}
         >
             <RootStack.Screen
                 name="Home"
                 component={Home}
             />
             <RootStack.Screen
-                name="TextPage"
-                component={TextPage}
+                name="Components"
+                component={ComponentsNav}
             />
         </RootStack.Navigator>
     </View>;

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

@@ -16,6 +16,7 @@ import type {
 } from "./type";
 import type IEmbeddedMenuButton from "./type";
 import {
+    NCoreUIKitLocalize,
     NCoreUIKitTheme
 } from "../../../../core/hooks";
 import {
@@ -53,10 +54,16 @@ const isPageActive = (
 
     if (!state?.routes) return false;
 
+    const activeRouteName = getDeepActiveRouteName(state);
     const targetName = buttonItem.redirectSub ?? buttonItem.redirectMain;
-    if (!targetName) return false;
 
-    return getDeepActiveRouteName(state) === targetName;
+    if (targetName && activeRouteName === targetName) return true;
+
+    if (buttonItem.subButtons?.length) {
+        return buttonItem.subButtons.some(sub => isPageActive(sub, navigation));
+    }
+
+    return false;
 };
 
 const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
@@ -67,12 +74,17 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
     buttonItem,
     navigation,
     depthMap,
+    openMenu,
     id
 }) => {
     const {
         colors
     } = NCoreUIKitTheme.useContext();
 
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
     const [
         measure,
         setMeasure
@@ -146,10 +158,6 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
 
     const isPActive = isPageActive(buttonItem, navigation);
 
-    if(!isMenuCollabs && buttonItem.subButtons && buttonItem.subButtons.length) {
-        return null;
-    }
-
     if(!isMenuCollabs && !buttonItem.icon) {
         return null;
     }
@@ -159,6 +167,7 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
     >
         <RowCard
             {...buttonItem.props}
+            title={isMenuCollabs ? buttonItem.isUseLocalize ? localize(buttonItem.title as keyof NCoreUIKit.Translation) : buttonItem.title : ""}
             rightIcon={
                 isMenuCollabs && (buttonItem.isCollapsible || buttonItem.isShowRedirectIcon) ?
                     () => {
@@ -187,9 +196,18 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
             backgroundColor={isPActive ? "primary" : undefined}
             titleColor={isPActive ? "onPrimary" : undefined}
             iconColor={isPActive ? "onPrimary" : undefined}
-            title={isMenuCollabs ? buttonItem.title : ""}
             icon={buttonItem.icon}
             onPress={() => {
+                if(!isMenuCollabs && buttonItem.subButtons && buttonItem.subButtons.length) {
+                    openMenu();
+                    updateMenuButtonCollabs({
+                        status: true,
+                        buttonItem,
+                        depthMap
+                    });
+                    return;
+                }
+
                 if(buttonItem.isCollapsible) {
                     updateMenuButtonCollabs({
                         status: !buttonItem.isCollapse,
@@ -210,7 +228,7 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
                     if(buttonItem.props?.onPress) buttonItem.props.onPress();
                 }
 
-                if(closeAction && !buttonItem.isCollapsible) closeAction();
+                if(closeAction) closeAction();
             }}
         />
         {
@@ -244,6 +262,7 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
                             buttonItem={subButtonItem}
                             closeAction={closeAction}
                             navigation={navigation}
+                            openMenu={openMenu}
                             depthMap={[
                                 ...depthMap,
                                 subButtonIndex

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

@@ -4,15 +4,16 @@ import type {
 import type IRowCardProps from "../../../rowCard/type";
 
 export type EmbeddedMenuButton = {
+    title: keyof NCoreUIKit.Translation | (string & {});
     subButtons?: Array<EmbeddedMenuButton>;
     isShowRedirectIcon?: NCoreUIKitIcon;
     isCollapsible?: boolean;
+    isUseLocalize?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
     isCollapse?: boolean;
-    title: string;
 };
 
 interface IEmbeddedMenuButton {
@@ -26,6 +27,7 @@ interface IEmbeddedMenuButton {
     closeAction?: () => void;
     depthMap: Array<number>;
     isMenuCollabs: boolean;
+    openMenu: () => void;
     buttonIndex: number;
     id: string;
 };

src/components/embeddedMenu/index.tsx

@@ -98,7 +98,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     );
 
     useEffect(() => {
-        if(isCollapse !== undefined) setIsActive(isCollapse);
+        if(isCollapse !== undefined && isActive !== isCollapse) setIsActive(isCollapse);
     }, [isCollapse]);
 
     useLayoutEffect(() => {
@@ -140,11 +140,15 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     ]);
 
     const open = () => {
-        setIsActive(true);
+        NCoreUIKitEmbeddedMenu.open({
+            id
+        });
     };
 
     const close = () => {
-        setIsActive(false);
+        NCoreUIKitEmbeddedMenu.close({
+            id
+        });
     };
 
     const openAnimation = () => {
@@ -251,7 +255,11 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                 ...collapseButtonDynamicStyle
             }}
             onPress={() => {
-                setIsActive(!isActive);
+                if(isActive) {
+                    close();
+                } else {
+                    open();
+                }
             }}
         />;
     };
@@ -279,7 +287,11 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                 ...collapseButtonDynamicStyle
             }}
             onPress={() => {
-                setIsActive(!isActive);
+                if(isActive) {
+                    close();
+                } else {
+                    open();
+                }
             }}
         />;
     };
@@ -341,6 +353,9 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                 depthMap={[buttonIndex]}
                 buttonItem={buttonItem}
                 navigation={navigation}
+                openMenu={() => {
+                    open();
+                }}
                 id={id}
             />;
         });

src/components/embeddedMenu/type.ts

@@ -31,15 +31,16 @@ export type EmbeddedMenuLogoType = {
 };
 
 export type EmbeddedMenuButton = {
+    title: keyof NCoreUIKit.Translation | (string & {});
     subButtons?: Array<EmbeddedMenuButton>;
     isShowRedirectIcon?: NCoreUIKitIcon;
     isCollapsible?: boolean;
+    isUseLocalize?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
     isCollapse?: boolean;
-    title: string;
 };
 
 interface IEmbeddedMenuProps {

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

@@ -16,6 +16,7 @@ import type {
 } from "./type";
 import type IMenuButton from "./type";
 import {
+    NCoreUIKitLocalize,
     NCoreUIKitTheme
 } from "../../../../core/hooks";
 import {
@@ -53,10 +54,16 @@ const isPageActive = (
 
     if (!state?.routes) return false;
 
+    const activeRouteName = getDeepActiveRouteName(state);
     const targetName = buttonItem.redirectSub ?? buttonItem.redirectMain;
-    if (!targetName) return false;
 
-    return getDeepActiveRouteName(state) === targetName;
+    if (targetName && activeRouteName === targetName) return true;
+
+    if (buttonItem.subButtons?.length) {
+        return buttonItem.subButtons.some(sub => isPageActive(sub, navigation));
+    }
+
+    return false;
 };
 
 const MenuButton: FC<IMenuButton> = ({
@@ -72,6 +79,10 @@ const MenuButton: FC<IMenuButton> = ({
         colors
     } = NCoreUIKitTheme.useContext();
 
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
     const [
         measure,
         setMeasure
@@ -150,6 +161,7 @@ const MenuButton: FC<IMenuButton> = ({
     >
         <RowCard
             {...buttonItem.props}
+            title={buttonItem.isUseLocalize ? localize(buttonItem.title as keyof NCoreUIKit.Translation) : buttonItem.title}
             rightIcon={
                 buttonItem.isCollapsible || buttonItem.isShowRedirectIcon ?
                     () => {
@@ -178,7 +190,6 @@ const MenuButton: FC<IMenuButton> = ({
             backgroundColor={isPActive ? "primary" : undefined}
             titleColor={isPActive ? "onPrimary" : undefined}
             iconColor={isPActive ? "onPrimary" : undefined}
-            title={buttonItem.title}
             icon={buttonItem.icon}
             onPress={() => {
                 if(buttonItem.isCollapsible) {

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

@@ -4,15 +4,16 @@ import type {
 import type IRowCardProps from "../../../rowCard/type";
 
 export type MenuButton = {
+    title: keyof NCoreUIKit.Translation | (string & {});
     isShowRedirectIcon?: NCoreUIKitIcon;
     subButtons?: Array<MenuButton>;
     isCollapsible?: boolean;
+    isUseLocalize?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
     isCollapse?: boolean;
-    title: string;
 };
 
 interface IMenuButton {

src/components/menu/type.ts

@@ -31,15 +31,16 @@ export type MenuLogoType = {
 };
 
 export type MenuButton = {
+    title: keyof NCoreUIKit.Translation | (string & {});
     isShowRedirectIcon?: NCoreUIKitIcon;
     subButtons?: Array<MenuButton>;
     isCollapsible?: boolean;
+    isUseLocalize?: boolean;
     redirectMain?: string;
     props?: IRowCardProps;
     icon?: NCoreUIKitIcon;
     redirectSub?: string;
     isCollapse?: boolean;
-    title: string;
 };
 
 interface IMenuProps {

src/context/embeddedMenu.tsx

@@ -233,7 +233,8 @@ class NCoreUIKitEmbeddedMenu extends NCoreContext<EmbeddedMenuContextType, Confi
                     close={() => {
                         if(currentMenu.isAutoClosed) {
                             this.close({
-                                id: currentMenu.id
+                                id: currentMenu.id,
+                                index: index
                             });
                         }
                     }}
@@ -245,8 +246,10 @@ class NCoreUIKitEmbeddedMenu extends NCoreContext<EmbeddedMenuContextType, Confi
                         }
 
                         if(currentMenu.isAutoClosedOnClosed === undefined || currentMenu.isAutoClosedOnClosed === true) {
+                            console.log("yok bana geldi dayı ?");
                             this.close({
-                                id: currentMenu.id
+                                id: currentMenu.id,
+                                index: index
                             });
                         }
                     }}

src/context/menu.tsx

@@ -208,13 +208,14 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
 
         return <Fragment>
             {children}
-            {data.map((item: MenuDataType) => {
+            {data.map((item: MenuDataType, index: number) => {
                 return <Menu
                     key={`NCoreUIKit-Menu-${item.id}`}
                     id={item.id as string}
                     close={() => {
                         if(item.isAutoClosed) {
                             this.close({
+                                index: index,
                                 id: item.id
                             });
                         }
@@ -228,6 +229,7 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
 
                         if(item.isAutoClosedOnClosed === undefined || item.isAutoClosedOnClosed === true) {
                             this.close({
+                                index: index,
                                 id: item.id
                             });
                         }

src/variants/locales/default.json

@@ -23,8 +23,10 @@
             "clean-all": "Tümünü Temizle",
             "is-optional": "Opsiyonel",
             "select-all": "Tümünü Seç",
+            "components": "Bileşenler",
             "end-time": "Bitiş Zamanı",
             "go-to-today": "Bugün",
+            "home": "Ana Sayfa",
             "monthly": "Aylık",
             "yearly": "Yıllık",
             "cancel": "İptal",
@@ -125,6 +127,7 @@
             "select-any-date": "Select any date",
             "start-time": "Start Time",
             "select-all": "Select All",
+            "components": "Components",
             "is-optional": "Optional",
             "go-to-today": "Go Today",
             "clean-all": "Clean All",
@@ -134,6 +137,7 @@
             "search": "Search",
             "yearly": "Yearly",
             "daily": "Daily",
+            "home": "Home",
             "ok": "Okey",
             "or": "or"
         },