84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Pressable, Text, View } from "react-native";
|
|
import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
|
|
import { Menu, PanelLeft } from "lucide-react-native";
|
|
import { ScreenHeader } from "./screen-header";
|
|
import { usePanelStore } from "@/stores/panel-store";
|
|
|
|
interface MenuHeaderProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
rightContent?: ReactNode;
|
|
}
|
|
|
|
export function MenuHeader({ title, subtitle, rightContent }: MenuHeaderProps) {
|
|
const { theme } = useUnistyles();
|
|
const isMobile =
|
|
UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
|
|
const mobileView = usePanelStore((state) => state.mobileView);
|
|
const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
|
|
const toggleAgentList = usePanelStore((state) => state.toggleAgentList);
|
|
|
|
const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
|
|
const MenuIcon = isMobile ? Menu : PanelLeft;
|
|
const menuIconColor = !isMobile && isOpen
|
|
? theme.colors.foreground
|
|
: theme.colors.foregroundMuted;
|
|
|
|
return (
|
|
<ScreenHeader
|
|
left={
|
|
<>
|
|
<Pressable onPress={toggleAgentList} style={styles.menuButton}>
|
|
<MenuIcon size={isMobile ? 20 : 16} color={menuIconColor} />
|
|
</Pressable>
|
|
{title && (
|
|
<View style={styles.titleContainer}>
|
|
<Text style={styles.title} numberOfLines={1}>
|
|
{title}
|
|
</Text>
|
|
{subtitle && (
|
|
<Text style={styles.subtitle} numberOfLines={1}>
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
</>
|
|
}
|
|
right={rightContent}
|
|
leftStyle={styles.left}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
left: {
|
|
gap: theme.spacing[2],
|
|
},
|
|
menuButton: {
|
|
padding: {
|
|
xs: theme.spacing[3],
|
|
md: theme.spacing[2],
|
|
},
|
|
borderRadius: theme.borderRadius.lg,
|
|
},
|
|
titleContainer: {
|
|
flex: 1,
|
|
gap: theme.spacing[0],
|
|
},
|
|
title: {
|
|
fontSize: theme.fontSize.base,
|
|
fontWeight: {
|
|
xs: "400",
|
|
md: "300",
|
|
},
|
|
color: theme.colors.foreground,
|
|
},
|
|
subtitle: {
|
|
fontSize: 12,
|
|
fontWeight: "300",
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
}));
|