mobile test1
#deploy
This commit is contained in:
parent
26fcadc747
commit
3ea8990128
@ -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" />
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
@ -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)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user