base commit

2026-04-29 18:34:25 +05:00
parent f6b6959268
commit 326521c9e6
20 changed files with 1825 additions and 36 deletions
@@ -0,0 +1,136 @@
+import type { ReactNode } from 'react'
+import { useMemo, useState } from 'react'
+import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
+import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined'
+import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'
+import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined'
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
+import Alert from '@mui/material/Alert'
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+import { useTheme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { useUnit } from 'effector-react'
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
+import { AddressesPage } from '@/pages/me/ui/sections/AddressesPage'
+import { MessagesPage } from '@/pages/me/ui/sections/MessagesPage'
+import { OrdersPage } from '@/pages/me/ui/sections/OrdersPage'
+import { SettingsPage } from '@/pages/me/ui/sections/SettingsPage'
+import { $user } from '@/shared/model/auth'
+
+type NavItem = {
+  to: string
+  label: string
+  icon: ReactNode
+}
+
+export function MeLayoutPage() {
+  const user = useUnit($user)
+  const navigate = useNavigate()
+  const location = useLocation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  const navItems: NavItem[] = useMemo(
+    () => [
+      { to: '/me/orders', label: 'Заказы', icon: <LocalShippingOutlinedIcon /> },
+      { to: '/me/messages', label: 'Сообщения', icon: <ChatOutlinedIcon /> },
+      { to: '/me/settings', label: 'Настройки', icon: <SettingsOutlinedIcon /> },
+      { to: '/me/addresses', label: 'Адреса доставки', icon: <PlaceOutlinedIcon /> },
+    ],
+    [],
+  )
+
+  if (!user) {
+    return <Alert severity="info">Нужно войти. Перейдите на страницу «Вход».</Alert>
+  }
+
+  const activeTo =
+    navItems.find((x) => location.pathname === x.to)?.to ??
+    navItems.find((x) => location.pathname.startsWith(`${x.to}/`))?.to ??
+    null
+
+  const nav = (
+    <Box sx={{ width: 280, maxWidth: '85vw' }}>
+      <Box sx={{ p: 2 }}>
+        <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+          Кабинет
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {user.name?.trim() || user.email}
+        </Typography>
+      </Box>
+      <Divider />
+      <List disablePadding>
+        {navItems.map((i) => (
+          <ListItemButton
+            key={i.to}
+            selected={activeTo === i.to}
+            onClick={() => {
+              navigate(i.to)
+              setMobileOpen(false)
+            }}
+          >
+            <ListItemIcon>{i.icon}</ListItemIcon>
+            <ListItemText primary={i.label} />
+          </ListItemButton>
+        ))}
+      </List>
+    </Box>
+  )
+
+  return (
+    <Stack direction={{ xs: 'column', md: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
+      {isMobile ? (
+        <>
+          <Stack direction="row" spacing={1} alignItems="center" sx={{ width: '100%' }}>
+            <IconButton onClick={() => setMobileOpen(true)} aria-label="Открыть меню профиля">
+              <MenuOutlinedIcon />
+            </IconButton>
+            <Typography variant="h5" sx={{ fontWeight: 700 }}>
+              Профиль
+            </Typography>
+          </Stack>
+          <Drawer open={mobileOpen} onClose={() => setMobileOpen(false)} ModalProps={{ keepMounted: true }}>
+            {nav}
+          </Drawer>
+        </>
+      ) : (
+        <Box
+          sx={{
+            position: 'sticky',
+            top: 88,
+            alignSelf: 'flex-start',
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 2,
+            bgcolor: 'background.paper',
+            overflow: 'hidden',
+          }}
+        >
+          {nav}
+        </Box>
+      )}
+
+      <Box sx={{ flexGrow: 1, minWidth: 0, width: '100%' }}>
+        <Routes>
+          <Route index element={<Navigate to="/me/settings" replace />} />
+          <Route path="orders" element={<OrdersPage />} />
+          <Route path="messages" element={<MessagesPage />} />
+          <Route path="settings" element={<SettingsPage />} />
+          <Route path="addresses" element={<AddressesPage />} />
+          <Route path="*" element={<Navigate to="/me/settings" replace />} />
+        </Routes>
+      </Box>
+    </Stack>
+  )
+}