feat(UIKIT-1607,Profile): Добавлена адаптация меню профиля для мобиль…

…ных устройств (#1076)

Co-authored-by: Andrey Potyomkin <[email protected]>

packages/components/src/DashboardLayout/DashboardLayout.stories.tsx

@@ -1,23 +1,16 @@
 import { type MouseEvent, type ReactElement, forwardRef } from 'react';
-import { Box } from '@mui/material';
 import {
   AddOutlineMd,
   CompanyOutlineMd,
   ProfileOutlineMd,
-  QuitOutlineMd,
 } from '@astral/icons';
 import { type Meta } from '@storybook/react';
 
-import { Divider } from '../Divider';
-import { ListItemIcon } from '../ListItemIcon';
-import { ListItemText } from '../ListItemText';
-import { Menu } from '../Menu';
-import { MenuItem } from '../MenuItem';
 import { ProductSwitcher } from '../ProductSwitcher';
 import { Placeholder } from '../Placeholder';
 import { PageLayout } from '../PageLayout';
 import { handleGetProducts } from '../ProductSwitcher/ProductSwitcher.stub';
-import { styled } from '../styles/styled';
+import { styled } from '../styles';
 
 import { DashboardLayout } from './DashboardLayout';
 import { SidebarButton } from './Sidebar';
@@ -90,16 +83,164 @@ const DashboardLayoutWrapper = styled.div`
 `;
 
 export const Example = () => {
+  const menuList = [
+    {
+      icon: <ProfileOutlineMd />,
+      title: 'Мой профиль',
+      onClick: () => console.log('Мой профиль'),
+    },
+  ];
+
+  return (
+    <DashboardLayoutWrapper>
+      <DashboardLayout>
+        <DashboardLayout.Header
+          productSwitcher={() => {
+            return <ProductSwitcher getProducts={handleGetProducts} />;
+          }}
+          product={{
+            name: 'Астрал.ЭДО',
+            logo() {
+              return <Logo />;
+            },
+          }}
+          profile={{
+            displayName: 'Григорьев Виталий',
+            annotation: '[email protected]',
+            avatar: {
+              alt: 'Григорьев Виталий',
+              children: 'ГВ',
+            },
+            menuList: menuList,
+            exitButton: { onClick: () => console.log('Выход') },
+          }}
+        />
+        <DashboardLayout.Sidebar
+          header={
+            <SidebarButton startIcon={<AddOutlineMd />}>
+              Добавить документ
+            </SidebarButton>
+          }
+          menu={{
+            items: [
+              [
+                'documents',
+                {
+                  icon: <ProfileOutlineMd />,
+                  text: 'Документы',
+                  items: [
+                    [
+                      'incoming-documents',
+                      {
+                        text: 'Входящие документы',
+                        active: true,
+                        component: forwardRef((props, ref) => {
+                          return (
+                            <RouterLink
+                              ref={ref}
+                              to="/incoming-documents"
+                              {...props}
+                            />
+                          );
+                        }),
+                      },
+                    ],
+                    [
+                      'outgoing-documents',
+                      {
+                        text: 'Исходящие документы',
+                        active: false,
+                        component: forwardRef((props, ref) => {
+                          return (
+                            <RouterLink
+                              ref={ref}
+                              to="/outgoing-documents"
+                              {...props}
+                            />
+                          );
+                        }),
+                      },
+                    ],
+                  ],
+                },
+              ],
+              [
+                'counterparties',
+                {
+                  icon: <ProfileOutlineMd />,
+                  text: 'Контрагенты',
+                  items: [
+                    [
+                      'invitations',
+                      {
+                        text: 'Приглашения',
+                        active: false,
+                        component: forwardRef((props, ref) => {
+                          return (
+                            <RouterLink
+                              ref={ref}
+                              to="/invitations"
+                              {...props}
+                            />
+                          );
+                        }),
+                      },
+                    ],
+                  ],
+                },
+              ],
+              [
+                'organizations',
+                {
+                  icon: <CompanyOutlineMd />,
+                  text: 'Мои организации',
+                  active: true,
+                  component: forwardRef((props, ref) => {
+                    return (
+                      <RouterLink ref={ref} to="/organizations" {...props} />
+                    );
+                  }),
+                },
+              ],
+            ],
+          }}
+        />
+        <DashboardLayout.Main>
+          <PageLayout
+            header={{
+              title: 'Черновики',
+              actions: {
+                main: [
+                  {
+                    text: 'Основное действие',
+                    startIcon: <AddOutlineMd />,
+                  },
+                ],
+                secondary: [
+                  {
+                    text: 'Кнопка',
+                  },
+                ],
+              },
+            }}
+            content={{
+              children: <Placeholder title="Документы отсутствуют" />,
+              isPaddingDisabled: false,
+            }}
+          />
+        </DashboardLayout.Main>
+      </DashboardLayout>
+    </DashboardLayoutWrapper>
+  );
+};
+
+export const ExitButton = () => {
   return (
     <DashboardLayoutWrapper>
       <DashboardLayout>
         <DashboardLayout.Header
           productSwitcher={() => {
-            return (
-              <Box>
-                <ProductSwitcher getProducts={handleGetProducts} />
-              </Box>
-            );
+            return <ProductSwitcher getProducts={handleGetProducts} />;
           }}
           product={{
             name: 'Астрал.ЭДО',
@@ -114,23 +255,7 @@ export const Example = () => {
               alt: 'Григорьев Виталий',
               children: 'ГВ',
             },
-            menu: (props) => (
-              <Menu {...props}>
-                <MenuItem>
-                  <ListItemIcon>
-                    <ProfileOutlineMd />
-                  </ListItemIcon>
-                  <ListItemText>Мой профиль</ListItemText>
-                </MenuItem>
-                <Divider />
-                <MenuItem>
-                  <ListItemIcon>
-                    <QuitOutlineMd />
-                  </ListItemIcon>
-                  <ListItemText>Выйти</ListItemText>
-                </MenuItem>
-              </Menu>
-            ),
+            exitButton: { onClick: () => console.log('Выход') },
           }}
         />
         <DashboardLayout.Sidebar