mobile test1

#deploy
This commit is contained in:
martin 2026-01-20 18:51:52 +01:00
parent 26fcadc747
commit 3ea8990128
3 changed files with 30 additions and 27 deletions

View File

@ -4,7 +4,7 @@ import { LogOut, Menu } from 'lucide-react';
import { useAuth } from '@/contexts/AuthContext'; import { useAuth } from '@/contexts/AuthContext';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import DashboardContainer from '../dashboard/DashboardContainer'; import DashboardContainer from '../dashboard/DashboardContainer';
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { HeaderProvider, useHeader } from '@/contexts/HeaderContext'; import { HeaderProvider, useHeader } from '@/contexts/HeaderContext';
const MainShell: React.FC = () => { const MainShell: React.FC = () => {
@ -61,9 +61,9 @@ const MainShell: React.FC = () => {
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
{/* Header */} {/* Header */}
<header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pointer-events-none">
<div className="container flex h-16 items-center justify-between px-4"> <div className="container grid h-16 grid-cols-[auto,1fr,auto] items-center px-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 pointer-events-auto">
<div <div
className="flex items-center gap-2 cursor-pointer" className="flex items-center gap-2 cursor-pointer"
onClick={() => navigate('/')} onClick={() => navigate('/')}
@ -82,36 +82,39 @@ const MainShell: React.FC = () => {
)} )}
</div> </div>
{header.mobileMenu ? ( <DropdownMenu>
<DropdownMenu> <DropdownMenuTrigger asChild>
<DropdownMenuTrigger asChild> <Button variant="ghost" size="icon" className="md:hidden" aria-label="Menü">
<Button variant="ghost" size="icon" className="md:hidden" aria-label="Menü"> <Menu className="h-5 w-5" />
<Menu className="h-5 w-5" /> </Button>
</Button> </DropdownMenuTrigger>
</DropdownMenuTrigger> <DropdownMenuContent align="start">
<DropdownMenuContent align="start">{header.mobileMenu}</DropdownMenuContent> {header.mobileMenu}
</DropdownMenu> {header.mobileMenu ? <DropdownMenuSeparator /> : null}
) : null} <DropdownMenuItem onClick={logout} className="gap-2">
<LogOut className="h-4 w-4" />
<span>Abmelden</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
{header.left ? ( {header.left ? (
<div className="hidden md:flex items-center gap-2">{header.left}</div> <div className="hidden md:flex items-center gap-2">{header.left}</div>
) : null} ) : null}
</div> </div>
{header.title && ( <div className="text-center text-sm font-medium pointer-events-none">
<div className="absolute left-1/2 -translate-x-1/2 text-center text-sm font-medium"> {header.title || ''}
{header.title} </div>
</div>
)}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 pointer-events-auto">
<div className="hidden md:block text-sm text-muted-foreground"> <div className="hidden md:block text-sm text-muted-foreground">
Hallo, {user?.name?.split(' ')[0] || 'Benutzer'} Hallo, {user?.name?.split(' ')[0] || 'Benutzer'}
</div> </div>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="gap-1.5 text-sm" className="gap-1.5 text-sm hidden md:inline-flex"
onClick={logout} onClick={logout}
> >
<LogOut className="h-4 w-4" /> <LogOut className="h-4 w-4" />

View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useCallback, useState } from 'react';
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { type Event } from '@/features/event/api/eventService'; import { type Event } from '@/features/event/api/eventService';
import { type DashboardModule, type DashboardModuleContext } from '@/components/dashboard/dashboardModuleTypes'; import { type DashboardModule, type DashboardModuleContext } from '@/components/dashboard/dashboardModuleTypes';
@ -66,9 +66,9 @@ const Dashboard: React.FC<DashboardProps> = ({ onActionClick, hasActiveEvent, cu
? visibleModules.find((m) => m.id === activeModuleId) || null ? visibleModules.find((m) => m.id === activeModuleId) || null
: null; : null;
const handleBackToOverview = () => { const handleBackToOverview = useCallback(() => {
setActiveModuleId(null); setActiveModuleId(null);
}; }, []);
const renderContent = () => { const renderContent = () => {
if (activeModule) { if (activeModule) {

View File

@ -501,12 +501,12 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
isActive isActive
? 'bg-primary/10 text-primary shadow-sm' ? 'bg-primary/10 text-primary shadow-sm'
: 'text-foreground/80 hover:bg-primary/5 hover:text-foreground' : 'text-foreground/80 hover:bg-primary/5 hover:text-foreground'
}` } focus-visible:ring-0 focus-visible:ring-offset-0`
: `relative w-10 h-10 justify-center rounded-xl px-0 transition-colors ${ : `relative w-10 h-10 justify-center rounded-xl px-0 transition-colors ${
isActive isActive
? 'bg-primary/10 text-primary shadow-sm' ? 'bg-primary/10 text-primary shadow-sm'
: 'text-foreground/80 hover:bg-primary/5 hover:text-foreground' : 'text-foreground/80 hover:bg-primary/5 hover:text-foreground'
}` } focus-visible:ring-0 focus-visible:ring-offset-0`
} }
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
> >
@ -538,7 +538,7 @@ const EventFormInline: React.FC<EventFormInlineProps> = ({ onSuccess, onCancel,
type="button" type="button"
variant="ghost" variant="ghost"
size="sm" size="sm"
className={`flex-1 h-11 px-1 justify-center rounded-xl transition-colors ${ className={`flex-1 h-11 px-1 justify-center rounded-xl transition-colors focus-visible:ring-0 focus-visible:ring-offset-0 ${
isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-primary/5 hover:text-foreground' isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-primary/5 hover:text-foreground'
}`} }`}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}