sidebar

components/Header.tsx

@@ -6,10 +6,13 @@ import { View, Text, Pressable, Image } from "react-native";
 import type { APISelfUser } from "@/types/zipline";
 import { styles } from "@/styles/components/header";
 import type React from "react";
+import Sidebar from "@/components/Sidebar.tsx"
 
 export default function Header({ children }: PropsWithChildren) {
 	const [avatar, setAvatar] = useState<string | null>(null);
 	const [user, setUser] = useState<APISelfUser | null>(null);
+	
+	const [sidebarOpen, setSidebarOpen] = useState<boolean>(false);
 
 	useEffect(() => {
 		if (!avatar || !user) {
@@ -18,7 +21,7 @@ export default function Header({ children }: PropsWithChildren) {
 				const user = await getCurrentUser();
 
 				setAvatar(avatar);
-				setUser(user);
+				setUser(typeof user === "string" ? null : user);
 			})();
 		}
 	}, [avatar, user]);
@@ -38,7 +41,7 @@ export default function Header({ children }: PropsWithChildren) {
 									<MaterialIcons name="menu" color={"#fff"} size={40} />
 								)}
 								onPress={() => {
-									console.debug("menu pressed");
+									setSidebarOpen((prev) => !prev)
 								}}
 							/>
 						</View>
@@ -79,6 +82,7 @@ export default function Header({ children }: PropsWithChildren) {
 			) : (
 				<View />
 			)}
+			<Sidebar open={sidebarOpen} paddingTop={user ? 70 : 0} />
 			{children}
 		</View>
 	);

components/ShareIntentShorten.tsx

@@ -122,8 +122,8 @@ export default function ShareIntentShorten({
 
 						const shortenedUrlData = await createURL(urlData);
 
-						if (!shortenedUrlData)
-							return setError("An error occurred while shortening the URL");
+						if (typeof shortenedUrlData === "string")
+							return setError(shortenedUrlData);
 
 						const saved = await Clipboard.setStringAsync(shortenedUrlData.url);
 

components/Sidebar.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View, Dimensions, Text } from "react-native";
+import { styles } from "@/styles/components/sidebar";
+import { usePathname } from "expo-router"
+
+interface Props {
+    open: boolean;
+    paddingTop: number;
+}
+
+export default function Sidebar({ open = false, paddingTop = 10 }: Props) {
+    const screenWidth = Dimensions.get("window").width;
+    const translateX = useRef(new Animated.Value(-screenWidth)).current;
+    
+    const pathname = usePathname()
+
+    useEffect(() => {
+        Animated.timing(translateX, {
+            toValue: open ? 0 : -screenWidth,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+        
+        console.log(styles, open);
+    }, [open, screenWidth]);
+
+    return (
+        <Animated.View style={[styles.sidebar, { transform: [{ translateX }], width: screenWidth, paddingTop }]}>
+            {/* Your sidebar content goes here */}
+            <View style={styles.sidebarContent}>
+                <Text style={{color: "white"}}>{pathname}</Text>
+            </View>
+        </Animated.View>
+    );
+}