1 files changed, 32 insertions, 7 deletions
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 6f11e806..62949746 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
-
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import {TAGG_DARK_BLUE} from '../../constants';
+import {AuthContext, ProfileContext} from '../../routes/';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import Avatar from './Avatar';
+import MoreInfoDrawer from './MoreInfoDrawer';
 import FollowCount from './FollowCount';
-import {View, Text, StyleSheet} from 'react-native';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {AuthContext, ProfileContext} from '../../routes/';
 
 type ProfileHeaderProps = {
   isProfileView: boolean;
@@ -22,8 +24,26 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   } = isProfileView
     ? React.useContext(ProfileContext)
     : React.useContext(AuthContext);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
   return (
     <View style={styles.container}>
+      {!isProfileView && (
+        <>
+          <TouchableOpacity
+            style={styles.more}
+            onPress={() => {
+              setDrawerVisible(true);
+            }}>
+            <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
+          </TouchableOpacity>
+          <MoreInfoDrawer
+            isOpen={drawerVisible}
+            setIsOpen={setDrawerVisible}
+            isProfileView={isProfileView}
+          />
+        </>
+      )}
       <View style={styles.row}>
         <Avatar style={styles.avatar} isProfileView={isProfileView} />
         <View style={styles.header}>
@@ -51,8 +71,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 const styles = StyleSheet.create({
   container: {
     top: SCREEN_HEIGHT / 2.4,
-    paddingHorizontal: SCREEN_WIDTH / 20,
-    marginBottom: SCREEN_HEIGHT / 10,
+    width: '100%',
     position: 'absolute',
   },
   row: {
@@ -76,6 +95,12 @@ const styles = StyleSheet.create({
   follows: {
     marginHorizontal: SCREEN_HEIGHT / 50,
   },
+  more: {
+    position: 'absolute',
+    right: '5%',
+    marginTop: '4%',
+    zIndex: 1,
+  },
 });
 
 export default ProfileHeader;