diff --git a/assets/svg/bag-heart.svg b/assets/svg/bag-heart.svg
new file mode 100644
index 0000000..1086b0b
--- /dev/null
+++ b/assets/svg/bag-heart.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/assets/svg/basket.svg b/assets/svg/basket.svg
new file mode 100644
index 0000000..4b7bea7
--- /dev/null
+++ b/assets/svg/basket.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/assets/svg/bolt.svg b/assets/svg/bolt.svg
new file mode 100644
index 0000000..d35edaa
--- /dev/null
+++ b/assets/svg/bolt.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/assets/svg/cart-give.svg b/assets/svg/cart-give.svg
new file mode 100644
index 0000000..86bb547
--- /dev/null
+++ b/assets/svg/cart-give.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/assets/svg/dialog.svg b/assets/svg/dialog.svg
new file mode 100644
index 0000000..6d0cd49
--- /dev/null
+++ b/assets/svg/dialog.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/assets/svg/login-2.svg b/assets/svg/login-2.svg
new file mode 100644
index 0000000..7d43691
--- /dev/null
+++ b/assets/svg/login-2.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/assets/svg/logout-2.svg b/assets/svg/logout-2.svg
new file mode 100644
index 0000000..238478a
--- /dev/null
+++ b/assets/svg/logout-2.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/assets/svg/settings-x.svg b/assets/svg/settings-x.svg
new file mode 100644
index 0000000..3efc8f6
--- /dev/null
+++ b/assets/svg/settings-x.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/assets/svg/user-circle-fill.svg b/assets/svg/user-circle-fill.svg
new file mode 100644
index 0000000..3fef22b
--- /dev/null
+++ b/assets/svg/user-circle-fill.svg
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/components/bottomsheets/HomeMenu.jsx b/components/bottomsheets/HomeMenu.jsx
index 64d0c71..31e4784 100644
--- a/components/bottomsheets/HomeMenu.jsx
+++ b/components/bottomsheets/HomeMenu.jsx
@@ -1,29 +1,153 @@
-import React, { useRef, useMemo, forwardRef, useCallback } from "react";
-import { StyleSheet, Text, View, Modal } from "react-native";
+// HomeMenu.js
+import React, { useMemo, useCallback, useRef, forwardRef, useContext, useState, useEffect } from "react";
+import { StyleSheet, Text, View, TouchableOpacity, Alert } from "react-native";
import { BottomSheetBackdrop, BottomSheetModal } from "@gorhom/bottom-sheet";
-import { COLORS } from "../../constants";
+import { COLORS, SIZES } from "../../constants";
+import Icon from "../../constants/icons";
+import { useNavigation } from "@react-navigation/native";
+import { AuthContext } from "../auth/AuthContext";
+import Toast from "react-native-toast-message";
-// HomeMenu.js
-const HomeMenu = React.forwardRef((props, ref) => {
- const snapPoints = useMemo(() => ["25%", "50%"], []);
+const HomeMenu = forwardRef((props, ref) => {
+ const snapPoints = useMemo(() => [385, 389], []);
+ const navigation = useNavigation();
+ const { userData, userLogout, userLogin } = useContext(AuthContext);
+
+ const [userId, setUserId] = useState(null);
+
+ useEffect(() => {
+ if (!userLogin) {
+ setUserId(1);
+ } else if (userData && userData._id) {
+ setUserId(userData._id);
+ }
+ }, [userLogin, userData]);
+
+ // Create a ref for the BottomSheetModal if not provided
+ const bottomSheetRef = ref || useRef(null);
const renderBackdrop = useCallback(
- (props) => ,
+ (props) => ,
[]
);
+ const handleNavigation = (screen) => {
+ navigation.navigate(screen);
+ bottomSheetRef.current?.dismiss(); // Dismiss the bottom sheet
+ };
+
+ const showToast = (type, text1, text2) => {
+ Toast.show({
+ type: type,
+ text1: text1,
+ text2: text2 ? text2 : "",
+ visibilityTime: 3000,
+ });
+ };
+
+ const logout = () => {
+ Alert.alert(
+ "Logout",
+ "Are you sure you want to logout?",
+ [
+ {
+ text: "Cancel",
+ onPress: () => {},
+ style: "cancel",
+ },
+ {
+ text: "Continue",
+ onPress: () => {
+ userLogout();
+ showToast("success", "You have been logged out", "Thank you for being with us");
+ },
+ },
+ ],
+ { cancelable: true }
+ );
+ };
+
return (
console.log("Changed", index)}
enablePanDownToClose={true}
- backgroundStyle={{ backgroundColor: COLORS.themeg }}
+ backgroundStyle={{ backgroundColor: COLORS.themeg, borderRadius: SIZES.medium }}
backdropComponent={renderBackdrop}
+ bottomInset={20}
+ containerStyle={{ borderRadius: SIZES.large, marginHorizontal: 10 }}
+ handleIndicatorStyle={styles.handlebar}
+ handleHeight={10}
+ // enableDynamicSizing={true}
>
-
- Swipe down to close
+
+
+ Menu
+
+
+
+ handleNavigation("Profile")}>
+
+
+ My profile
+
+
+
+ handleNavigation("Orders")}>
+
+
+ Orders
+
+
+ handleNavigation("Favourites")}>
+
+
+ Wishlist
+
+
+
+
+ handleNavigation("Message")}>
+
+
+ Message Center
+
+
+ handleNavigation("UserDetails")}>
+
+
+ Settings
+
+
+
+
+ {userLogin ? (
+ {
+ logout();
+ handleNavigation("Home");
+ }}
+ >
+
+
+ Logout
+
+
+ ) : (
+ {
+ handleNavigation("Login");
+ }}
+ >
+
+
+ Login
+
+
+ )}
+
);
@@ -35,18 +159,70 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
- justifyContent: "center",
+ padding: SIZES.medium,
},
- contentContainer: {
- flex: 1,
+ menuText: {
+ fontFamily: "bold",
+ fontSize: SIZES.medium - 3,
+ },
+ menuItem: (borderBottomWidth) => ({
+ borderBottomWidth: borderBottomWidth,
+ flexDirection: "row",
+ paddingVertical: 15,
+ paddingHorizontal: 10,
+ borderColor: "#ccc",
+ opacity: 0.5,
+ alignItems: "center",
+ gap: 10,
+ }),
+ menuCombinelist: {
+ opacity: 0.5,
+ flexDirection: "row",
+ paddingHorizontal: 10,
alignItems: "center",
+ gap: 10,
},
- bottomSheetBackground: {
- backgroundColor: "white",
+ menuCombineContainer: {
+ columnGap: 10,
+ flexDirection: "column",
+ paddingVertical: 15,
},
- backdrop: {
- ...StyleSheet.absoluteFillObject,
- backgroundColor: "black",
+ menuHeader: {
+ alignItems: "center",
opacity: 0.5,
+ width: SIZES.width - 35,
+ paddingHorizontal: 30,
+ justifyContent: "center",
+ borderBottomColor: "#ccc",
+ borderStyle: "solid",
+ borderBottomWidth: SIZES.width * 0.00058,
+ paddingVertical: SIZES.small / 2,
+ marginTop: -10,
+ },
+ heading: {
+ fontSize: 18,
+ fontWeight: "bold",
+ marginBottom: SIZES.medium,
+ color: COLORS.black,
+ fontFamily: "bold",
+ },
+ listContainer: {
+ width: "100%",
+ },
+ listItem: {
+ paddingVertical: SIZES.small,
+ paddingHorizontal: SIZES.medium,
+ backgroundColor: COLORS.lightGray,
+ borderRadius: SIZES.small,
+ marginVertical: SIZES.small,
+ alignItems: "center",
+ },
+ listItemText: {
+ fontSize: 16,
+ color: COLORS.black,
+ },
+ handlebar: {
+ width: SIZES.xxLarge * 2,
+ backgroundColor: COLORS.themey,
},
});
diff --git a/constants/icons.js b/constants/icons.js
index d7f3d28..da0d2c7 100644
--- a/constants/icons.js
+++ b/constants/icons.js
@@ -19,6 +19,7 @@ import Delivery from "../assets/svg/delivery.svg";
import HomeFilledIcon from "../assets/svg/home-filled.svg";
import UserCircleFilledIcon from "../assets/svg/user-circle-filled.svg";
+import UserCircleFilled from "../assets/svg/user-circle-fill.svg";
import Menu2filledIcon from "../assets/svg/menu2-filled.svg";
import SearchCircleFilledIcon from "../assets/svg/search-circle-filled.svg";
import HeartFilledIcon from "../assets/svg/heart-filled.svg";
@@ -40,6 +41,13 @@ import CameraFilled from "../assets/svg/camera-filled.svg";
import SendFilled from "../assets/svg/send-filled.svg";
import Cancel from "../assets/svg/cancel.svg";
import Cartcheck from "../assets/svg/cart-check.svg";
+import Basket from "../assets/svg/basket.svg";
+import Bolt from "../assets/svg/bolt.svg";
+import Dialog from "../assets/svg/dialog.svg";
+import Settingsx from "../assets/svg/settings-x.svg";
+import Logout2 from "../assets/svg/logout-2.svg";
+import Login2 from "../assets/svg/login-2.svg";
+import Favouritebag from "../assets/svg/bag-heart.svg";
const iconMap = {
home: HomeIcon,
@@ -82,6 +90,14 @@ const iconMap = {
sendfilled: SendFilled,
cancel: Cancel,
cartcheck: Cartcheck,
+ basket: Basket,
+ bolt: Bolt,
+ dialog: Dialog,
+ settings: Settingsx,
+ userfilled: UserCircleFilled,
+ logout2: Logout2,
+ login2: Login2,
+ favouritebag: Favouritebag,
};
const Icon = ({ name, size = 24, ...props }) => {