Feature: Main Hedaer component completed.

example/src/navigation/index.tsx

@@ -1,10 +1,15 @@
 import {
     useEffect
 } from "react";
+import {
+    Platform
+} from "react-native";
 import type RootStackParamList from "./type";
 import {
     NCoreUIKitEmbeddedMenu,
-    NCoreUIKitTheme
+    NCoreUIKitTheme,
+    MainHeader,
+    NCoreUIKitLocalize
 } from "ncore-ui-kit";
 import {
     NavigationContainer,
@@ -18,8 +23,8 @@ import {
     ComponentIcon,
     HomeIcon
 } from "lucide-react-native";
-import TextPage from "../pages/text";
 import Home from "../pages/home";
+import TextPage from "../pages/text";
 
 const RootStack = createNativeStackNavigator();
 const ComponentsStack = createNativeStackNavigator();
@@ -40,22 +45,21 @@ const RootNav = () => {
         colors
     } = NCoreUIKitTheme.useContext();
 
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     useEffect(() => {
+        const currentMenuStatus = Platform.OS === "web" ? window.localStorage.getItem("main-menu-status") : "false";
+
         NCoreUIKitEmbeddedMenu.load({
+            isCollapse: currentMenuStatus === "true" ? true : false,
+            isWorkWithSafeAreaView: false,
             siteLogoProps: {
-                imageUrl: "https://www.nibgat.com/assets/images/logo.png",
-                onPress: () => {
-                    navigation.navigate("Home");
-                },
-                imageProps: {
-                    resizeMode: "stretch"
-                },
-                imageSpace: "spacingLg",
-                isWorkWithAction: true,
-                subTitle: "Core Tech",
-                title: "NİBGAT® Deneme Anonim Ticaret Limited Şti."
+                isShowIcon: false,
+                title: localize("menu")
             },
             buttons: [
                 {
@@ -90,28 +94,59 @@ const RootNav = () => {
             isAutoClosed: true,
             id: "main-menu"
         });
+
+        NCoreUIKitEmbeddedMenu.addEventListener("state", updateStorage);
     }, []);
 
-    return <NCoreUIKitEmbeddedMenu.Render
-        navigation={navigation as unknown as NCoreUIKit.Navigation}
-        id="main-menu"
+    const updateStorage = () => {
+        const data = NCoreUIKitEmbeddedMenu.state.data;
+
+        if(Platform.OS === "web" && data && data.length) {
+            const currentMenu = data.find(dI => dI.id === "main-menu");
+
+            if(currentMenu) {
+                window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
+            }
+        }
+    };
+
+    return <MainHeader
+        isWorkWithSeperator={true}
+        siteLogoProps={{
+            imageUrl: "http://ncore.nibgat.space/assets/images/ncorelogo.png",
+            onPress: () => {
+                navigation.navigate("Home");
+            },
+            imageProps: {
+                resizeMode: "stretch"
+            },
+            subTitle: "Design System - UI Kit",
+            title: "NİBGAT® | NCore",
+            isWorkWithAction: true,
+            isWorkWithFlex1: true
+        }}
     >
-        <RootStack.Navigator
-            initialRouteName="Home"
-            screenOptions={{
-                headerShown: false
-            }}
+        <NCoreUIKitEmbeddedMenu.Render
+            navigation={navigation as unknown as NCoreUIKit.Navigation}
+            id="main-menu"
         >
-            <RootStack.Screen
-                name="Home"
-                component={Home}
-            />
-            <RootStack.Screen
-                name="Components"
-                component={ComponentsNav}
-            />
-        </RootStack.Navigator>
-    </NCoreUIKitEmbeddedMenu.Render>;
+            <RootStack.Navigator
+                initialRouteName="Home"
+                screenOptions={{
+                    headerShown: false
+                }}
+            >
+                <RootStack.Screen
+                    name="Home"
+                    component={Home}
+                />
+                <RootStack.Screen
+                    name="Components"
+                    component={ComponentsNav}
+                />
+            </RootStack.Navigator>
+        </NCoreUIKitEmbeddedMenu.Render>
+    </MainHeader>;
 };
 
 const Navigation = () => {

example/src/pages/text/index.tsx

@@ -45,6 +45,7 @@ const TextPage = () => {
     useLayoutEffect(() => {
         navigation.setOptions({
             header: () => <Header
+                isWrapSafeareaContext={false}
                 title={localize("text")}
                 navigation={navigation}
                 isGoBackEnable={true}

src/components/embeddedMenu/index.tsx

@@ -47,6 +47,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     isWorkWithAnimation = true,
     renderHeader: RenderHeader,
     renderFooter: RenderFooter,
+    isShowSiteLogo = true,
     close: closeAction,
     maxWidth = 300,
     minWidth = 75,
@@ -318,7 +319,7 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                     headerContentContainerDynamicStyle
                 ]}
             >
-                <SiteLogo
+                {isShowSiteLogo ? <SiteLogo
                     {...siteLogoProps}
                     title={isActive ? siteLogoProps?.title : undefined}
                     size={isActive ? siteLogoProps?.size : "small"}
@@ -326,7 +327,11 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                         siteLogoProps?.style,
                         siteLogoDynamicStyle
                     ]}
-                />
+                /> : <View
+                    style={{
+                        flex: 1
+                    }}
+                />}
                 {renderToggleCollapseForExpended()}
             </View>
             <Seperator

src/components/embeddedMenu/type.ts

@@ -59,6 +59,7 @@ interface IEmbeddedMenuProps {
     isWorkWithAnimation?: boolean;
     isShowCollabsButton?: boolean;
     logo?: EmbeddedMenuLogoType;
+    isShowSiteLogo?: boolean;
     renderHeader?: (props: {
         isCollapse: boolean;
         maxWidth: number;

src/components/index.ts

@@ -178,6 +178,10 @@ export {
     default as EmbeddedMenu
 } from "./embeddedMenu";
 
+export {
+    default as MainHeader
+} from "./mainHeader";
+
 export type {
     EnterMarkdownTypes,
     CodeMarkdownTypes,

src/components/mainHeader/index.tsx

@@ -0,0 +1,96 @@
+import {
+    View
+} from "react-native";
+import type IMainHeader from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    SafeAreaView
+} from "react-native-safe-area-context";
+import SiteLogo from "../siteLogo";
+
+const MainHeader = ({
+    isWorkWithSafeAreaView = true,
+    isWorkWithSeperator = false,
+    backgroundColor = "default",
+    renderRight: RenderRight,
+    renderLeft: RenderLeft,
+    siteLogoProps,
+    children
+}: IMainHeader) => {
+    const {
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        container: containerDynamicStyle
+    } = useStyles({
+        isWorkWithSeperator,
+        backgroundColor,
+        borders,
+        spaces,
+        colors
+    });
+
+    const renderRight = () => {
+        if(RenderRight) {
+            return <RenderRight/>;
+        }
+
+        return <View/>;
+    };
+
+    const renderLeft = () => {
+        if(RenderLeft) {
+            return <RenderLeft/>;
+        }
+
+        return <SiteLogo
+            size="medium"
+            isWorkWithFlex1={false}
+            {...siteLogoProps}
+        />;
+    };
+
+    const renderContent = () => {
+        return <View
+            style={[
+                stylesheet.container,
+                containerDynamicStyle
+            ]}
+        >
+            {renderLeft()}
+            {renderRight()}
+        </View>;
+    };
+
+    const renderSafeAreaView = () => {
+        return <SafeAreaView
+            edges={[
+                "top"
+            ]}
+        >
+            {renderContent()}
+        </SafeAreaView>;
+    };
+
+    if(children) {
+        return <View
+            style={[
+                stylesheet.baseContainer
+            ]}
+        >
+            {isWorkWithSafeAreaView ? renderSafeAreaView() : renderContent()}
+            {children}
+        </View>;
+    }
+
+    return renderContent();
+};
+export default MainHeader;

src/components/mainHeader/stylesheet.ts

@@ -0,0 +1,46 @@
+import {
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    MainHeaderDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        width: "100%"
+    },
+    baseContainer: {
+        flexDirection: "column",
+        flex: 1
+    }
+});
+
+export const useStyles = ({
+    isWorkWithSeperator,
+    backgroundColor,
+    borders,
+    spaces,
+    colors
+}: MainHeaderDynamicStyle) => {
+    const styles = {
+        container: {
+            backgroundColor: backgroundColor ? colors.content.container[backgroundColor] : colors.content.container.default,
+            padding: spaces.spacingMd
+        } as Mutable<ViewStyle>
+    };
+
+    if(isWorkWithSeperator) {
+        styles.container.borderBottomColor = colors.content.border.subtle;
+        styles.container.borderBottomWidth = borders.line;
+    }
+
+    return styles;
+};
+
+export default stylesheet;

src/components/mainHeader/type.ts

@@ -0,0 +1,26 @@
+import type {
+    ReactNode
+} from "react";
+import type ISiteLogoProps from "../siteLogo/type";
+
+export type MainHeaderDynamicStyle = {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    borders: NCoreUIKit.ActivePalette["borders"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    isWorkWithSeperator?: boolean;
+};
+
+interface IMainHeader {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    isWorkWithSafeAreaView?: boolean;
+    siteLogoProps?: ISiteLogoProps;
+    isWorkWithSeperator?: boolean;
+    renderRight?: () => ReactNode;
+    renderLeft?: () => ReactNode;
+    children?: ReactNode;
+};
+
+export type {
+    IMainHeader as default
+};

src/components/siteLogo/index.tsx

@@ -22,8 +22,10 @@ import Text from "../text";
 
 const SiteLogo = ({
     logoBackgroundColor = "default",
+    isWorkWithFlex1 = true,
     isShowBorder = false,
     isCustomImageSize,
+    isShowIcon = true,
     isWorkWithAction,
     image: ImageProp,
     backgroundColor,
@@ -72,6 +74,7 @@ const SiteLogo = ({
         logoBackgroundColor,
         isCustomImageSize,
         image: ImageProp,
+        isWorkWithFlex1,
         backgroundColor,
         isShowBorder,
         borderColor,
@@ -215,6 +218,10 @@ const SiteLogo = ({
     };
 
     const renderContentContainer = () => {
+        if(!isShowIcon) {
+            return null;
+        }
+
         return <View
             style={[
                 stylesheet.contentContainer,

src/components/siteLogo/stylesheet.ts

@@ -85,8 +85,7 @@ const stylesheet = StyleSheet.create({
         alignItems: "center",
         position: "relative",
         overflow: "visible",
-        display: "flex",
-        flex: 1
+        display: "flex"
     },
     image: {
         objectFit: "cover"
@@ -113,6 +112,7 @@ const stylesheet = StyleSheet.create({
 export const useStyles = ({
     logoBackgroundColor,
     isCustomImageSize,
+    isWorkWithFlex1,
     backgroundColor,
     isShowBorder,
     borderColor,
@@ -182,6 +182,10 @@ export const useStyles = ({
         styles.container.opacity = 0.33;
     }
 
+    if(isWorkWithFlex1) {
+        styles.container.flex = 1;
+    }
+
     return styles;
 };
 export default stylesheet;

src/components/siteLogo/type.ts

@@ -22,6 +22,7 @@ export type SiteLogoDynamicStyleType = {
     image?: ComponentType<ImageProps>;
     currentSize: SiteLogoMeasures;
     isCustomImageSize?: boolean;
+    isWorkWithFlex1?: boolean;
     isShowBorder?: boolean;
     isDisabled?: boolean;
     isLoading?: boolean;
@@ -69,10 +70,12 @@ interface ISiteLogoProps {
     imageSource?: ImageURISource;
     isCustomImageSize?: boolean;
     isWorkWithAction?: boolean;
+    isWorkWithFlex1?: boolean;
     imageProps?: ImageProps;
     size?: SiteLogoSizeType;
     isShowBorder?: boolean;
     icon?: NCoreUIKitIcon;
+    isShowIcon?: boolean;
     isDisabled?: boolean;
     onPress?: () => void;
     isLoading?: boolean;

src/index.tsx

@@ -34,6 +34,7 @@ export {
     SelectSheet,
     RadioButton,
     MenuButton,
+    MainHeader,
     SelectBox,
     StateCard,
     TextInput,

src/variants/locales/default.json

@@ -32,6 +32,7 @@
             "cancel": "İptal",
             "daily": "Günlük",
             "search": "Ara",
+            "menu": "Menü",
             "ok": "Tamam",
             "or": "ya da"
         },
@@ -138,6 +139,7 @@
             "yearly": "Yearly",
             "daily": "Daily",
             "home": "Home",
+            "menu": "Menu",
             "ok": "Okey",
             "or": "or"
         },