fix: external link at drawer menu (79906e97) · Commits · Isfand Yar Khan / ever-demand

packages/shop-mobile-expo/src/components/CustomDrawerContent/Item.tsx

+27 −25

Original line number	Diff line number	Diff line
		@@ -22,7 +22,33 @@ const Item: React.FC<DrawerLinkItem> = ({
		external,
		focused,
		}) => {
		// NAVIGATION
		const navigation = useNavigation();

		// LOCAL STYLES
		const STYLES = StyleSheet.create({
		container: { position: 'relative', ...GS.w100, ...GS.mb1 },
		touchable: { ...GS.w100, ...GS.inlineItems, zIndex: 1 },
		touchableCard: { ...GS.w100, ...GS.px0, borderRadius: 0 },
		touchableCardContent: {
		...GS.px2,
		},
		touchableCardContentFocused: {
		backgroundColor: CC.primaryHightLight + '20',
		},
		focusedIndicator: {
		...GS.h100,
		...GS.bgSecondary,
		position: 'absolute',
		top: 0,
		left: 0,
		width: 4,
		borderTopEndRadius: 4,
		borderBottomEndRadius: 4,
		zIndex: 2,
		},
		});

		return (
		<View style={STYLES.container}>
		<TouchableCard
		@@ -42,7 +68,6 @@ const Item: React.FC<DrawerLinkItem> = ({
		name: icon,
		// TODO: think to use this feature (below e.g)
		// focused ? 'heart' : 'heart-outline'
		// eslint-disable-next-line no-mixed-spaces-and-tabs
		}
		: undefined
		}
		@@ -70,26 +95,3 @@ const Item: React.FC<DrawerLinkItem> = ({
		};

		export default Item;

		const STYLES = StyleSheet.create({
		container: { position: 'relative', ...GS.w100, ...GS.mb1 },
		touchable: { ...GS.w100, ...GS.inlineItems, zIndex: 1 },
		touchableCard: { ...GS.w100, ...GS.px0, borderRadius: 0 },
		touchableCardContent: {
		...GS.px2,
		},
		touchableCardContentFocused: {
		backgroundColor: CC.primaryHightLight + '20',
		},
		focusedIndicator: {
		...GS.h100,
		...GS.bgSecondary,
		position: 'absolute',
		top: 0,
		left: 0,
		width: 4,
		borderTopEndRadius: 4,
		borderBottomEndRadius: 4,
		zIndex: 2,
		},
		});

+10 −8

Original line number	Diff line number	Diff line
		@@ -74,14 +74,16 @@ const CustomDrawer: React.FC<ContentProps> = ({
		linksGroup.linkItems.map(
		(linkItem, linkItem_id) => (
		<Item
		key={linkItem_id}
		label={linkItem.label}
		path={linkItem.path}
		icon={linkItem.icon}
		focused={
		{...{
		key: linkItem_id,
		label: linkItem.label,
		path: linkItem.path,
		icon: linkItem.icon,
		focused:
		currentRouteName ===
		linkItem.path
		}
		linkItem.path,
		external: linkItem.external,
		}}
		/>
		),
		)}