base commit

client/src/pages/admin-layout/ui/AdminLayoutPage.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import { useMemo, useState } from 'react'
+import AdminPanelSettingsOutlinedIcon from '@mui/icons-material/AdminPanelSettingsOutlined'
 import AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined'
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'
-import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'
 import PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined'
 import RateReviewOutlinedIcon from '@mui/icons-material/RateReviewOutlined'
 import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined'
@@ -76,8 +76,8 @@ export function AdminLayoutPage() {
     null
 
   const nav = (
-    <Box sx={{ width: 280, maxWidth: '85vw' }}>
-      <Box sx={{ p: 2 }}>
+    <Box sx={{ width: 300, maxWidth: '88vw', py: 1 }}>
+      <Box sx={{ px: 2, py: 2, mx: 1, borderRadius: 2, bgcolor: 'warning.50' }}>
         <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
           Админка
         </Typography>
@@ -85,12 +85,23 @@ export function AdminLayoutPage() {
           Управление магазином
         </Typography>
       </Box>
-      <Divider />
+      <Divider sx={{ my: 1 }} />
       <List disablePadding>
         {navItems.map((i) => (
           <ListItemButton
             key={i.to}
             selected={activeTo === i.to}
+            sx={{
+              mx: 1,
+              mb: 0.5,
+              borderRadius: 2,
+              '&.Mui-selected': {
+                bgcolor: 'warning.100',
+              },
+              '&.Mui-selected:hover': {
+                bgcolor: 'warning.200',
+              },
+            }}
             onClick={() => {
               navigate(i.to)
               setMobileOpen(false)
@@ -117,14 +128,38 @@ export function AdminLayoutPage() {
       {isMobile ? (
         <>
           <Stack direction="row" spacing={1} sx={{ width: '100%', alignItems: 'center' }}>
-            <IconButton onClick={() => setMobileOpen(true)} aria-label="Открыть меню админки">
-              <MenuOutlinedIcon />
+            <IconButton
+              onClick={() => setMobileOpen(true)}
+              aria-label="Открыть панель админки"
+              sx={{
+                borderRadius: 2,
+                border: 1,
+                borderColor: 'warning.300',
+                bgcolor: 'warning.50',
+              }}
+            >
+              <AdminPanelSettingsOutlinedIcon />
             </IconButton>
             <Typography variant="h5" sx={{ fontWeight: 700 }}>
               Админка
             </Typography>
           </Stack>
-          <Drawer open={mobileOpen} onClose={() => setMobileOpen(false)} ModalProps={{ keepMounted: true }}>
+          <Drawer
+            open={mobileOpen}
+            onClose={() => setMobileOpen(false)}
+            anchor="right"
+            ModalProps={{ keepMounted: true }}
+            slotProps={{
+              paper: {
+                sx: {
+                  borderTopLeftRadius: 16,
+                  borderBottomLeftRadius: 16,
+                  borderLeft: 1,
+                  borderColor: 'divider',
+                },
+              },
+            }}
+          >
             {nav}
           </Drawer>
         </>