fixed like action, better dark mode, bottom navigation working, added taskcollection

resources/js/guest/components/BottomNav.tsx

@@ -1,11 +1,28 @@
 import React from 'react';
-import { NavLink, useParams } from 'react-router-dom';
+import { NavLink, useParams, useLocation } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { GalleryHorizontal, Home, Trophy } from 'lucide-react';
+import { CheckSquare, GalleryHorizontal, Home, Trophy } from 'lucide-react';
+import { useEventData } from '../hooks/useEventData';
 
-function TabLink({ to, children }: { to: string; children: React.ReactNode }) {
+function TabLink({
+  to,
+  children,
+  isActive
+}: {
+  to: string;
+  children: React.ReactNode;
+  isActive: boolean;
+}) {
   return (
-    <NavLink to={to} className={({ isActive }) => (isActive ? 'text-foreground' : 'text-muted-foreground')}>
+    <NavLink
+      to={to}
+      className={`
+        flex flex-col items-center gap-1 h-14 p-2 transition-all duration-200 rounded-lg backdrop-blur-md
+        ${isActive
+          ? 'bg-gradient-to-t from-pink-500/90 to-pink-400/90 text-white shadow-lg scale-105 border border-white/30'
+          : 'text-gray-300 hover:bg-white/10 hover:text-pink-300 hover:scale-105 hover:border-white/20 border border-transparent'
+        }`}
+    >
       {children}
     </NavLink>
   );
@@ -13,25 +30,60 @@ function TabLink({ to, children }: { to: string; children: React.ReactNode }) {
 
 export default function BottomNav() {
   const { slug } = useParams();
+  const location = useLocation();
+  const { event } = useEventData();
+  
   if (!slug) return null; // Only show bottom nav within event context
   const base = `/e/${encodeURIComponent(slug)}`;
+  const currentPath = location.pathname;
+  const locale = event?.default_locale || 'de';
+
+  // Translations
+  const translations = {
+    de: {
+      home: 'Start',
+      tasks: 'Aufgaben',
+      achievements: 'Erfolge',
+      gallery: 'Galerie'
+    },
+    en: {
+      home: 'Home',
+      tasks: 'Tasks',
+      achievements: 'Achievements',
+      gallery: 'Gallery'
+    }
+  };
+
+  const t = translations[locale as keyof typeof translations] || translations.de;
+
+  // Improved active state logic
+  const isHomeActive = currentPath === base || currentPath === `/${slug}`;
+  const isTasksActive = currentPath.startsWith(`${base}/tasks`) || currentPath === `${base}/upload`;
+  const isAchievementsActive = currentPath.startsWith(`${base}/achievements`);
+  const isGalleryActive = currentPath.startsWith(`${base}/gallery`) || currentPath.startsWith(`${base}/photos`);
+
   return (
-    <div className="fixed inset-x-0 bottom-0 z-20 border-t bg-white/90 px-3 py-2 backdrop-blur dark:bg-black/40">
-      <div className="mx-auto flex max-w-md items-center justify-between">
-        <TabLink to={`${base}`}>
-          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
-            <Home className="h-5 w-5" /> <span className="text-xs">Start</span>
-          </Button>
+    <div className="fixed inset-x-0 bottom-0 z-30 border-t border-white/20 bg-black/30 px-2 py-2 backdrop-blur-xl shadow-xl dark:bg-black/40 dark:border-gray-800/50">
+      <div className="mx-auto flex max-w-sm items-center justify-around">
+        <TabLink to={`${base}`} isActive={isHomeActive}>
+          <div className="flex flex-col items-center gap-1">
+            <Home className="h-5 w-5" /> <span className="text-xs">{t.home}</span>
+          </div>
         </TabLink>
-        <TabLink to={`${base}/gallery`}>
-          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
-            <GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">Galerie</span>
-          </Button>
+        <TabLink to={`${base}/tasks`} isActive={isTasksActive}>
+          <div className="flex flex-col items-center gap-1">
+            <CheckSquare className="h-5 w-5" /> <span className="text-xs">{t.tasks}</span>
+          </div>
         </TabLink>
-        <TabLink to={`${base}/achievements`}>
-          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
-            <Trophy className="h-5 w-5" /> <span className="text-xs">Erfolge</span>
-          </Button>
+        <TabLink to={`${base}/achievements`} isActive={isAchievementsActive}>
+          <div className="flex flex-col items-center gap-1">
+            <Trophy className="h-5 w-5" /> <span className="text-xs">{t.achievements}</span>
+          </div>
+        </TabLink>
+        <TabLink to={`${base}/gallery`} isActive={isGalleryActive}>
+          <div className="flex flex-col items-center gap-1">
+            <GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">{t.gallery}</span>
+          </div>
         </TabLink>
       </div>
     </div>