Feature: Glass Effect added to Menu component.

src/components/menu/index.tsx

@@ -49,7 +49,9 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     portalName = "menu-system",
     isWorkWithPortal = true,
     isWorkWithModal = true,
+    customBackgroundColor,
     close: closeAction,
+    glassEffect = 0,
     siteLogoProps,
     customTheme,
     navigation,
@@ -74,6 +76,8 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
         seperator: seperatorDynamicStyle,
         container: containerDynamicStyle
     } = useStyles({
+        customBackgroundColor,
+        glassEffect,
         colors,
         spaces
     });

src/components/menu/stylesheet.ts

@@ -9,6 +9,9 @@ import type {
 import type {
     Mutable
 } from "../../types";
+import {
+    webStyle
+} from "../../utils";
 
 const stylesheet = StyleSheet.create({
     container: {
@@ -50,12 +53,18 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
+    customBackgroundColor,
+    glassEffect,
     colors,
     spaces
 }: MenuDynamicStyle) => {
     const styles = {
         container: {
-            backgroundColor: colors.content.container.default
+            backgroundColor: customBackgroundColor ? customBackgroundColor : colors.content.container.default,
+            ...webStyle({
+                WebkitBackdropFilter: `blur(${glassEffect}px)`,
+                backdropFilter: `blur(${glassEffect}px)`
+            })
         } as Mutable<ViewStyle>,
         headerContainer: {
             paddingHorizontal: spaces.spacingMd,

src/components/menu/type.ts

@@ -22,6 +22,8 @@ export type IMenuRef = {
 export type MenuDynamicStyle = {
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
+    customBackgroundColor?: string;
+    glassEffect?: number;
 };
 
 export type MenuLogoType = {
@@ -53,6 +55,7 @@ interface IMenuProps {
     };
     navigation: NCoreUIKit.Navigation;
     isWorkWithSafeAreaView?: boolean;
+    customBackgroundColor?: string;
     isAutoClosedOnClosed?: boolean;
     siteLogoProps?: ISiteLogoProps;
     renderHeader?: () => ReactNode;
@@ -65,6 +68,7 @@ interface IMenuProps {
     modalProps?: IModalProps;
     isCollapsible?: boolean;
     isAutoClosed?: boolean;
+    glassEffect?: number;
     isCollapse?: boolean;
     onOpened?: (props: {
         id?: string