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
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;
|
|
|