Feature: renderSiteLogo and renderHeaderSeperator props added to Menu Component.

example/src/navigation/index.tsx

@@ -9,8 +9,7 @@ import {
     NCoreUIKitEmbeddedMenu,
     NCoreUIKitLocalize,
     NCoreUIKitTheme,
-    MainHeader,
-    NCoreUIKitMenu
+    MainHeader
 } from "ncore-ui-kit";
 import {
     NavigationContainer,
@@ -99,35 +98,6 @@ const RootNav = () => {
             id: "main-menu"
         });
 
-        NCoreUIKitMenu.load({
-            navigation: navigation as unknown as NCoreUIKit.Navigation,
-            customBackgroundColor: "#444",
-            seperatorProps: {
-                customColor: "white"
-            },
-            isCollapse: false,
-            glassEffect: 5,
-            siteLogoProps: {
-                titleCustomColor: "turkish",
-                isShowIcon: false,
-                titleKey: "menu"
-            },
-            buttons: [
-                {
-                    redirectMain: "Home",
-                    isUseLocalize: true,
-                    title: "home",
-                    icon: ({
-                        color
-                    }) => <HomeIcon
-                        color={color}
-                    />
-                }
-            ],
-            isAutoClosed: true,
-            id: "main-menu"
-        });
-
         NCoreUIKitEmbeddedMenu.addEventListener("state", updateStorage);
     }, []);
 

example/src/pages/home/index.tsx

@@ -7,9 +7,7 @@ import {
 } from "react-native";
 import stylesheet from "./stylesheet";
 import {
-    Button,
     NCoreUIKitLocalize,
-    NCoreUIKitMenu,
     NCoreUIKitTheme,
     PageContainer,
     Text
@@ -53,14 +51,6 @@ const Home = () => {
             }
         }}
     >
-        <Button
-            title="open"
-            onPress={() => {
-                NCoreUIKitMenu.open({
-                    id: "main-menu"
-                });
-            }}
-        />
         <View
             style={{
                 justifyContent: "center",

src/components/embeddedMenu/index.tsx

@@ -48,8 +48,10 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     isWorkWithAnimation = true,
     renderHeader: RenderHeader,
     renderFooter: RenderFooter,
+    renderHeaderSeperator,
     isShowSiteLogo = true,
     close: closeAction,
+    renderSiteLogo,
     customLocalize,
     maxWidth = 300,
     minWidth = 75,
@@ -323,7 +325,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                     headerContentContainerDynamicStyle
                 ]}
             >
-                {isShowSiteLogo ? <SiteLogo
+                {isShowSiteLogo ? renderSiteLogo ? renderSiteLogo() : <SiteLogo
                     customLocalize={customLocalize}
                     customTheme={customTheme}
                     {...siteLogoProps}
@@ -340,12 +342,12 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                 />}
                 {renderToggleCollapseForExpended()}
             </View>
-            <Seperator
+            {renderHeaderSeperator ? renderHeaderSeperator() : <Seperator
                 style={[
                     stylesheet.seperator,
                     seperatorDynamicStyle
                 ]}
-            />
+            />}
         </View>;
     };
 

src/components/embeddedMenu/type.ts

@@ -54,9 +54,11 @@ interface IEmbeddedMenuProps {
     customLocalize?: {
         activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
+    renderHeaderSeperator?: () => ReactNode;
     buttons: Array<EmbeddedMenuButton>;
     navigation: NCoreUIKit.Navigation;
     isWorkWithSafeAreaView?: boolean;
+    renderSiteLogo?: () => ReactNode;
     isWorkWithHeaderSpace?: boolean;
     isAutoClosedOnClosed?: boolean;
     siteLogoProps?: ISiteLogoProps;

src/components/menu/index.tsx

@@ -50,10 +50,12 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     isWorkWithPortal = true,
     isWorkWithModal = true,
     customBackgroundColor,
+    renderHeaderSeperator,
     close: closeAction,
     glassEffect = 0,
     customLocalize,
     seperatorProps,
+    renderSiteLogo,
     siteLogoProps,
     customTheme,
     navigation,
@@ -281,12 +283,12 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                 headerContainerDynamicStyle
             ]}
         >
-            <SiteLogo
+            {renderSiteLogo ? renderSiteLogo() : <SiteLogo
                 customLocalize={customLocalize}
                 customTheme={customTheme}
                 {...siteLogoProps}
-            />
-            <Seperator
+            />}
+            {renderHeaderSeperator ? renderHeaderSeperator() : <Seperator
                 {...seperatorProps}
                 length="100%"
                 style={[
@@ -294,7 +296,7 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                     stylesheet.seperator,
                     seperatorDynamicStyle
                 ]}
-            />
+            />}
         </View>;
     };
 

src/components/menu/type.ts

@@ -57,9 +57,11 @@ interface IMenuProps {
     customLocalize?: {
         activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
+    renderHeaderSeperator?: () => ReactNode;
     navigation: NCoreUIKit.Navigation;
     isWorkWithSafeAreaView?: boolean;
     seperatorProps?: ISeperatorProps;
+    renderSiteLogo?: () => ReactNode;
     customBackgroundColor?: string;
     isAutoClosedOnClosed?: boolean;
     siteLogoProps?: ISiteLogoProps;

src/components/siteLogo/stylesheet.ts

@@ -172,6 +172,8 @@ export const useStyles = ({
 
         styles.contentContainer.justifyContent = "center";
         styles.contentContainer.alignItems = "center";
+
+        styles.titlesContainer.marginLeft = 0;
     }
 
     if(isDisabled) {