82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { Animated, Pressable, Text } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { router } from "expo-router";
|
|
|
|
import { IoniconsName } from "@/types/index";
|
|
|
|
interface SidebarItemProps {
|
|
paddingLeft: Animated.Value;
|
|
routerPushValue: any;
|
|
isMobile: boolean;
|
|
isActive: (path: string) => boolean;
|
|
iconTranslateX: Animated.Value;
|
|
textOpacity: Animated.Value;
|
|
path: string;
|
|
icon: IoniconsName;
|
|
label: string;
|
|
isFirst?: boolean;
|
|
showLabel?: boolean;
|
|
}
|
|
|
|
export const SidebarItem = ({
|
|
paddingLeft,
|
|
routerPushValue,
|
|
isMobile,
|
|
isActive,
|
|
iconTranslateX,
|
|
textOpacity,
|
|
path,
|
|
icon,
|
|
label,
|
|
isFirst,
|
|
showLabel = true,
|
|
}: SidebarItemProps) => {
|
|
return (
|
|
<Animated.View
|
|
style={{
|
|
paddingLeft,
|
|
paddingRight: 8,
|
|
}}
|
|
>
|
|
<Pressable
|
|
onPress={() => router.push(routerPushValue)}
|
|
className={`flex-row items-center py-3 rounded-lg w-full ${
|
|
isFirst && !isMobile ? "mt-4" : isMobile ? "mt-1" : ""
|
|
} ${showLabel ? "justify-start" : "justify-center"}`}
|
|
style={{
|
|
backgroundColor: isActive(path) ? "#5A4570" : "transparent",
|
|
}}
|
|
>
|
|
<Animated.View
|
|
style={{
|
|
alignItems: "center",
|
|
...(showLabel
|
|
? { paddingLeft: 8, transform: [{ translateX: iconTranslateX }] }
|
|
: {}),
|
|
}}
|
|
>
|
|
<Ionicons name={icon as IoniconsName} size={24} color="white" />
|
|
</Animated.View>
|
|
{showLabel && (
|
|
<Animated.View
|
|
style={{
|
|
opacity: textOpacity,
|
|
marginLeft: 12,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<Text
|
|
className={`${
|
|
isActive(path) ? "text-white font-medium" : "text-gray-300"
|
|
}`}
|
|
numberOfLines={1}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</Animated.View>
|
|
)}
|
|
</Pressable>
|
|
</Animated.View>
|
|
);
|
|
};
|