ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

main menu change

Browse Source
This commit is contained in:
ivic00
2024-09-03 20:46:14 +02:00
parent 80a553695b
commit ee72c9c56a
2 changed files with 192 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
app/(auth)/_layout.tsx
View File

@ -1,69 +1,161 @@
import React from 'react'; import React from "react";
import {Drawer} from "expo-router/drawer"; import { Drawer } from "expo-router/drawer";
import {useSignOut} from "@/hooks/firebase/useSignOut"; import { useSignOut } from "@/hooks/firebase/useSignOut";
import {DrawerContentScrollView, DrawerItem, DrawerItemList} from "@react-navigation/drawer"; import {
DrawerContentScrollView,
DrawerItem,
DrawerItemList,
} from "@react-navigation/drawer";
import { Button, View, Text } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import Feather from "@expo/vector-icons/Feather";
import DrawerButton from "@/components/shared/DrawerButton";
import {
AntDesign,
FontAwesome6,
MaterialCommunityIcons,
} from "@expo/vector-icons";
export default function TabLayout() { export default function TabLayout() {
const {mutateAsync: signOut} = useSignOut() const { mutateAsync: signOut } = useSignOut();
return ( return (
<Drawer <Drawer
initialRouteName={"index"} initialRouteName={"index"}
screenOptions={{ screenOptions={{
headerShown: true, headerShown: true,
}} drawerStyle: { width: "90%", backgroundColor: "#f9f8f7" },
drawerContent={props => { }}
return ( drawerContent={(props) => {
<DrawerContentScrollView {...props}> return (
<DrawerItemList {...props} /> <DrawerContentScrollView {...props}>
<DrawerItem label="Logout" onPress={() => signOut()}/> <View centerH centerV margin-30>
</DrawerContentScrollView> <Text text50>Welcome to Kali</Text>
) </View>
}} <View style={{ flexDirection: "row", paddingHorizontal: 30 }}>
> <View style={{ flex: 1, paddingRight: 5 }}>
<Drawer.Screen <DrawerButton
name="index" title={"Calendar"}
options={{ color="rgb(7, 184, 199)"
drawerLabel: "Calendar", bgColor={"rgb(231, 248, 250)"}
title: "Calendar", pressFunc={() => props.navigation.navigate("calendar")}
}} icon={
<Feather
name="calendar"
size={30}
color="rgb(7, 184, 199)"
/>
}
/>
<DrawerButton
color="#e0ca03"
title={"Brain Dump"}
bgColor={"#fffacb"}
pressFunc={() => props.navigation.navigate("brain_dump")}
icon={<AntDesign name="book" size={30} color="#e0ca03" />}
/>
<DrawerButton
color="#50be0c"
title={"Groceries"}
bgColor={"#eef9e7"}
pressFunc={() => props.navigation.navigate("grocery")}
icon={
<MaterialCommunityIcons
name="food-apple-outline"
size={30}
color="#50be0c"
/>
}
/>
</View>
<View style={{ flex: 1 }}>
<DrawerButton
color="#fd1775"
title={"My Reminders"}
bgColor={"#ffe8f2"}
pressFunc={() => props.navigation.navigate("reminders")}
icon={
<FontAwesome6
name="clock-rotate-left"
size={28}
color="#fd1775"
/>
}
/>
<DrawerButton
color="#8005eb"
title={"To Dos"}
bgColor={"#f3e6fd"}
pressFunc={() => props.navigation.navigate("todos")}
icon={
<AntDesign name="checkcircleo" size={30} color="#8005eb" />
}
/>
<DrawerItem label="Logout" onPress={() => signOut()} />
</View>
</View>
<Button
label={"Manage Settings"}
backgroundColor="white"
color="black"
paddingV-30
marginH-30
borderRadius={15}
/> />
<Drawer.Screen </DrawerContentScrollView>
name="calendar" );
options={{ }}
drawerLabel: "Calendar", >
title: "Calendar", <Drawer.Screen
drawerItemStyle: {display: "none"} name="index"
}} options={{
/> drawerLabel: "Calendar",
<Drawer.Screen title: "Calendar",
name="brain_dump" }}
options={{ />
drawerLabel: "Brain Dump", <Drawer.Screen
title: "Brain Dump", name="calendar"
}} options={{
/> drawerLabel: "Calendar",
<Drawer.Screen title: "Calendar",
name="grocery" drawerItemStyle: { display: "none" },
options={{ }}
drawerLabel: "Grocery", />
title: "Grocery", <Drawer.Screen
}} name="brain_dump"
/> options={{
<Drawer.Screen drawerLabel: "Brain Dump",
name="reminders" title: "Brain Dump",
options={{ }}
drawerLabel: "Reminders", />
title: "Reminders", <Drawer.Screen
}} name="grocery"
/> options={{
<Drawer.Screen drawerLabel: "Grocery",
name="todos" title: "Grocery",
options={{ }}
drawerLabel: "To-Do", />
title: "To-Do", <Drawer.Screen
}} name="reminders"
/> options={{
</Drawer> drawerLabel: "Reminders",
); title: "Reminders",
}}
/>
<Drawer.Screen
name="todos"
options={{
drawerLabel: "To-Do",
title: "To-Do",
}}
/>
</Drawer>
);
} }
const styles = StyleSheet.create({
square: {
width: "100%",
aspectRatio: 1, // This ensures the height matches the width, creating a square
},
});

36
components/shared/DrawerButton.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from "react";
import { Button, View, Text } from "react-native-ui-lib";
interface IDrawerButtonProps {
bgColor: string;
color: string;
pressFunc: () => void;
icon: React.ReactNode;
title: string;
}
const DrawerButton = (props: IDrawerButtonProps) => {
return (
<Button
onPress={props.pressFunc}
label={props.title}
labelStyle={{fontSize: 14}}
color={props.color}
backgroundColor="white"
iconSource={() => (
<View
backgroundColor={props.bgColor}
width={60}
height={60}
style={{ borderRadius: 50 }}
centerV
centerH
>
{props.icon}
</View>
)}
style={{ aspectRatio: 1, borderRadius: 15, marginBottom: 12, flexDirection: 'column', justifyContent: "space-between", paddingVertical: 15 }}
>
</Button>
);
};
export default DrawerButton;