Admin: add menu to layout

apps/web/Components/Admin/Cache.tsx

@@ -17,6 +17,10 @@ type QueryProps = {
 const StyledPre = styled.pre`
   max-height: 300px;
   overflow-y: auto;
+
+  ${min('desktop')} {
+    max-height: 800px;
+  }
 `;
 
 const Query = memo(({ handleDeleteQuery, queryKey }: QueryProps) => {
@@ -91,7 +95,7 @@ const QueryList = memo(({ queries }: QueryListProps) => {
 
 const Wrapper = styled(Background)`
   padding: 4px 6px;
-  width: 100%;
+  width: 100vw;
 
   ${min('tablet')} {
     min-height: 790px;
@@ -99,7 +103,7 @@ const Wrapper = styled(Background)`
 
   ${min('laptop')} {
     padding: 4px 18px 10px;
-    width: 1024px;
+    width: unset;
   }
 `;
 

apps/web/Components/Admin/Layout.tsx

@@ -1,18 +1,50 @@
 import { min } from '@/styles/mq';
+import type { MenuProps } from 'antd';
+import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { Box } from 'ui/grid';
+import { Menu } from 'ui/elements';
+import { DatabaseOutlined, HomeOutlined } from 'ui/elements/icons';
+import { Flex } from 'ui/grid';
 
-export const Layout = styled(Box)`
+const items: MenuProps['items'] = [
-  display: flex;
+  {
-  flex-direction: column;
+    disabled: true,
-  gap: 10px;
+    icon: <HomeOutlined />,
+    key: 'home',
+    label: 'Главная',
+  },
+  {
+    icon: <DatabaseOutlined />,
+    key: 'cache-control',
+    label: 'Управление кэшем',
+  },
+];
 
+const Wrapper = styled.div`
   ${min('laptop')} {
-    display: grid;
+    height: calc(100vh - var(--height-header));
-    place-items: center;
+    overflow-y: scroll;
-  }
-
-  ${min('desktop-xl')} {
-    margin: 8px 10% !important;
   }
 `;
+
+const MenuWrapper = styled(Wrapper)`
+  > :first-child {
+    min-height: 100%;
+    width: 280px;
+  }
+`;
+
+const ContentWrapper = styled(Wrapper)`
+  flex: 1;
+`;
+
+export function Layout({ children }: PropsWithChildren) {
+  return (
+    <Flex>
+      <MenuWrapper>
+        <Menu mode="inline" items={items} />
+      </MenuWrapper>
+      <ContentWrapper>{children}</ContentWrapper>
+    </Flex>
+  );
+}

packages/ui/elements/index.ts

@@ -15,6 +15,7 @@ export {
   Divider,
   Form,
   InputNumber,
+  Menu,
   message,
   notification,
   Result,