This shit aint working but juuuust incase I need the code I'll keep it here

app/CustomDrawerContent.tsx

@@ -0,0 +1,28 @@
+// CustomDrawerContent.tsx
+import { DrawerContentScrollView } from '@react-navigation/drawer';
+import React from 'react';
+import { Category, categories } from '../types/Category';
+import { SideMenu } from './SideMenu';
+
+type CustomDrawerContentProps = {
+	selected: Category;
+	setSelected: (key: Category) => void;
+	handleLogout: () => void;
+};
+
+export function CustomDrawerContent({
+	selected,
+	setSelected,
+	handleLogout,
+}: CustomDrawerContentProps) {
+	return (
+		<DrawerContentScrollView style={{ flex: 1, paddingTop: 0 }}>
+			<SideMenu
+				menuItems={categories.map(c => ({ key: c.key as Category, label: c.label }))}
+				selected={selected}
+				onSelect={key => setSelected(key)}
+				onLogout={handleLogout}
+			/>
+		</DrawerContentScrollView>
+	);
+}

app/HomeScreen.tsx

@@ -1,138 +1,40 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import React from 'react';
-import * as Notifications from "expo-notifications";
+import { ScrollView, Text, View } from 'react-native';
-import React, { useEffect, useState } from "react";
+import { SafeAreaView } from 'react-native-safe-area-context';
-import { Linking, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { Category } from 'types/Category';
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Item } from 'types/Item';
-import { Category, categories, categoryKeys, categoryTitles } from "types/Category";
+import { styles } from '../styles/HomeScreen.styles';
-import { Item } from "types/Item";
-import { usePushNotifications } from "../hooks/usePushNotifications";
-import { styles } from "../styles/HomeScreen.styles";
 
