[#31] Update drawer menu

subadapcocuk · Nov 11, 2021 · 1cd2942 · 1cd2942
1 parent 6bdfe4b
commit 1cd2942
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "expo-web-browser": "~10.0.3",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-native": "0.64.2",
+    "react-native": "0.64.3",
     "react-native-dialog": "^9.2",
     "react-native-elements": "^3.4",
     "react-native-gesture-handler": "~1.10.2",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
-    "expo-cli": "^4.12",
+    "expo-cli": "^4.13",
     "standard-version": "^9.3",
     "standard-version-expo": "^1.0"
   }

diff --git a/src/components/buttons.js b/src/components/buttons.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
+import { DrawerItem } from "@react-navigation/drawer";
 import { Text, TouchableOpacity } from "react-native";
 import { styles, PURPLE } from "../helpers/styles";
 
@@ -22,3 +23,12 @@ export const IconPress = ({
     </TouchableOpacity>
   );
 };
+
+export const IconDrawerItem = ({ onPress, icon, label, style }) => (
+  <DrawerItem
+    icon={({ color, size }) => (
+      <FontAwesomeIcon style={styles.icon} {...{ icon, color, size }} />
+    )}
+    {...{ style, label, onPress }}
+  />
+);
diff --git a/src/components/menu.js b/src/components/menu.js
@@ -1,3 +1,5 @@
+import React, { useState } from "react";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
 import {
   faBook,
   faDonate,
@@ -7,99 +9,93 @@ import {
   faQuestion,
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
-import React, { useState } from "react";
-import { View } from "react-native";
-import { IconPress } from "../components/buttons";
-import About from "../components/about";
 import {
   faCreativeCommonsNc,
   faFacebook,
   faInstagram,
   faTwitter,
 } from "@fortawesome/free-brands-svg-icons";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconDrawerItem } from "../components/buttons";
+import About from "../components/about";
 
-export const Menu = ({ navigation }) => {
+export const Menu = (props) => {
   const [about, setAbout] = useState(false);
-  const insets = useSafeAreaInsets();
+
+  const { navigation } = props;
 
   const openUrl = (url) => {
     navigation.navigate("Page", { url });
   };
 
   return (
-    <View
-      style={{
-        flex: 1,
-        paddingTop: insets.top,
-        border: 10,
-      }}
-    >
-      <View style={{ alignSelf: "flex-end" }}>
-        <IconPress onPress={navigation.closeDrawer} icon={faTimes} />
-      </View>
-      {/*<Text style={{ fontSize: 24 }}>Şubadap Müzik Çalar</Text>*/}
-      <View>
-        <IconPress
-          onPress={() => navigation.navigate("Playlist")}
+    <>
+      <DrawerContentScrollView {...props}>
+        <DrawerItemList {...props} />
+        <IconDrawerItem
+          style={{ alignSelf: "flex-end" }}
+          onPress={navigation.closeDrawer}
+          icon={faTimes}
+        />
+        <IconDrawerItem
           icon={faMusic}
-          text="Tüm Şarkılar"
+          label="Tüm Şarkılar"
+          onPress={() => navigation.navigate("Playlist")}
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => navigation.navigate("Albums")}
           icon={faHome}
-          text="Albümler"
+          label="Albümler"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => openUrl("https://ansiklopedi.subadapcocuk.org/")}
           icon={faBook}
-          text={"Ansiklopedi"}
+          label={"Ansiklopedi"}
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => openUrl("https://subadapcocuk.org/")}
           icon={faHome}
-          text="Şubadap Sitesi"
+          label="Şubadap Sitesi"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => openUrl("https://www.kreosus.com/subadapcocuk")}
           icon={faDonate}
-          text="Kreos'ta Bağış Yap"
+          label="Kreosus'ta Bağış Yap"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => openUrl("https://www.facebook.com/subadapcocuk")}
           icon={faFacebook}
-          text="Facebook"
+          label="Facebook"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => openUrl("https://www.instagram.com/subadapcocuk")}
           icon={faInstagram}
-          text="Instagram"
+          label="Instagram"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => openUrl("https://twitter.com/subadap")}
           icon={faTwitter}
-          text="Twitter"
+          label="Twitter"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => openUrl("https://subadapcocuk.org/iletisim/")}
           icon={faEnvelope}
-          text="İletişim"
+          label="İletişim"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() =>
             openUrl("http://ansiklopedi.subadapcocuk.org/index.php/Copyleft")
           }
           icon={faCreativeCommonsNc}
-          text="Copyleft"
+          label="Copyleft"
         />
-        <IconPress
+        <IconDrawerItem
           onPress={() => setAbout(true)}
           icon={faQuestion}
-          text="Uygulama Hakkında"
+          label="Uygulama Hakkında"
         />
-      </View>
+      </DrawerContentScrollView>
       <About visible={about} close={() => setAbout(false)} />
-    </View>
+    </>
   );
 };