ui

app/(tabs)/_layout.tsx

@@ -26,6 +26,35 @@ export default function TabsLayout() {
           tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} />,
         }}
       />
+    {/* Ẩn các tab này khỏi bottom bar */}
+    <Tabs.Screen
+        name="cart"
+        options={{
+          href: null, // ẩn khỏi bottom tab bar
+          tabBarIcon: ({ color }) => <Ionicons name="cart-outline" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="orders"
+        options={{
+          href: null, // ẩn khỏi bottom tab bar
+          tabBarIcon: ({ color }) => <Ionicons name="list-outline" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="checkout"
+        options={{
+          href: null, // ẩn khỏi bottom tab bar
+          tabBarIcon: ({ color }) => <Ionicons name="checkmark-done-outline" size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="wishlist"
+        options={{
+          href: null, // ẩn khỏi bottom tab bar
+          tabBarIcon: ({ color }) => <Ionicons name="heart-outline" size={24} color={color} />,
+        }}
+      />
     </Tabs>
   );
 }

app/(tabs)/account.tsx

@@ -1,12 +1,22 @@
 import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import {
-import AsyncStorage from "@react-native-async-storage/async-storage";
+  View,
-import { useRouter } from "expo-router";
+  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");
+          const success = await logout();
-          router.replace("/"); // quay về màn hình đăng nhập
+          if (success) {
+            router.replace("/");
+          }
         },
       },
     ]);
   };
 
-  return (
+  const menuItems = [
-    <View style={styles.container}>
+    { id: "address", label: "Address", icon: "location" },
-      {/* 🔘 Nút đăng xuất góc trên phải */}
+    { id: "payment", label: "Payment method", icon: "card" },
-      <TouchableOpacity
+    { id: "voucher", label: "Voucher", icon: "ticket" },
-        style={[styles.logoutBtn, { top: insets.top + 10 }]} // đảm bảo không bị che bởi status bar
+    { id: "wishlist", label: "My Wishlist", icon: "heart" , screen: "wishlist"},
-        onPress={handleLogout}
+    { id: "rate", label: "Rate this app", icon: "star" },
-        activeOpacity={0.8}
+  ];
-      >
-        <Text style={styles.logoutText}>Đăng xuất</Text>
-      </TouchableOpacity>
 
-      {/* Nội dung giữa màn hình */}
+  const navigation = useNavigation();
-      <View style={styles.centerContent}>
+  return (
-        <Text style={styles.title}>Xin chào, User 👋</Text>
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Header with Settings Icon */}
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>My Profile</Text>
+        <TouchableOpacity style={styles.settingsBtn}>
+          <Ionicons name="settings" size={24} color="#333" />
+        </TouchableOpacity>
       </View>
+
+      <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollView}>
+        {/* User Profile Section */}
+        <View style={styles.profileSection}>
+          <View style={styles.profileContent}>
+            {/* Avatar */}
+            <View style={styles.avatarContainer}>
+              <View style={styles.avatar}>
+                <Ionicons name="person" size={32} color="#fff" />
+              </View>
+            </View>
+
+            {/* User Info */}
+            <View style={styles.userInfo}>
+              <Text style={styles.userName}>
+                {user?.email?.split("@")[0] || "User"}
+              </Text>
+              <Text style={styles.userEmail}>{user?.email || "email@example.com"}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Menu Items */}
+        <View style={styles.menuContainer}>
+          {menuItems.map((item) => (
+            <TouchableOpacity
+              key={item.id}
+              style={styles.menuItem}
+              activeOpacity={0.7}
+              onPress={() => {
+                if (item.screen) {
+                  navigation.navigate(item.screen);
+                }
+              }}
+            >
+              <View style={styles.menuItemContent}>
+                <View style={styles.menuItemLeft}>
+                  <Ionicons name={item.icon} size={20} color="#9B9B9B" />
+                  <Text style={styles.menuItemText}>{item.label}</Text>
+                </View>
+                <Ionicons name="chevron-forward" size={20} color="#D0D0D0" />
+              </View>
+            </TouchableOpacity>
+          ))}
+
+          {/* Logout Button */}
+          <TouchableOpacity
+            style={[styles.menuItem, styles.logoutMenuItem]}
+            onPress={handleLogout}
+            activeOpacity={0.7}
+          >
+            <View style={styles.menuItemContent}>
+              <View style={styles.menuItemLeft}>
+                <Ionicons name="log-out" size={20} color="#9B9B9B" />
+                <Text style={[styles.menuItemText, styles.logoutText]}>
+                  Log out
+                </Text>
+              </View>
+              <Ionicons name="chevron-forward" size={20} color="#D0D0D0" />
+            </View>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
     </View>
   );
 }
