diff --git a/apps/web/Components/Admin/Layout.tsx b/apps/web/Components/Admin/Layout.tsx
index 602c63a..540495f 100644
--- a/apps/web/Components/Admin/Layout.tsx
+++ b/apps/web/Components/Admin/Layout.tsx
@@ -1,3 +1,4 @@
+import { Media } from '@/styles/media';
import { min } from '@/styles/mq';
import type { MenuProps } from 'antd';
import Link from 'next/link';
@@ -5,26 +6,37 @@ import { useRouter } from 'next/router';
import type { PropsWithChildren } from 'react';
import styled from 'styled-components';
import { Menu } from 'ui/elements';
-import { DatabaseOutlined, HomeOutlined, PlusSquareOutlined } from 'ui/elements/icons';
+import { AppstoreOutlined, SettingOutlined } from 'ui/elements/icons';
const items: MenuProps['items'] = [
{
- icon: ,
- key: '/',
- label: Главная,
+ children: [
+ {
+ // icon: ,
+ key: '/',
+ label: Главная,
+ },
+ {
+ // icon: ,
+ key: '/unlimited',
+ label: Без ограничений,
+ },
+ ],
+ icon: ,
+ key: 'home',
+ label: 'Приложение',
},
{
- icon: ,
- key: '/unlimited',
- label: Без ограничений,
- },
- {
- type: 'divider',
- },
- {
- icon: ,
- key: '/admin/cache',
- label: Управление кэшем,
+ children: [
+ {
+ // icon: ,
+ key: '/admin/cache',
+ label: Управление кэшем,
+ },
+ ],
+ icon: ,
+ key: 'admin',
+ label: 'Панель управления',
},
];
@@ -40,9 +52,11 @@ const Wrapper = styled.div`
`;
const MenuWrapper = styled(Wrapper)`
- > :first-child {
- min-height: 100%;
- width: 280px;
+ ${min('laptop')} {
+ > :first-child {
+ min-height: 100%;
+ width: 280px;
+ }
}
`;
@@ -52,6 +66,11 @@ const ContentWrapper = styled(Wrapper)`
const Flex = styled.div`
display: flex;
+ flex-direction: column;
+
+ ${min('laptop')} {
+ flex-direction: row;
+ }
`;
export function Layout({ children }: PropsWithChildren) {
@@ -59,9 +78,21 @@ export function Layout({ children }: PropsWithChildren) {
return (
-
-
-
+
+
+
+
+
+
+
+
+
+
{children}
);
diff --git a/apps/web/package.json b/apps/web/package.json
index bff01d0..1213f0a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -14,6 +14,7 @@
},
"dependencies": {
"@apollo/client": "^3.9.5",
+ "@artsy/fresnel": "^7.1.4",
"@fontsource/montserrat": "^4.5.14",
"@sentry/nextjs": "^7.102.0",
"@sentry/node": "^7.102.0",
diff --git a/apps/web/pages/_app.jsx b/apps/web/pages/_app.jsx
index 6cb442a..8ea8ba3 100644
--- a/apps/web/pages/_app.jsx
+++ b/apps/web/pages/_app.jsx
@@ -10,6 +10,7 @@ import { theme } from '@/config/ui';
import StoreProvider from '@/stores/Provider';
import getColors from '@/styles/colors';
import { GlobalStyle } from '@/styles/global-style';
+import { MediaContextProvider } from '@/styles/media';
import { trpcClient } from '@/trpc/client';
import { ApolloProvider } from '@apollo/client';
import { QueryClientProvider } from '@tanstack/react-query';
@@ -52,9 +53,11 @@ function App({ Component, pageProps }) {
}}
>
-
-
-
+
+
+
+
+
diff --git a/apps/web/pages/_document.jsx b/apps/web/pages/_document.jsx
index 4a1c9fa..b086f8f 100644
--- a/apps/web/pages/_document.jsx
+++ b/apps/web/pages/_document.jsx
@@ -1,7 +1,9 @@
+/* eslint-disable react/no-danger */
/* eslint-disable @typescript-eslint/explicit-member-accessibility */
import { metaFavicon } from '@/config/meta';
import { withBasePath } from '@/config/urls';
import { PAGE_DESCRIPTION } from '@/constants/page';
+import { mediaStyles } from '@/styles/media';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { createCache, doExtraStyle, StyleProvider } from 'ui/tools';
@@ -46,6 +48,7 @@ export default class MyDocument extends Document {
{metaFavicon}
+
diff --git a/apps/web/styles/media.ts b/apps/web/styles/media.ts
new file mode 100644
index 0000000..075496b
--- /dev/null
+++ b/apps/web/styles/media.ts
@@ -0,0 +1,10 @@
+import { screens } from '@/config/ui';
+import { createMedia } from '@artsy/fresnel';
+
+const AppMedia = createMedia({
+ breakpoints: { xs: 0, ...screens },
+});
+
+export const mediaStyles = AppMedia.createMediaStyle();
+
+export const { Media, MediaContextProvider } = AppMedia;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e9497bc..3e60901 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -126,6 +126,9 @@ importers:
'@apollo/client':
specifier: ^3.9.5
version: 3.9.5(@types/react@18.2.58)(graphql@16.8.1)(react-dom@18.2.0)(react@18.2.0)
+ '@artsy/fresnel':
+ specifier: ^7.1.4
+ version: 7.1.4(react@18.2.0)
'@fontsource/montserrat':
specifier: ^4.5.14
version: 4.5.14
@@ -530,6 +533,15 @@ packages:
- encoding
dev: true
+ /@artsy/fresnel@7.1.4(react@18.2.0):
+ resolution: {integrity: sha512-qbUdxzlcI9Q9Ez+HfYDq7hlLoeFKC8EKcCckW+EltWu9SWL3px4QZIkr7NwYEz13q/nLvAlHMnbJ3TpSEEZ1zg==}
+ engines: {node: '>=12.20.2', yarn: 1.x.x}
+ peerDependencies:
+ react: '>=18.0.0'
+ dependencies:
+ react: 18.2.0
+ dev: false
+
/@babel/code-frame@7.23.5:
resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
engines: {node: '>=6.9.0'}
@@ -6925,7 +6937,7 @@ packages:
'@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
'@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3)
eslint: 8.57.0
- jest: 29.7.0(@types/node@20.11.20)(ts-node@10.9.2)
+ jest: 29.7.0(@types/node@18.19.18)
transitivePeerDependencies:
- supports-color
- typescript
@@ -8169,7 +8181,7 @@ packages:
'@graphql-tools/json-file-loader': 7.4.18(graphql@16.8.1)
'@graphql-tools/load': 7.8.14(graphql@16.8.1)
'@graphql-tools/merge': 8.4.2(graphql@16.8.1)
- '@graphql-tools/url-loader': 7.17.18(@types/node@18.19.18)(graphql@16.8.1)
+ '@graphql-tools/url-loader': 7.17.18(@types/node@20.11.20)(graphql@16.8.1)
'@graphql-tools/utils': 9.2.1(graphql@16.8.1)
cosmiconfig: 8.0.0
graphql: 16.8.1
@@ -13193,7 +13205,7 @@ packages:
'@babel/core': 7.23.9
bs-logger: 0.2.6
fast-json-stable-stringify: 2.1.0
- jest: 29.7.0(@types/node@20.11.20)(ts-node@10.9.2)
+ jest: 29.7.0(@types/node@18.19.18)
jest-util: 29.7.0
json5: 2.2.3
lodash.memoize: 4.1.2