Feature: Menu component completed.

example/src/pages/home/index.tsx

@@ -14,7 +14,6 @@ import {
     NCoreUIKitMenu,
     PageContainer,
     ThemeSwitcher,
-    RowCard,
     Button,
     Text
 } from "ncore-ui-kit";
@@ -26,7 +25,7 @@ import type {
     NativeStackNavigationProp
 } from "@react-navigation/native-stack";
 import {
-    ChevronRight
+    HomeIcon
 } from "lucide-react-native";
 import packageJSON from "../../../../package.json";
 
@@ -57,11 +56,17 @@ const Home = () => {
                 subTitle: "Core Tech",
                 title: "NİBGAT®"
             },
+            isAutoClosed: true,
             buttons: [
                 {
                     redirectMain: "Home",
                     isCollabsable: true,
                     title: "Ana Sayfa",
+                    icon: ({
+                        color
+                    }) => <HomeIcon
+                        color={colors.content.icon[color]}
+                    />,
                     subButtons: [
                         {
                             title: "Text",
@@ -74,7 +79,7 @@ const Home = () => {
                     redirectMain: "TextPage"
                 }
             ],
-            navigation,
+            navigation: navigation as unknown as NCoreUIKit.Navigation,
             id: "test"
         });
     }, []);
@@ -159,22 +164,6 @@ const Home = () => {
             >
                 {localize("version")}: {packageJSON.version}
             </Text>
-            <RowCard
-                title={localize("text")}
-                rightIcon={({
-                    customColor,
-                    color,
-                    size
-                }) => {
-                    return <ChevronRight
-                        color={customColor ? customColor : colors.content.icon[color]}
-                        size={size}
-                    />;
-                }}
-                onPress={() => {
-                    navigation.navigate("TextPage");
-                }}
-            />
         </View>
     </PageContainer>;
 };

src/components/menu/index.tsx

@@ -270,12 +270,29 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
         ] = useState<null | number>(null);
 
         const [
-            isPActive,
-            setIsPActive
-        ] = useState(isPageActive(buttonItem));
+            ,
+            setNavStateTracker
+        ] = useState(Date.now());
 
         const animatedCollabs = useRef(new Animated.Value(0)).current;
 
+        useEffect(() => {
+            if (!navigation || typeof navigation.addListener !== "function") return;
+
+            const unsubscribeState = navigation.addListener("state", () => {
+                setNavStateTracker(Date.now());
+            });
+
+            const unsubscribeFocus = navigation.addListener("focus", () => {
+                setNavStateTracker(Date.now());
+            });
+
+            return () => {
+                if (unsubscribeState) unsubscribeState();
+                if (unsubscribeFocus) unsubscribeFocus();
+            };
+        }, [navigation]);
+
         if(buttonItem.isCollabsable) {
             useLayoutEffect(() => {
                 if(measure === null) return;
@@ -298,6 +315,8 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
             }, [isCollabs]);
         }
 
+        const isPActive = isPageActive(buttonItem);
+
         return <View
             key={`menu-button-${id}-${buttonIndex}`}
         >
@@ -330,6 +349,7 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                 }
                 backgroundColor={isPActive ? "primary" : undefined}
                 titleColor={isPActive ? "onPrimary" : undefined}
+                iconColor={isPActive ? "onPrimary" : undefined}
                 title={buttonItem.title}
                 icon={buttonItem.icon}
                 onPress={() => {
@@ -349,9 +369,7 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                         if(buttonItem.props?.onPress) buttonItem.props.onPress();
                     }
 
-                    setIsPActive(isPageActive(buttonItem));
-
-                    // if(closeAction && !buttonItem.isCollabsable) closeAction();
+                    if(closeAction && !buttonItem.isCollabsable) closeAction();
                 }}
             />
             {

src/components/menu/type.ts

@@ -50,27 +50,9 @@ interface IMenuProps {
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
-    navigation: {
-        navigate: (page: string, config?: {
-            screen: string
-        }) => void;
-        getState: () => {
-        index: number;
-        routes: Array<{
-            params?: Record<string, unknown>;
-            state?: {
-                routes: Array<{
-                    name: string;
-                    key: string;
-                }>;
-                index: number;
-            };
-            name: string;
-            key: string;
-        }>;
-    };
-    };
+    navigation: NCoreUIKit.Navigation;
     isWorkWithSafeAreaView?: boolean;
+    isAutoClosedOnClosed?: boolean;
     siteLogoProps?: ISiteLogoProps;
     renderHeader?: () => ReactNode;
     renderFooter?: () => ReactNode;

src/components/rowCard/index.tsx

@@ -40,7 +40,9 @@ const RowCard: FC<IRowCardProps> = ({
     customTheme,
     titleColor,
     rightTitle,
+    iconColor,
     iconStyle,
+    iconSize,
     subTitle,
     onPress,
     style,
@@ -104,8 +106,8 @@ const RowCard: FC<IRowCardProps> = ({
             ]}
         >
             <CustomIcon
-                color="default"
-                size={18}
+                color={iconColor ? iconColor : "default"}
+                size={iconSize ? iconSize : 18}
             />
         </View>;
     };

src/components/rowCard/type.ts

@@ -43,6 +43,7 @@ type IRowCardProps = {
     subTitleColor?: keyof NCoreUIKit.TextContentColors;
     rightTitleVariant?: keyof NCoreUIKit.Typography;
     titleColor?: keyof NCoreUIKit.TextContentColors;
+    iconColor?: keyof NCoreUIKit.IconContentColors;
     subTitleVariant?: keyof NCoreUIKit.Typography;
     titleVariant?: keyof NCoreUIKit.Typography;
     isTransparentBackground?: boolean;
@@ -53,6 +54,7 @@ type IRowCardProps = {
     rightTitle?: string;
     type?: RowCardType;
     subTitle?: string;
+    iconSize?: number;
     title: string;
 };
 

src/context/menu.tsx

@@ -48,6 +48,54 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
         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 currentData;
+    };
+
+    update = ({
+        menuData,
+        index,
+        id
+    }: {
+        menuData: MenuDataType;
+        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;
@@ -163,9 +211,11 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
                     key={`NCoreUIKit-Menu-${item.id}`}
                     id={item.id as string}
                     close={() => {
-                        this.close({
-                            id: item.id
-                        });
+                        if(item.isAutoClosed) {
+                            this.close({
+                                id: item.id
+                            });
+                        }
                     }}
                     onClosed={() => {
                         if(item.onClosed) {
@@ -174,7 +224,7 @@ class NCoreUIKitMenu extends NCoreContext<MenuContextType, ConfigType<MenuContex
                             });
                         }
 
-                        if(item.isAutoClosed === undefined || item.isAutoClosed === true) {
+                        if(item.isAutoClosedOnClosed === undefined || item.isAutoClosedOnClosed === true) {
                             this.close({
                                 id: item.id
                             });

src/types/index.ts

@@ -217,5 +217,27 @@ declare global {
 
         interface Translation extends GeneratedTranslations {
         }
+
+        type Navigation = {
+            addListener: (state: string, callback: () => void) => () => void;
+            navigate: (page: string, config?: {
+                screen: string
+            }) => void;
+            getState: () => {
+                index: number;
+                routes: Array<{
+                    params?: Record<string, unknown>;
+                    state?: {
+                        routes: Array<{
+                            name: string;
+                            key: string;
+                        }>;
+                        index: number;
+                    };
+                    name: string;
+                    key: string;
+                }>;
+            };
+        };
     }
 }