feature

deksripsi:
- merapikan folder profile
- Issu: Drawer

app/(application)/_layout.tsx

@@ -89,35 +89,20 @@ export default function ApplicationLayout() {
         />
 
         {/* Profile */}
-        {/* <Stack.Screen
+        <Stack.Screen
-          name="profile/index"
+          name="profile"
           options={{
-            title: "Profile",
+            headerShown: false,
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
           }}
-        /> */}
+        />
 
-        {/* <Stack.Screen
+        {/* Portofolio */}
-          name="profile/[id]"
+        <Stack.Screen
+          name="portofolio"
           options={{
-            title: "Profile",
+            headerShown: false,
-            headerLeft: () => (
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
           }}
-        /> */}
+        />
 
         {/* Event */}
         <Stack.Screen

app/(application)/portofolio/[id].tsx

@@ -1,9 +0,0 @@
-import { Text, View } from "react-native";
-
-export default function Portofolio() {
-    return (
-        <View>
-            <Text>Portofolio</Text>
-        </View>
-    );
-}

app/(application)/portofolio/[id]/index.tsx

@@ -0,0 +1,32 @@
+import BackButton from "@/components/_ShareComponent/BackButton";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { Styles } from "@/styles/global-styles";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { Text } from "react-native";
+
+export default function Portofolio() {
+    const { id } = useLocalSearchParams();
+  return (
+    <ViewWrapper>
+      {/* Header */}
+      <Stack.Screen
+        options={{
+          title: "Portofolio",
+          headerLeft: () => <BackButton />,
+        //   headerRight: () => (
+        //     <TouchableOpacity onPress={openDrawer}>
+        //       <Ionicons
+        //         name="ellipsis-vertical"
+        //         size={20}
+        //         color={MainColor.yellow}
+        //       />
+        //     </TouchableOpacity>
+        //   ),
+          headerStyle: Styles.headerStyle,
+          headerTitleStyle: Styles.headerTitleStyle,
+        }}
+      />
+      <Text style={Styles.textLabel}>Portofolio {id}</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/portofolio/_layout.tsx

@@ -0,0 +1,26 @@
+
+import BackButton from "@/components/_ShareComponent/BackButton";
+import { Styles } from "@/styles/global-styles";
+import { Stack } from "expo-router";
+
+export default function PortofolioLayout() {
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerStyle: Styles.headerStyle,
+          headerTitleStyle: Styles.headerTitleStyle,
+          headerTitleAlign: "center",
+          headerBackButtonDisplayMode: "minimal",
+          headerLeft: () => <BackButton />,
+        }}
+      >
+        {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}
+        <Stack.Screen
+          name="[id]/create"
+          options={{ title: "Tambah Portofolio" }}
+        />
+      </Stack>
+    </>
+  );
+}

app/(application)/profile/[id]/edit.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function ProfileEdit() {
+    const { id } = useLocalSearchParams();
+    return (
+        <View>
+            <Text>Profile Edit {id}</Text>
+        </View>
+    )
+}

app/(application)/profile/[id]/index.tsx

@@ -1,5 +1,5 @@
-
 import { IMenuDrawerItem } from "@/components/_Interface/types";
