Admin/Layout: responsive ui

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: <HomeOutlined />,
-    key: '/',
-    label: <Link href="/">Главная</Link>,
+    children: [
+      {
+        // icon: <HomeOutlined />,
+        key: '/',
+        label: <Link href="/">Главная</Link>,
+      },
+      {
+        // icon: <PlusSquareOutlined />,
+        key: '/unlimited',
+        label: <Link href="/unlimited">Без ограничений</Link>,
+      },
+    ],
+    icon: <AppstoreOutlined />,
+    key: 'home',
+    label: 'Приложение',
   },
   {
-    icon: <PlusSquareOutlined />,
-    key: '/unlimited',
-    label: <Link href="/unlimited">Без ограничений</Link>,
-  },
-  {
-    type: 'divider',
-  },
-  {
-    icon: <DatabaseOutlined />,
-    key: '/admin/cache',
-    label: <Link href="/admin/cache">Управление кэшем</Link>,
+    children: [
+      {
+        // icon: <DatabaseOutlined />,
+        key: '/admin/cache',
+        label: <Link href="/admin/cache">Управление кэшем</Link>,
+      },
+    ],
+    icon: <SettingOutlined />,
+    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 (
     <Flex>
-      <MenuWrapper>
-        <Menu selectedKeys={[pathname]} mode="inline" items={items} />
-      </MenuWrapper>
+      <Media lessThan="laptop">
+        <MenuWrapper>
+          <Menu selectedKeys={[pathname]} mode="horizontal" items={items} />
+        </MenuWrapper>
+      </Media>
+      <Media greaterThanOrEqual="laptop">
+        <MenuWrapper>
+          <Menu
+            defaultOpenKeys={['home', 'admin']}
+            selectedKeys={[pathname]}
+            mode="inline"
+            items={items}
+          />
+        </MenuWrapper>
+      </Media>
       <ContentWrapper>{children}</ContentWrapper>
     </Flex>
   );

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",

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 }) {
               }}
             >
               <Notification>
-                <Layout>
-                  <Component {...pageProps} />
-                </Layout>
+                <MediaContextProvider>
+                  <Layout>
+                    <Component {...pageProps} />
+                  </Layout>
+                </MediaContextProvider>
               </Notification>
             </AntdConfig>
           </QueryClientProvider>

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 {
           <meta name="theme-color" content="#000000" />
           <meta name="description" content={PAGE_DESCRIPTION} />
           {metaFavicon}
+          <style type="text/css" dangerouslySetInnerHTML={{ __html: mediaStyles }} />
         </Head>
         <body>
           <Main />

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;

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