You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

129 lines
3.2 KiB

import React, { useState } from "react";
import {
View,
Platform,
UIManager,
Dimensions,
Pressable,
Text,
TouchableOpacity,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { Ionicons, AntDesign } from "@expo/vector-icons";
import tw from "tailwind-rn";
import fontSize from "../constants/fontSize";
const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height;
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const Drawer = ({ position, setBoxPosition }) => {
const [routes, setRoutes] = useState([
{
name: "صفحه اصلی",
route: "Home",
icon: <Ionicons name="home-outline" size={23} color={"#555555"} />,
toast: "",
message: "",
},
{
name: "فعال سازی",
route: "Activation",
icon: <AntDesign name="check" size={23} color={"#555555"} />,
toast: "",
message: "",
},
{
name: "پروفایل",
route: "Profile",
icon: <AntDesign name="profile" size={23} color={"#555555"} />,
toast: "",
message: "",
},
{
name: "واقعیت افزوده",
route: "AR",
icon: <Ionicons name="ios-glasses" size={23} color={"#555555"} />,
toast: "",
message: "",
},
{
name: "سفارشات",
route: "Orders",
icon: <Ionicons name="reorder-four" size={23} color={"#555555"} />,
toast: "",
message: "",
},
{
name: "سبد خرید",
route: "ShoppingCart",
icon: <Ionicons name="cart" size={23} color={"#555555"} />,
toast: "",
message: "",
},
{
name: "سوالات متداول",
route: "Faq",
icon: <Ionicons name="" size={23} color={"#555555"} />,
toast: "",
message: "",
},
{
name: "تماس با ما",
route: "Contact",
icon: <Ionicons name="call" size={23} color={"#555555"} />,
toast: "",
message: "",
},
]);
const navigation = useNavigation();
const Route = ({ route }) => {
return (
<TouchableOpacity
style={[
tw("w-full flex flex-row-reverse justify-start items-end mt-6"),
{},
]}
onPress={() => navigation.navigate(route.route)}
>
{route.icon}
<Text
style={[tw("mr-2"), { fontFamily: "regular", fontSize: fontSize.base }]}
>
{route.name}
</Text>
</TouchableOpacity>
);
};
return (
<View
style={[
tw(`absolute top-0 flex flex-row justify-end `),
{
left: position,
width: width,
height: height,
zIndex : 10000
},
]}
>
<Pressable
onPress={() => setBoxPosition()}
style={[tw(`w-1/5 h-full ${position === "0%" ? "bg-black bg-opacity-40" : ""}`)]}
></Pressable>
<View style={[tw("w-4/5 bg-white h-full flex flex-col px-4 pt-10")]}>
{routes.map((route, index) => (
<Route route={route} key={index} />
))}
</View>
</View>
);
};
export default Drawer;