+import BackButton from "@/components/_ShareComponent/BackButton";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import AlertCustom from "@/components/Alert/AlertCustom";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
@@ -10,7 +10,7 @@ import { Styles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useRef, useState } from "react";
-import { Animated, Text, TouchableOpacity } from "react-native";
+import { Animated, Text, TouchableHighlight, TouchableOpacity, View } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
@@ -21,22 +21,22 @@ export default function Profile() {
     {
       icon: "create",
       label: "Edit profile",
-      path: "/(application)/profile/edit",
+      path: `/(application)/profile/${id}/edit`,
     },
     {
       icon: "camera",
       label: "Ubah foto profile",
-      path: `/(application)/profile/update-photo/${id}`,
+      path: `/(application)/profile/${id}/update-photo`,
     },
     {
       icon: "image",
       label: "Ubah latar belakang",
-      path: `/(application)/profile/update-background/${id}`,
+      path: `/(application)/profile/${id}/update-background`,
     },
     {
       icon: "add-circle",
       label: "Tambah portofolio",
-      path: `/(application)/portofolio/create/${id}`,
+      path: `/(application)/portofolio/${id}/create`,
     },
     // {
     //   icon: "settings",
@@ -81,14 +81,7 @@ export default function Profile() {
         <Stack.Screen
           options={{
             title: "Profile",
-            headerLeft: () => (
+            headerLeft: () => <BackButton />,
-              <Ionicons
-                name="arrow-back"
-                size={20}
-                color={MainColor.yellow}
-                onPress={() => router.back()}
-              />
-            ),
             headerRight: () => (
               <TouchableOpacity onPress={openDrawer}>
                 <Ionicons
@@ -98,9 +91,25 @@ export default function Profile() {
                 />
               </TouchableOpacity>
             ),
+            headerStyle: Styles.headerStyle,
+            headerTitleStyle: Styles.headerTitleStyle,
           }}
         />
         <Text style={Styles.textLabel}>Profile {id}</Text>
+        <TouchableHighlight
+          onPress={() => router.push(`/(application)/portofolio/${id}`)}
+        >
+          <View
+            style={{
+              backgroundColor: MainColor.white,
+              padding: 10,
+              borderRadius: 10,
+              marginTop: 10,
+            }}
+          >
+            <Text>Portofolio</Text>
+          </View>
+        </TouchableHighlight>
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}

app/(application)/profile/_layout.tsx

@@ -0,0 +1,38 @@
+import { MainColor } from "@/constants/color-palet";
+import { Styles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+
+export default function ProfileLayout() {
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerStyle: Styles.headerStyle,
+          headerTitleStyle: Styles.headerTitleStyle,
+          headerTitleAlign: "center",
+          headerBackButtonDisplayMode: "minimal",
+          headerLeft: () => (
+            <Ionicons
+              name="arrow-back"
+              size={20}
+              color={MainColor.yellow}
+              onPress={() => router.back()}
+            />
+          ),
+        }}
+      >
+        {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}
+        <Stack.Screen name="[id]/edit" options={{ title: "Edit Profile" }} />
+        <Stack.Screen
+          name="[id]/update-photo"
+          options={{ title: "Update Foto" }}
+        />
+        <Stack.Screen
+          name="[id]/update-background"
+          options={{ title: "Update Latar Belakang" }}
+        />
+      </Stack>
+    </>
+  );
+}

app/(application)/profile/edit.tsx

@@ -1,9 +0,0 @@
-import { Text, View } from "react-native";
-
-export default function ProfileEdit() {
-    return (
-        <View>
-            <Text>Profile Edit</Text>
-        </View>
-    )
-}

components/Drawer/DrawerCustom.tsx

@@ -58,7 +58,9 @@ DrawerCustomProps) {
       <View
         style={styles.overlay}
         pointerEvents="auto"
-        onTouchStart={closeDrawer}
+        onTouchStart={() => {
+          setTimeout(closeDrawer, 0);
+        }}
       />
 
       {/* Custom Bottom Drawer */}

components/_ShareComponent/BackButton.tsx

@@ -0,0 +1,16 @@
+import { Ionicons } from "@expo/vector-icons";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+const BackButton = () => {
+  return (
+    <Ionicons
+      name="arrow-back"
+      size={20}
+      color={MainColor.yellow}
+      onPress={() => router.back()}
+    />
+  );
+};
+
+export default BackButton;

screens/Home/tabsList.ts

@@ -33,7 +33,7 @@ export  const tabsHome: ITabs[] = [
     icon: "person-outline",
     activeIcon: "person",
     label: "Profile",
-    path: "/profile/coba-id",
+    path: "/profile/id-percoban-123456",
     isActive: true,
     disabled: false,
   },

screens/Profile/menuDrawerSection.tsx

@@ -14,6 +14,7 @@ export default function Profile_MenuDrawerSection({
     //   console.log("Logout clicked");
       setShowLogoutAlert(true);
     } else {
+      console.log("PATH >> ",item.path);
       router.push(item.path as any);
     }
   };