-const API_URL = "https://notifier.gansejunge.com";
+type HomeScreenProps = {
-const STORAGE_KEY = "notifications";
+	selectedCategory?: Category;
-const API_KEY_STORAGE = "api_key";
+	onSelectCategory?: (key: Category) => void;
-
+	data?: Item[];
-export default function HomeScreen() {
+	apiKey?: string | null;
-	const [data, setData] = useState<Item[]>([]);
+	setApiKey?: (key: string) => void;
-	const [selected, setSelected] = useState<Category>("home");
+	tempKey?: string;
-	const [menuOpen, setMenuOpen] = useState(false);
+	setTempKey?: (key: string) => void;
-	const [apiKey, setApiKey] = useState<string | null>(null);
-	const [tempKey, setTempKey] = useState("");
-
-	const pushToken = usePushNotifications({
-		apiKey,
-		backendUrl: API_URL,
-		appVersion: "1.0.0",
-		locale: "en-uk",
-	});
-
-	// Load API key on startup
-	useEffect(() => {
-		(async () => {
-			const storedKey = await AsyncStorage.getItem(API_KEY_STORAGE);
-			if (storedKey) setApiKey(storedKey);
-		})();
-	}, []);
-
-	// Load saved notifications
-	useEffect(() => {
-		(async () => {
-			try {
-				const stored = await AsyncStorage.getItem(STORAGE_KEY);
-				if (stored) setData(JSON.parse(stored));
-			} catch (err) {
-				console.error("Failed to load stored notifications:", err);
-			}
-		})();
-	}, []);
-
-
-	// Listen for incoming notifications
-	useEffect(() => {
-		const subscription = Notifications.addNotificationReceivedListener(notification => {
-			const rawCategory = notification.request.content.data?.category as Category | undefined;
-			const category: Category = rawCategory && categoryKeys.includes(rawCategory) ? rawCategory : "home";
-
-			const item: Item = {
-				timestamp: Date.now(),
-				category,
-				title: notification.request.content.title || "No title",
-				info: notification.request.content.body || "No description",
-				link: (notification.request.content.data?.link as string) || "#",
 };
 
-			setData(prev => {
+export default function HomeScreen({
-				const updated = [...prev, item].sort((a, b) => b.timestamp - a.timestamp);
+	selectedCategory = 'home',
-				AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+	data = [],
-				return updated;
+}: HomeScreenProps) {
-			});
+	const filteredData = selectedCategory === 'home'
-		});
+		? data
-		return () => subscription.remove();
+		: data.filter(item => item.category === selectedCategory);
-	}, []);
-
-	const filteredData = selected === "home" ? data : data.filter(item => item.category === selected);
-	const menuItems = categories;
-
-	if (!apiKey) {
-		return (
-			<SafeAreaView style={styles.container}>
-				<View style={{ padding: 20 }}>
-					<Text style={{ marginBottom: 10 }}>Enter API Key:</Text>
-					<TextInput
-						value={tempKey}
-						onChangeText={setTempKey}
-						style={{ borderWidth: 1, padding: 8, marginBottom: 10 }}
-					/>
-					<TouchableOpacity
-						onPress={async () => {
-							await AsyncStorage.setItem(API_KEY_STORAGE, tempKey);
-							setApiKey(tempKey);
-						}}
-						style={{ backgroundColor: "blue", padding: 10 }}
-					>
-						<Text style={{ color: "white" }}>Save</Text>
-					</TouchableOpacity>
-				</View>
-			</SafeAreaView>
-		);
-	}
 
 	return (
 		<SafeAreaView style={styles.container}>
-			{/* Side Menu */}
-			<View style={[styles.sideMenu, menuOpen && styles.sideMenuOpen]}>
-				{menuItems.map(item => (
-					<TouchableOpacity
-						key={item.key}
-						style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
-						onPress={() => {
-							setSelected(item.key);
-							setMenuOpen(false);
-						}}
-					>
-						<Text style={styles.menuText}>{item.label}</Text>
-					</TouchableOpacity>
-				))}
-			</View>
-
-			{/* Main Content */}
 			<View style={styles.mainContent}>
-				<TouchableOpacity style={styles.menuButton} onPress={() => setMenuOpen(!menuOpen)}>
+				<Text style={styles.title}>{selectedCategory}</Text>
-					<Text style={styles.menuButtonText}>☰</Text>
-				</TouchableOpacity>
-				<Text style={styles.title}>{categoryTitles[selected]}</Text>
-
 				<ScrollView style={styles.dataContainer}>
 					{filteredData.length === 0 ? (
-						<Text style={{ textAlign: "center", marginTop: 20 }}>No items yet</Text>
+						<Text style={{ textAlign: 'center', marginTop: 20 }}>No items yet</Text>
 					) : (
 						filteredData.map(item => (
 							<View key={`${item.timestamp}-${item.title}`} style={styles.dataItem}>
 								<Text style={styles.dataTitle}>{item.title}</Text>
 								<Text style={styles.dataDescription}>{item.info}</Text>
-								<TouchableOpacity onPress={() => Linking.openURL(item.link)}>
-									<Text style={{ color: "blue" }}>Read more</Text>
-								</TouchableOpacity>
 							</View>
 						))
 					)}
@@ -141,4 +43,3 @@ export default function HomeScreen() {
 		</SafeAreaView>
 	);
 }
-

app/SideMenu.tsx

@@ -1,38 +1,46 @@
+//SideMenu.tsx
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Category } from "../types/Category";
 
 export type MenuItem = {
 	label: string;
-	key: string;
+	key: Category;
 };
 
 type SideMenuProps = {
 	menuItems: MenuItem[];
-	selected: string;
+	selected: Category;
-	onSelect: (key: string) => void;
+	onSelect: (key: Category) => void;
+	onLogout?: () => void;
 };
 
-export default function SideMenu({ menuItems, selected, onSelect }: SideMenuProps) {
+
+export function SideMenu({ menuItems, selected, onSelect, onLogout }: SideMenuProps) {
 	return (
 		<View style={styles.sideMenu}>
 			{menuItems.map(item => (
 				<TouchableOpacity
 					key={item.key}
-					style={[
+					style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
-						styles.menuItem,
-						selected === item.key && styles.menuItemSelected,
-					]}
 					onPress={() => onSelect(item.key)}>
 					<Text style={styles.menuText}>{item.label}</Text>
 				</TouchableOpacity>
 			))}
+
+			{onLogout && (
+				<TouchableOpacity
+					style={[styles.menuItem, styles.logoutButton]}
+					onPress={onLogout}>
+					<Text style={[styles.menuText, { color: '#fff' }]}>Logout</Text>
+				</TouchableOpacity>
+			)}
 		</View>
 	);
 }
 
 const styles = StyleSheet.create({
 	sideMenu: {
-		width: 180,
 		backgroundColor: '#333',
 		paddingTop: 40,
 		paddingHorizontal: 16,
@@ -48,5 +56,15 @@ const styles = StyleSheet.create({
 	menuText: {
 		color: '#fff',
 		fontSize: 18,
+		textAlign: 'center',
+	},
+	logoutButton: {
+		marginTop: 'auto',
+		backgroundColor: '#111',
+		paddingVertical: 16,
+		borderRadius: 4,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'column',
 	},
 });

app/index.tsx

@@ -1,11 +1,108 @@
-import React from 'react';
+// index.tsx
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import React, { useEffect, useState } from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import { useNotificationListener } from '../hooks/useNotificationListener';
+import { usePushNotifications } from '../hooks/usePushNotifications';
+import { Category } from '../types/Category';
+import { Item } from '../types/Item';
+import { CustomDrawerContent } from './CustomDrawerContent';
 import HomeScreen from './HomeScreen';
 
+const STORAGE_KEY = 'notifications';
+const API_KEY_STORAGE = 'api_key';
+const API_URL = 'https://notifier.gansejunge.com';
+
+const Drawer = createDrawerNavigator();
+
+
+
+
 export default function App() {
+	const [data, setData] = useState<Item[]>([]);
+	const [selected, setSelected] = useState<Category>('home');
+	const [apiKey, setApiKey] = useState<string | null>(null);
+	const [tempKey, setTempKey] = useState('');
+
+	const pushToken = usePushNotifications({
+		apiKey,
+		backendUrl: API_URL,
+		appVersion: '1.0.0',
+		locale: 'en-uk',
+	});
+
+	useEffect(() => {
+		(async () => {
+			const storedKey = await AsyncStorage.getItem(API_KEY_STORAGE);
+			if (storedKey) setApiKey(storedKey);
+		})();
+	}, []);
+
+	useEffect(() => {
+		(async () => {
+			try {
+				const stored = await AsyncStorage.getItem(STORAGE_KEY);
+				if (stored) setData(JSON.parse(stored));
+			} catch (err) {
+				console.error('Failed to load stored notifications:', err);
+			}
+		})();
+	}, []);
+
+	useNotificationListener((items: Item[]) => {
+		setData(items);
+	});
+
+	const handleLogout = async () => {
+		await AsyncStorage.removeItem(API_KEY_STORAGE);
+		await AsyncStorage.removeItem(STORAGE_KEY);
+		setApiKey(null);
+		setData([]);
+		setSelected('home');
+	};
+
+	if (!apiKey) {
+		// Show API key entry screen before Drawer
 		return (
 			<SafeAreaProvider>
-			<HomeScreen />
+				<HomeScreen
+					apiKey={apiKey}
+					setApiKey={setApiKey}
+					tempKey={tempKey}
+					setTempKey={setTempKey}
+				/>
+			</SafeAreaProvider>
+		);
+	}
+
+	return (
+		<SafeAreaProvider>
+				<Drawer.Navigator
+					screenOptions={{
+						drawerType: 'slide',
+						drawerStyle: { width: 250 },
+						headerShown: false,
+					}}
+					drawerContent={() => (
+						<CustomDrawerContent
+							selected={selected}
+							setSelected={setSelected}
+							handleLogout={handleLogout}
+						/>
+					)}
+				>
+					<Drawer.Screen name="Home">
+						{() => (
+							<HomeScreen
+								selectedCategory={selected}
+								onSelectCategory={setSelected}
+								data={data}
+							/>
+						)}
+					</Drawer.Screen>
+				</Drawer.Navigator>
 		</SafeAreaProvider>
 	);
 }

eas.json

@@ -8,7 +8,7 @@
       "developmentClient": true,
       "distribution": "internal"
     },
-    "preview": {
+    "release": {
       "android": {"buildType": "apk"}
     },
     "debug":{

hooks/useNotificationListener.ts

@@ -48,26 +48,30 @@ export function useNotificationListener(onItems: (items: Item[]) => void) {
 }
 
 // Convert Expo notification → Item
-function mapNotificationToItem(notification: Notifications.Notification): Item | null {
+export function mapNotificationToItem(notification: Notifications.Notification): Item | null {
 	try {
 		const content = notification.request.content;
-		const rawCategory = content.data?.category as Category | undefined;
+		const data = content.data || {};
-		const category: Category = rawCategory && categoryKeys.includes(rawCategory) ? rawCategory : "home";
+
+		const rawCategory = data.category as string | undefined;
+		const category: Category = categoryKeys.includes(rawCategory as Category)
+			? (rawCategory as Category)
+			: "utility";
 
 		return {
-			timestamp: Date.now(), // could use backend timestamp if provided
+			timestamp: data.timestamp ? Number(data.timestamp) : Date.now(),
 			category,
 			title: content.title ?? "No title",
-			info: content.body ?? "No details",
+			info: content.body ?? "No description",
-			link: (content.data?.link as string) ?? "",
+			link: typeof data.link === "string" ? data.link : "#",
 		};
-	} catch (e) {
+	} catch (err) {
-		console.error("Failed to map notification to Item:", e);
+		console.error("Failed to map notification to Item:", err);
 		return null;
 	}
 }
 
-export { mapNotificationToItem };
+//export { mapNotificationToItem };
 
 // Save a new item into storage and update state
 async function addItem(item: Item, onItems: (items: Item[]) => void) {

package.json

@@ -14,6 +14,8 @@
     "@expo/metro-runtime": "~6.1.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/drawer": "^7.5.0",
+    "@react-navigation/native": "^7.1.8",
     "expo": "~54.0.11",
     "expo-constants": "~18.0.9",
     "expo-device": "~8.0.9",
@@ -22,8 +24,8 @@
     "expo-router": "~6.0.9",
     "expo-splash-screen": "~31.0.10",
     "expo-system-ui": "~6.0.7",
-    "react": "^19.2.0",
+    "react": "19.1.0",
-    "react-dom": "^19.2.0",
+    "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0"

setup.sh

@@ -0,0 +1 @@
+npx expo install expo-constants expo-linking react-native-safe-area-context react-native-screens expo-system-ui

styles/HomeScreen.styles.ts

@@ -17,6 +17,15 @@ export const styles = StyleSheet.create({
 		width: 180,
 		paddingHorizontal: 16,
 	},
+	//sideMenuOverlay: {
+	//position: "absolute",
+	//top: 0,
+	//left: 0,
+	//bottom: 0,
+	//width: "70%",
+	//zIndex: 10,
+	//backgroundColor: "#222",
+	//},
 	menuItem: {
 		paddingVertical: 16,
 		paddingHorizontal: 8,

types/Category.ts

@@ -10,6 +10,6 @@ const baseCategories = [
 ] as const;
 
 
-export const categoryKeys: Category[] = baseCategories.map(c => c.key);
+export const categoryKeys: Category[] = baseCategories.map(c => c.key) as Category[];
 export const categories: { label: string; key: Category }[] = baseCategories.map(c => ({ label: c.label, key: c.key }));
 export const categoryTitles: Record<Category, string> = Object.fromEntries(baseCategories.map(c => [c.key, c.title])) as Record<Category, string>;