diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index e5d0b58..7b1fc6a 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -26,6 +26,35 @@ export default function TabsLayout() {
tabBarIcon: ({ color, size }) => ,
}}
/>
+ {/* Ẩn các tab này khỏi bottom bar */}
+ ,
+ }}
+ />
+ ,
+ }}
+ />
+ ,
+ }}
+ />
+ ,
+ }}
+ />
);
}
diff --git a/app/(tabs)/account.tsx b/app/(tabs)/account.tsx
index 5268641..225757a 100644
--- a/app/(tabs)/account.tsx
+++ b/app/(tabs)/account.tsx
@@ -1,12 +1,22 @@
import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useRouter } from "expo-router";
+import {
+ View,
+ Text,
+ TouchableOpacity,
+ StyleSheet,
+ Alert,
+ ScrollView,
+ Image,
+} from "react-native";
+import { useNavigation, useRouter } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Ionicons } from "@expo/vector-icons";
+import { useAuth } from "../../hooks/useAuth";
export default function AccountScreen() {
const router = useRouter();
const insets = useSafeAreaInsets();
+ const { user, logout } = useAuth();
const handleLogout = async () => {
Alert.alert("Đăng xuất", "Bạn có chắc muốn đăng xuất?", [
@@ -18,28 +28,96 @@ export default function AccountScreen() {
text: "Đăng xuất",
style: "destructive",
onPress: async () => {
- await AsyncStorage.removeItem("authToken");
- router.replace("/"); // quay về màn hình đăng nhập
+ const success = await logout();
+ if (success) {
+ router.replace("/");
+ }
},
},
]);
};
- return (
-
- {/* 🔘 Nút đăng xuất góc trên phải */}
-
- Đăng xuất
-
+ const menuItems = [
+ { id: "address", label: "Address", icon: "location" },
+ { id: "payment", label: "Payment method", icon: "card" },
+ { id: "voucher", label: "Voucher", icon: "ticket" },
+ { id: "wishlist", label: "My Wishlist", icon: "heart" , screen: "wishlist"},
+ { id: "rate", label: "Rate this app", icon: "star" },
+ ];
- {/* Nội dung giữa màn hình */}
-
- Xin chào, User 👋
+ const navigation = useNavigation();
+ return (
+
+ {/* Header with Settings Icon */}
+
+ My Profile
+
+
+
+
+
+ {/* User Profile Section */}
+
+
+ {/* Avatar */}
+
+
+
+
+
+
+ {/* User Info */}
+
+
+ {user?.email?.split("@")[0] || "User"}
+
+ {user?.email || "email@example.com"}
+
+
+
+
+ {/* Menu Items */}
+
+ {menuItems.map((item) => (
+ {
+ if (item.screen) {
+ navigation.navigate(item.screen);
+ }
+ }}
+ >
+
+
+
+ {item.label}
+
+
+
+
+ ))}
+
+ {/* Logout Button */}
+
+
+
+
+
+ Log out
+
+
+
+
+
+
+
);
}
@@ -47,34 +125,91 @@ export default function AccountScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
+ backgroundColor: "#fff",
},
- centerContent: {
+ header: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ borderBottomWidth: 1,
+ borderBottomColor: "#f0f0f0",
+ },
+ headerTitle: {
+ fontSize: 18,
+ fontWeight: "700",
+ color: "#333",
+ },
+ settingsBtn: {
+ padding: 8,
+ },
+ scrollView: {
flex: 1,
+ },
+ profileSection: {
+ paddingHorizontal: 16,
+ paddingVertical: 24,
+ borderBottomWidth: 1,
+ borderBottomColor: "#f5f5f5",
+ },
+ profileContent: {
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ avatarContainer: {
+ marginRight: 16,
+ },
+ avatar: {
+ width: 60,
+ height: 60,
+ borderRadius: 30,
+ backgroundColor: "#D4A574",
justifyContent: "center",
alignItems: "center",
},
- title: {
- fontSize: 20,
- fontWeight: "600",
- marginBottom: 20,
+ userInfo: {
+ flex: 1,
},
- logoutBtn: {
- position: "absolute",
- right: 16, // sát mép phải
- backgroundColor: "#f44336",
+ userName: {
+ fontSize: 16,
+ fontWeight: "700",
+ color: "#333",
+ marginBottom: 4,
+ textTransform: "capitalize",
+ },
+ userEmail: {
+ fontSize: 13,
+ color: "#999",
+ },
+ menuContainer: {
paddingHorizontal: 16,
- paddingVertical: 8,
- borderRadius: 8,
- zIndex: 999,
- elevation: 4,
- shadowColor: "#000",
- shadowOffset: { width: 0, height: 2 },
- shadowOpacity: 0.25,
- shadowRadius: 3.5,
+ paddingVertical: 16,
+ },
+ menuItem: {
+ paddingVertical: 14,
+ borderBottomWidth: 1,
+ borderBottomColor: "#f5f5f5",
+ },
+ menuItemContent: {
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+ },
+ menuItemLeft: {
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ menuItemText: {
+ marginLeft: 16,
+ fontSize: 14,
+ fontWeight: "500",
+ color: "#333",
+ },
+ logoutMenuItem: {
+ marginTop: 8,
},
logoutText: {
- color: "#fff",
- fontWeight: "700",
- fontSize: 14,
+ color: "#E74C3C",
},
-});
+});
\ No newline at end of file
diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx
index 8d14b13..5beb022 100644
--- a/app/(tabs)/home.tsx
+++ b/app/(tabs)/home.tsx
@@ -1,9 +1,332 @@
-import { View, Text } from "react-native";
+import React, { useState } from "react";
+import {
+ View,
+ Text,
+ TouchableOpacity,
+ ScrollView,
+ Modal,
+ Image,
+ Animated,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+import { useAuth } from "../../hooks/useAuth";
+
+// Side Menu Component
+function SideMenu({ visible, onClose }) {
+ const navigation = useNavigation();
+ const slideAnim = React.useRef(new Animated.Value(visible ? 0 : -300)).current;
+ const { user } = useAuth();
+
+ React.useEffect(() => {
+ Animated.timing(slideAnim, {
+ toValue: visible ? 0 : -300,
+ duration: 300,
+ useNativeDriver: true,
+ }).start();
+ }, [visible, slideAnim]);
+
+ const menuItems = [
+ { id: "home", label: "Homepage", icon: "home", screen: "home" },
+ { id: "discover", label: "Discover", icon: "search", screen: "discover" },
+ { id: "orders", label: "My Order", icon: "list", screen: "orders" },
+ { id: "profile", label: "My profile", icon: "person", screen: "account" },
+ ];
+
+ const otherItems = [
+ { id: "setting", label: "Setting", icon: "settings", screen: "setting" },
+ { id: "support", label: "Support", icon: "help-circle", screen: "support" },
+ { id: "about", label: "About us", icon: "information-circle", screen: "about" },
+ ];
+
+ const dropdownItems = [
+ { id: "cart", label: "Giỏ hàng", icon: "cart", screen: "cart" },
+ { id: "wishlist", label: "Yêu thích", icon: "heart", screen: "wishlist" },
+ { id: "checkout", label: "Thanh toán", icon: "checkmark-circle", screen: "checkout" },
+ ];
-export default function HomeScreen() {
return (
-
- Chào mừng đến Trang chủ!
+
+
+ {/* Overlay */}
+
+
+ {/* Animated Menu */}
+
+
+ {/* User Profile */}
+
+
+
+
+
+
+ {user?.email?.split("@")[0] || "Guest"}
+
+
+ {user?.email || "guest@example.com"}
+
+
+
+
+
+ {/* Main Menu */}
+ {menuItems.map((item) => (
+ {
+ navigation.navigate(item.screen);
+ onClose();
+ }}
+ >
+
+
+ {item.label}
+
+
+ ))}
+
+ {/* Other Section */}
+
+ OTHER
+
+
+ {otherItems.map((item) => (
+ {
+ navigation.navigate(item.screen);
+ onClose();
+ }}
+ >
+
+
+ {item.label}
+
+
+ ))}
+
+ {/* Dropdown Items Section */}
+
+ QUICK ACCESS
+
+
+ {dropdownItems.map((item) => (
+ {
+ navigation.navigate(item.screen);
+ onClose();
+ }}
+ >
+
+
+ {item.label}
+
+
+ ))}
+
+ {/* Theme Toggle */}
+
+
+
+ Light
+
+
+
+ Dark
+
+
+
+
+
+
+ );
+}
+
+// Product Card Component
+function ProductCard({ product }) {
+ return (
+
+
+
+
+
+ {product.name}
+
+
+ {product.price} đ
+
);
}
+
+// Home Screen
+export default function HomeScreen() {
+ const [sideMenuVisible, setSideMenuVisible] = useState(false);
+
+ const featureProducts = [
+ { id: 1, name: "iphone 15 Pro Max 256GB", price: "29.990.000" },
+ { id: 2, name: "Samsung Galaxy S24 Ultra", price: "27.990.000" },
+ { id: 3, name: "Xiaomi 14 Ultra", price: "24.990.0000" },
+ ];
+
+ return (
+
+
+
+ setSideMenuVisible(true)}>
+
+
+
+ Gemstore
+
+
+
+
+
+
+ {/* Main Content */}
+
+ {/* Banner */}
+
+
+ Autumn
+
+
+ Collection
+
+
+ 2022
+
+
+
+ {/* Feature Products */}
+
+
+
+ Feature Products
+
+
+ Show all
+
+
+
+
+ {featureProducts.map((product) => (
+
+ ))}
+
+
+
+
+ {/* Side Menu */}
+ setSideMenuVisible(false)}
+ />
+
+ );
+}
\ No newline at end of file
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 006f56b..88c332a 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout() {
return (
- {!isLoggedIn && }
+ {!isLoggedIn && }
{isLoggedIn && }
);