Started navigation

front/Navigation.tsx

@@ -31,6 +31,7 @@ import ErrorView from './views/ErrorView';
 import GenreDetailsView from './views/GenreDetailsView';
 import GoogleView from './views/GoogleView';
 import VerifiedView from './views/VerifiedView';
+import TabNavigation from './components/V2/TabNavigation';
 
 // Util function to hide route props in URL
 const removeMe = () => '';
@@ -38,8 +39,8 @@ const removeMe = () => '';
 const protectedRoutes = () =>
 	({
 		Home: {
-			component: HomeView,
-			options: { title: translate('welcome'), headerLeft: null },
+			component: TabNavigation,
+			options: { title: translate('welcome'), headerShown: false },
 			link: '/',
 		},
 		Play: { component: PlayView, options: { title: translate('play') }, link: '/play/:songId' },

front/components/V2/TabNavigation.tsx

@@ -0,0 +1,139 @@
+import { View, Pressable, Text, Image } from 'react-native';
+import { Divider, Text as NBText, Center } from 'native-base';
+import TabNavigationButton from './TabNavigationButton';
+import TabNavigationList from './TabNavigationList';
+import { useAssets } from 'expo-asset';
+import useColorScheme from '../../hooks/colorScheme';
+
+const TabNavigation = () => {
+	const colorScheme = useColorScheme();
+	const [icon] = useAssets(
+		colorScheme == 'light'
+			? require('../../assets/icon_light.png')
+			: require('../../assets/icon_dark.png')
+	);
+	const buttons = [
+		{
+			icon: 'icon',
+			label: 'label',
+			onPress: () => {},
+			onLongPress: () => {},
+			isActive: true,
+		},
+		{
+			icon: 'icon',
+			label: 'salut',
+			onPress: () => {},
+			onLongPress: () => {},
+			isActive: false,
+		},
+	];
+
+	const others = [
+		{
+			label: 'Recently played',
+		},
+		{
+			label: 'Short',
+		},
+		{ label: 'Twinkle Twinkle' },
+	];
+	return (
+		<View
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				width: '100%',
+				height: '100%',
+			}}
+		>
+			<View>
+				<Center>
+					<View
+						style={{
+							display: 'flex',
+							flexDirection: 'row',
+							alignItems: 'center',
+							justifyContent: 'flex-start',
+							flexShrink: 0,
+							padding: '10px',
+						}}
+					>
+						<Image
+							source={{ uri: icon?.at(0)?.uri }}
+							style={{
+								aspectRatio: 1,
+								width: '40px',
+								height: 'auto',
+								marginRight: '10px',
+							}}
+						/>
+						<NBText fontSize={'2xl'} selectable={false}>
+							Chromacase
+						</NBText>
+					</View>
+				</Center>
+				<View
+					style={{
+						display: 'flex',
+						width: '300px',
+						height: 'auto',
+						padding: '32px',
+						flexDirection: 'column',
+						justifyContent: 'space-between',
+						alignItems: 'flex-start',
+						flexGrow: 1,
+					}}
+				>
+					<TabNavigationList
+						style={{
+							flexShrink: 0,
+							gap: '20px',
+						}}
+					>
+						{buttons.map((button, index) => (
+							<TabNavigationButton
+								key={'tab-navigation-button-' + index}
+								{...button}
+							/>
+						))}
+					</TabNavigationList>
+					<TabNavigationList>
+						<Divider />
+						<TabNavigationList>
+							{others.map((other, index) => (
+								<View
+									key={'tab-navigation-other-' + index}
+									style={{
+										paddingHorizontal: '16px',
+										paddingVertical: '10px',
+									}}
+								>
+									<Text>{other.label}</Text>
+								</View>
+							))}
+						</TabNavigationList>
+						<Divider />
+						<TabNavigationList
+							style={{
+								gap: '20px',
+							}}
+						>
+							{[{ label: 'Settings' }, { label: 'Logout' }].map((button, index) => (
+								<TabNavigationButton
+									key={'tab-navigation-setting-button-' + index}
+									{...button}
+								/>
+							))}
+						</TabNavigationList>
+					</TabNavigationList>
+				</View>
+			</View>
+			<View>
+				<Text>Main content page</Text>
+			</View>
+		</View>
+	);
+};
+
+export default TabNavigation;

front/components/V2/TabNavigationButton.tsx

@@ -0,0 +1,72 @@
+import { View, Text } from 'react-native';
+import { Pressable } from 'native-base';
+
+type TabNavigationButtonProps = {
+	icon?: string;
+	label: string;
+	onPress: () => void;
+	onLongPress: () => void;
+	isActive: boolean;
+};
+
+const TabNavigationButton = (props: TabNavigationButtonProps) => {
+	return (
+		<Pressable
+			onPress={props.onPress}
+			onLongPress={props.onLongPress}
+			style={{
+				width: '100%',
+			}}
+		>
+			{({ isPressed, isHovered }) => (
+				<View
+					style={{
+						display: 'flex',
+						flexDirection: 'row',
+						alignSelf: 'stretch',
+						alignItems: 'center',
+						justifyContent: 'flex-start',
+						padding: '10px',
+						borderRadius: '8px',
+						flexGrow: 0,
+						backgroundColor: (() => {
+							if (isPressed) {
+								return 'rgba(0, 0, 0, 0.1)';
+							} else if (isHovered) {
+								return 'rgba(0, 0, 0, 0.05)';
+							} else if (props.isActive) {
+								return 'rgba(0, 0, 0, 0.1)';
+							} else {
+								return 'transparent';
+							}
+						})(),
+					}}
+				>
+					{props.icon && (
+						<View
+							style={{
+								marginRight: '10px',
+							}}
+						>
+							<Text>{props.icon}</Text>
+						</View>
+					)}
+					<View>
+						<Text numberOfLines={1} selectable={false}>
+							{props.label}
+						</Text>
+					</View>
+				</View>
+			)}
+		</Pressable>
+	);
+};
+
+TabNavigationButton.defaultProps = {
+	icon: undefined,
+	onPress: () => {},
+	onLongPress: () => {},
+	isActive: false,
+};
+
+export default TabNavigationButton;

front/components/V2/TabNavigationList.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, StyleProp, ViewStyle } from 'react-native';
+
+type TabNavigationListProps = {
+	children: React.ReactNode;
+	style?: StyleProp<ViewStyle>;
+};
+
+const TabNavigationList = (props: TabNavigationListProps) => {
+	return (
+		<View
+			style={[
+				{
+					display: 'flex',
+					alignItems: 'flex-start',
+					alignSelf: 'stretch',
+					flexDirection: 'column',
+					gap: '8px',
+				},
+				props.style,
+			]}
+		>
+			{props.children}
+		</View>
+	);
+};
+
+export default TabNavigationList;