feat(app): add borderless prop to ScreenHeader and MenuHeader

This commit is contained in:
Mohamed Boudra
2026-03-29 23:10:40 +07:00
parent a7439c8e56
commit 487af3c822
2 changed files with 9 additions and 2 deletions
@@ -10,6 +10,7 @@ import { getShortcutOs } from "@/utils/shortcut-platform";
interface MenuHeaderProps { interface MenuHeaderProps {
title?: string; title?: string;
rightContent?: ReactNode; rightContent?: ReactNode;
borderless?: boolean;
} }
interface SidebarMenuToggleProps { interface SidebarMenuToggleProps {
@@ -75,7 +76,7 @@ export function SidebarMenuToggle({
); );
} }
export function MenuHeader({ title, rightContent }: MenuHeaderProps) { export function MenuHeader({ title, rightContent, borderless }: MenuHeaderProps) {
return ( return (
<ScreenHeader <ScreenHeader
left={ left={
@@ -90,6 +91,7 @@ export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
} }
right={rightContent} right={rightContent}
leftStyle={styles.left} leftStyle={styles.left}
borderless={borderless}
/> />
); );
} }
@@ -15,13 +15,14 @@ interface ScreenHeaderProps {
right?: ReactNode; right?: ReactNode;
leftStyle?: StyleProp<ViewStyle>; leftStyle?: StyleProp<ViewStyle>;
rightStyle?: StyleProp<ViewStyle>; rightStyle?: StyleProp<ViewStyle>;
borderless?: boolean;
} }
/** /**
* Shared frame for the home/back headers so we only maintain padding, border, * Shared frame for the home/back headers so we only maintain padding, border,
* and safe-area logic in one place. * and safe-area logic in one place.
*/ */
export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeaderProps) { export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }: ScreenHeaderProps) {
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm"; const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
@@ -47,6 +48,7 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeade
paddingLeft: baseHorizontalPadding + collapsedSidebarInset.left, paddingLeft: baseHorizontalPadding + collapsedSidebarInset.left,
paddingRight: baseHorizontalPadding + collapsedSidebarInset.right, paddingRight: baseHorizontalPadding + collapsedSidebarInset.right,
}, },
borderless && styles.borderless,
]} ]}
{...dragHandlers} {...dragHandlers}
> >
@@ -87,4 +89,7 @@ const styles = StyleSheet.create((theme) => ({
alignItems: "center", alignItems: "center",
gap: theme.spacing[2], gap: theme.spacing[2],
}, },
borderless: {
borderBottomWidth: 0,
},
})); }));