Merge pull request #975 from aisaenok/issues-897

#897: Компонент личного кабинета с меню

Author: arthur810629

frontend/package-lock.json

@@ -11,7 +11,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview --host 0.0.0.0 --port $PORT"
   },
   "dependencies": {
     "@inertiajs/inertia": "^0.11.1",
@@ -20,6 +20,7 @@
     "@mantine/core": "^8.2.1",
     "@mantine/form": "^8.2.1",
     "@mantine/hooks": "^8.2.1",
+    "@tabler/icons-react": "^3.36.1",
     "@types/node": "^24.10.0",
     "add": "^2.0.6",
     "i18next": "^25.6.3",
@@ -52,4 +53,4 @@
       "public"
     ]
   }
-}
+}

frontend/package.json

@@ -0,0 +1,47 @@
+import { http, delay } from 'msw'
+import { inertiaJson } from '@mocks/inertia'
+import type { MenuItem } from '@shared/types/inertiaSharedData'
+
+const menu: MenuItem[] = [
+  { label: 'Мое обучение' },
+  { label: 'Покупки и подписки',
+    link: '/account/purchase' },
+  { label: 'Вебинары',
+    link: '/account/webinars' },
+  { label: 'База знаний' },
+  { label: 'Интервью' },
+  { label: 'Грейдирование' },
+  { label: 'Программы обучения' },
+]
+
+const makeHandler = ({ component, url}: { component: string, url: string }) =>
+  http.get(url, async ({ request }) => {
+    console.log('MSW handler hit:', request.method, request.url)
+    await delay()
+    return inertiaJson({
+      component,
+      props: {
+        errors: {},
+        menu,
+      },
+      url,
+      version: 'msw-dev',
+    })
+  })
+
+const routes = [
+  {
+    component: 'Account/Purchase/Index',
+    url: '/account',
+  },
+  {
+    component: 'Account/Purchase/Index',
+    url: '/account/purchase',
+  },
+  {
+    component: 'Account/Webinars/Index',
+    url: '/account/webinars',
+  },
+] as const
+
+export const handlers = routes.map(makeHandler)

frontend/src/mocks/account/index.ts

@@ -1,3 +1,4 @@
 import { handlers as homeHadnlers } from '@mocks/home'
+import { handlers as accountHadnlers } from '@mocks/account'
 
-export const handlers = [...homeHadnlers]
+export const handlers = [...homeHadnlers, ...accountHadnlers]

frontend/src/mocks/handlers.ts

@@ -1,5 +1,5 @@
 import { http, delay } from 'msw'
-import { inertiaJson } from '../inertia'
+import { inertiaJson } from '@mocks/inertia'
 
 export const handlers = [
   http.get(/\/(\?.*)?$/, async ({ request }) => {

frontend/src/mocks/home/index.ts

@@ -0,0 +1,14 @@
+import type { InertiaPage } from '@shared/types/inertia'
+import { AppLayout } from '../components/AppLayout'
+
+const Purchase: InertiaPage = () => {
+  return 'Purchase'
+}
+
+Purchase.layout = page => (
+  <AppLayout>
+    {page}
+  </AppLayout>
+)
+
+export default Purchase

frontend/src/pages/Account/Purchase/Index.tsx

@@ -0,0 +1,7 @@
+# Страница личного кабинета
+
+## Страницы
+
+- Шапка - данные пользователя, уведомления, кнопка выхода и т п
+- Левое меню - данные получаем с сервера
+- Активный раздел меню - отображает контект выбранного раздела меню

frontend/src/pages/Account/README.md

@@ -0,0 +1,14 @@
+import type { InertiaPage } from '@shared/types/inertia'
+import { AppLayout } from '../components/AppLayout'
+
+const Webinars: InertiaPage = () => {
+  return 'Webinars'
+}
+
+Webinars.layout = page => (
+  <AppLayout>
+    {page}
+  </AppLayout>
+)
+
+export default Webinars

frontend/src/pages/Account/Webinars/Index.tsx

@@ -0,0 +1,25 @@
+import { Header } from '@widgets/Header'
+import { Navbar } from './Navbar'
+import { SectionLayout } from './SectionLayout'
+import { Flex } from '@mantine/core'
+import { Footer } from '@widgets/Footer'
+import React from 'react'
+
+type TProps = {
+  children: React.ReactNode
+}
+
+export const AppLayout: React.FC<TProps> = (props) => {
+  const { children } = props
+
+  return (
+    <Flex direction="column" mih="100vh">
+      <Header />
+      <Flex align="stretch" style={{ flex: 1 }}>
+        <Navbar />
+        <SectionLayout>{children}</SectionLayout>
+      </Flex>
+      <Footer />
+    </Flex>
+  )
+}

frontend/src/pages/Account/components/AppLayout.tsx

@@ -0,0 +1,14 @@
+.header {
+  height: 56px;
+  background-color: var(--mantine-color-body);
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+}
+
+.inner {
+  height: 56px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}