* Extended functionalities

* Added different UIs
2026-06-24 21:43:40 +02:00
parent 282f4864c4
commit f15bb7a916
348 changed files with 59057 additions and 498 deletions
--- a/meal-plan-frontend-mobile/app/(main)/(tabs)/_layout.tsx
+++ b/meal-plan-frontend-mobile/app/(main)/(tabs)/_layout.tsx
@@ -0,0 +1,80 @@
+import type { ComponentProps } from 'react';
+import { Tabs } from 'expo-router';
+import { useTranslation } from 'react-i18next';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { useAppearance } from '@/src/context/AppearanceContext';
+
+function TabIcon(props: { name: ComponentProps<typeof FontAwesome>['name']; color: string }) {
+  return <FontAwesome size={22} style={{ marginBottom: -2 }} name={props.name} color={props.color} />;
+}
+
+export default function TabLayout() {
+  const { t } = useTranslation();
+  const { colors } = useAppearance();
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: colors.brand,
+        tabBarInactiveTintColor: colors.textMuted,
+        tabBarStyle: {
+          backgroundColor: colors.surface,
+          borderTopColor: colors.border,
+        },
+        headerStyle: { backgroundColor: colors.surface },
+        headerTintColor: colors.text,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: t('nav.dashboard'),
+          tabBarIcon: ({ color }) => <TabIcon name="home" color={String(color)} />,
+        }}
+      />
+      <Tabs.Screen
+        name="meals"
+        options={{
+          title: t('nav.allMeals'),
+          tabBarIcon: ({ color }) => <TabIcon name="list" color={String(color)} />,
+        }}
+      />
+      <Tabs.Screen
+        name="diet"
+        options={{
+          title: t('nav.dietTracker'),
+          tabBarIcon: ({ color }) => <TabIcon name="heartbeat" color={String(color)} />,
+        }}
+      />
+      <Tabs.Screen
+        name="planner"
+        options={{
+          title: t('nav.planner'),
+          tabBarIcon: ({ color }) => <TabIcon name="calendar" color={String(color)} />,
+        }}
+      />
+      <Tabs.Screen
+        name="shopping"
+        options={{
+          title: t('nav.shopping'),
+          tabBarIcon: ({ color }) => <TabIcon name="shopping-cart" color={String(color)} />,
+        }}
+      />
+      <Tabs.Screen
+        name="manage"
+        options={{
+          title: t('nav.manageMeals'),
+          tabBarIcon: ({ color }) => <TabIcon name="plus-square" color={String(color)} />,
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: t('nav.settings'),
+          tabBarIcon: ({ color }) => <TabIcon name="cog" color={String(color)} />,
+        }}
+      />
+    </Tabs>
+  );
+}