Artem Kashaev
ede064cc11
- Create global styles and theme management - Implement app shell layout with sidebar navigation - Add authentication layout and pages for login and registration - Develop dashboard page with placeholder content - Introduce routing guards for guest-only and authenticated routes - Set up Zustand for state management of authentication and theme - Create API types and structures for CRM entities - Configure Vite with PWA support and Tailwind CSS
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
||
import { LogOut } from 'lucide-react'
|
||
|
||
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from '@/components/ui/dropdown-menu'
|
||
import { useToast } from '@/components/ui/use-toast'
|
||
import { useAuthStore } from '@/stores/auth-store'
|
||
|
||
export const UserMenu = () => {
|
||
const navigate = useNavigate()
|
||
const logout = useAuthStore((state) => state.logout)
|
||
const user = useAuthStore((state) => state.user)
|
||
const { toast } = useToast()
|
||
|
||
const initials = user?.name
|
||
?.split(' ')
|
||
.map((part) => part[0])
|
||
.join('')
|
||
.slice(0, 2)
|
||
.toUpperCase()
|
||
|
||
const handleLogout = () => {
|
||
logout()
|
||
toast({ title: 'Вы вышли из системы' })
|
||
navigate('/login', { replace: true })
|
||
}
|
||
|
||
return (
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger className="rounded-full focus:outline-none focus:ring-2 focus:ring-ring">
|
||
<Avatar className="h-9 w-9">
|
||
<AvatarFallback>{initials || (user?.email ?? '?')[0]?.toUpperCase() || 'U'}</AvatarFallback>
|
||
</Avatar>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="w-56">
|
||
<DropdownMenuLabel>
|
||
<div className="flex flex-col">
|
||
<span className="text-sm font-semibold">{user?.name ?? 'Сотрудник'}</span>
|
||
<span className="text-xs text-muted-foreground">{user?.email}</span>
|
||
</div>
|
||
</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem className="gap-2 text-destructive" onSelect={handleLogout}>
|
||
<LogOut className="h-4 w-4" /> Выйти
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
)
|
||
}
|