feat: add hamburger meu to open drawer

Zenda-Cross · Sep 12, 2024 · fed544c · fed544c
1 parent 5971ed2
commit fed544c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 7 deletions.
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -11,17 +11,29 @@ import {HomeStackParamList, SearchStackParamList} from '../App';
 import useContentStore from '../lib/zustand/contentStore';
 import useHeroStore from '../lib/zustand/herostore';
 import {Skeleton} from 'moti/skeleton';
-import {MmmkvCache} from '../lib/Mmkv';
+import {MMKV, MmmkvCache} from '../lib/Mmkv';
 import {manifest} from '../lib/Manifest';
 import {Info} from '../lib/providers/types';
 import {Feather} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import {DrawerLayout} from 'react-native-gesture-handler';
 
-function Hero() {
+function Hero({
+  isDrawerOpen,
+  drawerRef,
+}: {
+  isDrawerOpen: boolean;
+  drawerRef: React.RefObject<DrawerLayout>;
+}) {
   const [post, setPost] = useState<any>();
   const [loading, setLoading] = useState(true);
   const [searchActive, setSearchActive] = useState(false);
   const {provider} = useContentStore(state => state);
   const {hero} = useHeroStore(state => state);
+  const [showHamburgerMenu] = useState(
+    MMKV.getBool('showHamburgerMenu') || false,
+  );
+  const [isDrawerDisabled] = useState(MMKV.getBool('disableDrawer') || false);
   const navigation =
     useNavigation<NativeStackNavigationProp<HomeStackParamList>>();
   const searchNavigation =
@@ -74,7 +86,23 @@ function Hero() {
   });
   return (
     <View className="relative">
-      <View className="absolute w-full top-6 p-2 z-30 justify-center items-center">
+      <View className="absolute w-full top-6 px-2 mt-2 z-30 flex-row justify-between items-center">
+        {!searchActive && (
+          <View
+            className={`${
+              showHamburgerMenu && !isDrawerDisabled
+                ? 'opacity-100'
+                : 'opacity-0'
+            }`}>
+            <Pressable
+              className={`${isDrawerOpen ? 'opacity-0' : 'opacity-100'}`}
+              onPress={() => {
+                drawerRef.current?.openDrawer();
+              }}>
+              <Ionicons name="menu-sharp" size={27} color="white" />
+            </Pressable>
+          </View>
+        )}
         {searchActive && (
           <MotiView
             from={{opacity: 0, scale: 0.5}}
@@ -105,13 +133,12 @@ function Hero() {
           </MotiView>
         )}
         {!searchActive && (
-          <Pressable
-            className="w-full items-end absolute right-3 top-3"
-            onPress={() => setSearchActive(true)}>
+          <Pressable className="" onPress={() => setSearchActive(true)}>
             <Feather name="search" size={24} color="white" />
           </Pressable>
         )}
       </View>
+
       <Skeleton show={loading} colorMode="dark">
         <Image
           source={{

diff --git a/src/screens/home/Home.tsx b/src/screens/home/Home.tsx
@@ -38,6 +38,7 @@ const Home = ({}: Props) => {
   const recentlyWatched = useWatchHistoryStore(state => state).history;
   const ShowRecentlyWatched = MMKV.getBool('showRecentlyWatched');
   const drawer = useRef<DrawerLayout>(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const disableDrawer = MMKV.getBool('disableDrawer') || false;
 
   const {provider} = useContentStore(state => state);
@@ -141,6 +142,15 @@ const Home = ({}: Props) => {
           drawerType="slide"
           edgeWidth={70}
           useNativeAnimations={false}
+          // onDrawerOpen={() => setIsDrawerOpen(true)}
+          // onDrawerClose={() => setIsDrawerOpen(false)}
+          // onDrawerStateChanged={(newState, drawerWillShow) => {
+          //   if (drawerWillShow) {
+          //     setIsDrawerOpen(true);
+          //   } else {
+          //     setIsDrawerOpen(false);
+          //   }
+          // }}
           ref={drawer}
           drawerBackgroundColor={'black'}
           renderNavigationView={() =>
@@ -168,7 +178,7 @@ const Home = ({}: Props) => {
                 }}
               />
             }>
-            <Hero />
+            <Hero drawerRef={drawer} isDrawerOpen={isDrawerOpen} />
             <View className="p-4">
               {!loading &&
                 recentlyWatched?.length > 0 &&

diff --git a/src/screens/settings/Preference.tsx b/src/screens/settings/Preference.tsx
@@ -40,6 +40,10 @@ const Preferences = () => {
     MMKV.getBool('showMediaControls') || true,
   );
 
+  const [showHamburgerMenu, setShowHamburgerMenu] = useState<boolean>(
+    MMKV.getBool('showHamburgerMenu') || false,
+  );
+
   return (
     <ScrollView className="w-full h-full bg-black">
       <Text className="text-white mt-10 ml-4 font-bold text-2xl">
@@ -151,6 +155,28 @@ const Preferences = () => {
           />
         </View>
 
+        {/* show hamburger menu */}
+        {!disableDrawer && (
+          <View className="flex-row items-center px-4 justify-between mt-5 bg-tertiary p-3 rounded-md">
+            <Text className="text-white font-semibold">
+              Show Hamburger Menu
+            </Text>
+            <View className="w-20" />
+            <Switch
+              thumbColor={showHamburgerMenu ? primary : 'gray'}
+              value={showHamburgerMenu}
+              onValueChange={() => {
+                MMKV.setBool('showHamburgerMenu', !showHamburgerMenu);
+                setShowHamburgerMenu(!showHamburgerMenu);
+                ToastAndroid.show(
+                  'Restart App to Apply Changes',
+                  ToastAndroid.SHORT,
+                );
+              }}
+            />
+          </View>
+        )}
+
         {/* show media controls */}
         <View className="flex-row items-center px-4 justify-between mt-5 bg-tertiary p-3 rounded-md">
           <Text className="text-white font-semibold">
@@ -179,6 +205,10 @@ const Preferences = () => {
             onValueChange={() => {
               MMKV.setBool('showRecentlyWatched', !showRecentlyWatched);
               setShowRecentlyWatched(!showRecentlyWatched);
+              ToastAndroid.show(
+                'Restart App to Apply Changes',
+                ToastAndroid.SHORT,
+              );
             }}
           />
         </View>