Kirill
103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import Box from '@mui/material/Box'
|
||
import Button from '@mui/material/Button'
|
||
import Divider from '@mui/material/Divider'
|
||
import Drawer from '@mui/material/Drawer'
|
||
import Typography from '@mui/material/Typography'
|
||
import { STORE_NAME } from '@/shared/config'
|
||
import type { AuthUser } from '@/shared/model/auth'
|
||
import type { ColorScheme, ThemeModePreference } from '@/shared/model/theme'
|
||
import { BearLogo } from '@/shared/ui/BearLogo'
|
||
import { ModeSwitcher } from '@/shared/ui/ModeSwitcher'
|
||
import { SchemeSwitcher } from '@/shared/ui/SchemeSwitcher'
|
||
|
||
type Props = {
|
||
open: boolean
|
||
onClose: () => void
|
||
user: AuthUser | null
|
||
isAdmin: boolean
|
||
navItems: { label: string; to: string }[]
|
||
scheme: ColorScheme
|
||
mode: ThemeModePreference
|
||
resolvedMode: 'light' | 'dark'
|
||
onSchemeChange: (scheme: ColorScheme) => void
|
||
onCycleMode: () => void
|
||
onNavigate: (to: string) => void
|
||
onLogout: () => void
|
||
}
|
||
|
||
export function NavigationDrawer({
|
||
open,
|
||
onClose,
|
||
user,
|
||
isAdmin,
|
||
navItems,
|
||
scheme,
|
||
mode,
|
||
resolvedMode,
|
||
onSchemeChange,
|
||
onCycleMode,
|
||
onNavigate,
|
||
onLogout,
|
||
}: Props) {
|
||
const go = (to: string) => {
|
||
onClose()
|
||
onNavigate(to)
|
||
}
|
||
|
||
return (
|
||
<Drawer
|
||
open={open}
|
||
onClose={onClose}
|
||
slotProps={{ paper: { sx: { width: 320, maxWidth: '85vw' } } }}
|
||
ModalProps={{ keepMounted: true }}
|
||
>
|
||
<Box sx={{ p: 2 }}>
|
||
<Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<BearLogo sx={{ width: 28, height: 28 }} />
|
||
<Typography variant="h6">{STORE_NAME}</Typography>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||
{navItems.map((i) => (
|
||
<Button key={i.to} variant="text" onClick={() => go(i.to)} sx={{ justifyContent: 'flex-start' }}>
|
||
{i.label}
|
||
</Button>
|
||
))}
|
||
{!isAdmin && (
|
||
<Button variant="text" onClick={() => go(user ? '/cart' : '/auth')} sx={{ justifyContent: 'flex-start' }}>
|
||
Корзина
|
||
</Button>
|
||
)}
|
||
{user && !isAdmin && (
|
||
<Button variant="text" onClick={() => go('/me/orders')} sx={{ justifyContent: 'flex-start' }}>
|
||
Заказы
|
||
</Button>
|
||
)}
|
||
{!isAdmin && (
|
||
<Button variant="text" onClick={() => go(user ? '/me' : '/auth')} sx={{ justifyContent: 'flex-start' }}>
|
||
{user ? 'Профиль' : 'Вход / регистрация'}
|
||
</Button>
|
||
)}
|
||
{!user && isAdmin && (
|
||
<Button variant="text" onClick={() => go('/auth')} sx={{ justifyContent: 'flex-start' }}>
|
||
Вход / регистрация
|
||
</Button>
|
||
)}
|
||
{user && (
|
||
<Button variant="text" color="error" onClick={onLogout} sx={{ justifyContent: 'flex-start' }}>
|
||
Выход
|
||
</Button>
|
||
)}
|
||
</Box>
|
||
|
||
<Divider sx={{ my: 2 }} />
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
<SchemeSwitcher value={scheme} onChange={onSchemeChange} orientation="horizontal" />
|
||
<ModeSwitcher mode={mode} resolvedMode={resolvedMode} onCycleMode={onCycleMode} />
|
||
</Box>
|
||
</Box>
|
||
</Drawer>
|
||
)
|
||
}
|