@@ -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: {
+  userInfo: {
-    fontSize: 20,
+    flex: 1,
-    fontWeight: "600",
-    marginBottom: 20,
   },
-  logoutBtn: {
+  userName: {
-    position: "absolute",
+    fontSize: 16,
-    right: 16, // sát mép phải
+    fontWeight: "700",
-    backgroundColor: "#f44336",
+    color: "#333",
+    marginBottom: 4,
+    textTransform: "capitalize",
+  },
+  userEmail: {
+    fontSize: 13,
+    color: "#999",
+  },
+  menuContainer: {
     paddingHorizontal: 16,
-    paddingVertical: 8,
+    paddingVertical: 16,
-    borderRadius: 8,
+  },
-    zIndex: 999,
+  menuItem: {
-    elevation: 4,
+    paddingVertical: 14,
-    shadowColor: "#000",
+    borderBottomWidth: 1,
-    shadowOffset: { width: 0, height: 2 },
+    borderBottomColor: "#f5f5f5",
-    shadowOpacity: 0.25,
+  },
-    shadowRadius: 3.5,
+  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",
+    color: "#E74C3C",
-    fontWeight: "700",
-    fontSize: 14,
   },
 });

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 (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
-      <Text>Chào mừng đến Trang chủ!</Text>
+      <View style={{ flex: 1, flexDirection: "row" }}>
+        {/* Overlay */}
+        <TouchableOpacity
+          style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.3)" }}
+          onPress={onClose}
+        />
+
+        {/* Animated Menu */}
+        <Animated.View
+          style={{
+            width: 280,
+            backgroundColor: "#fff",
+            transform: [{ translateX: slideAnim }],
+            paddingTop: 40,
+            paddingHorizontal: 16,
+          }}
+        >
+          <ScrollView showsVerticalScrollIndicator={false}>
+            {/* User Profile */}
+            <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 32 }}>
+              <View
+                style={{
+                  width: 50,
+                  height: 50,
+                  borderRadius: 25,
+                  backgroundColor: "#E8B4A0",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  marginRight: 12,
+                }}
+              >
+                <Ionicons name="person" size={28} color="#fff" />
+              </View>
+              <View>
+              <Text style={{ fontSize: 14, fontWeight: "600", color: "#333" }}>
+  {user?.email?.split("@")[0] || "Guest"}
+</Text>
+<Text style={{ fontSize: 11, color: "#999" }}>
+  {user?.email || "guest@example.com"}
+</Text>
+
+              </View>
+            </View>
+
+            {/* Main Menu */}
+            {menuItems.map((item) => (
+              <TouchableOpacity
+                key={item.id}
+                style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
+                onPress={() => {
+                  navigation.navigate(item.screen);
+                  onClose();
+                }}
+              >
+                <Ionicons name={item.icon} size={20} color="#6C5CE7" />
+                <Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
+                  {item.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+
+            {/* Other Section */}
+            <Text
+              style={{
+                fontSize: 12,
+                fontWeight: "600",
+                color: "#999",
+                marginTop: 24,
+                marginBottom: 16,
+                textTransform: "uppercase",
+              }}
+            >
+              OTHER
+            </Text>
+
+            {otherItems.map((item) => (
+              <TouchableOpacity
+                key={item.id}
+                style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
+                onPress={() => {
+                  navigation.navigate(item.screen);
+                  onClose();
+                }}
+              >
+                <Ionicons name={item.icon} size={20} color="#6C5CE7" />
+                <Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
+                  {item.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+
+            {/* Dropdown Items Section */}
+            <Text
+              style={{
+                fontSize: 12,
+                fontWeight: "600",
+                color: "#999",
+                marginTop: 24,
+                marginBottom: 16,
+                textTransform: "uppercase",
+              }}
+            >
+              QUICK ACCESS
+            </Text>
+
+            {dropdownItems.map((item) => (
+              <TouchableOpacity
+                key={item.id}
+                style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
+                onPress={() => {
+                  navigation.navigate(item.screen);
+                  onClose();
+                }}
+              >
+                <Ionicons name={item.icon} size={20} color="#6C5CE7" />
+                <Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
+                  {item.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+
+            {/* Theme Toggle */}
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-around",
+                marginTop: 32,
+                marginBottom: 40,
+              }}
+            >
+              <TouchableOpacity
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  paddingHorizontal: 16,
+                  paddingVertical: 8,
+                  borderRadius: 20,
+                  backgroundColor: "#f5f5f5",
+                }}
+              >
+                <Ionicons name="sunny" size={16} color="#333" />
+                <Text style={{ marginLeft: 6, fontSize: 12, color: "#333" }}>Light</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  paddingHorizontal: 16,
+                  paddingVertical: 8,
+                  borderRadius: 20,
+                }}
+              >
+                <Ionicons name="moon" size={16} color="#999" />
+                <Text style={{ marginLeft: 6, fontSize: 12, color: "#999" }}>Dark</Text>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+// Product Card Component
+function ProductCard({ product }) {
+  return (
+    <View style={{ flex: 1, margin: 8 }}>
+      <View
+        style={{
+          backgroundColor: "#f5f5f5",
+          borderRadius: 8,
+          height: 200,
+          marginBottom: 8,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Ionicons name="image" size={40} color="#ccc" />
+      </View>
+      <Text style={{ fontSize: 12, fontWeight: "600", color: "#333", marginBottom: 4 }}>
+        {product.name}
+      </Text>
+      <Text style={{ fontSize: 14, fontWeight: "700", color: "#6C5CE7" }}>
+        {product.price} đ
+      </Text>
+    </View>
+  );
+}
+
+// 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 (
+    <View style={{ flex: 1, backgroundColor: "#fff", paddingTop: 20 }}>
+
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+          borderBottomWidth: 1,
+          borderBottomColor: "#eee",
+        }}
+      >
+        <TouchableOpacity onPress={() => setSideMenuVisible(true)}>
+          <Ionicons name="menu" size={24} color="#333" />
+        </TouchableOpacity>
+        <Text style={{ fontSize: 18, fontWeight: "700", color: "#333" }}>
+          Gemstore
+        </Text>
+        <TouchableOpacity>
+          <Ionicons name="notifications" size={24} color="#333" />
+        </TouchableOpacity>
+      </View>
+
+      {/* Main Content */}
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {/* Banner */}
+        <View
+          style={{
+            height: 200,
+            backgroundColor: "#d4a574",
+            marginHorizontal: 16,
+            marginVertical: 16,
+            borderRadius: 12,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
+            Autumn
+          </Text>
+          <Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
+            Collection
+          </Text>
+          <Text style={{ fontSize: 20, fontWeight: "600", color: "#fff", marginTop: 8 }}>
+            2022
+          </Text>
+        </View>
+
+        {/* Feature Products */}
+        <View style={{ paddingHorizontal: 16, marginBottom: 24 }}>
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 16,
+            }}
+          >
+            <Text style={{ fontSize: 16, fontWeight: "700", color: "#333" }}>
+              Feature Products
+            </Text>
+            <TouchableOpacity>
+              <Text style={{ fontSize: 12, color: "#6C5CE7" }}>Show all</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+            {featureProducts.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+
+      {/* Side Menu */}
+      <SideMenu
+        visible={sideMenuVisible}
+        onClose={() => setSideMenuVisible(false)}
+      />
     </View>
   );
 }

app/_layout.tsx

@@ -19,7 +19,7 @@ export default function RootLayout() {
 
   return (
     <Stack>
-      {!isLoggedIn && <Stack.Screen name="index" options={{ title: "Đăng ký / Đăng nhập" }} />}
+      {!isLoggedIn && <Stack.Screen name="index" options={{ headerShown: false }} />}
       {isLoggedIn && <Stack.Screen name="(tabs)" options={{ headerShown: false }} />}
     </Stack>
   );