add global app navigation

apps/web/Components/Admin/Cache/index.tsx

@@ -16,7 +16,7 @@ const Wrapper = styled(Background)`
 
   ${min('laptop')} {
     padding: 4px 18px 10px;
-    width: unset;
+    width: 1280px;
   }
 `;
 

apps/web/Components/Admin/Layout.tsx

@@ -1,68 +1,6 @@
-import { Media } from '@/styles/media';
 import { min } from '@/styles/mq';
-import type { MenuProps } from 'antd';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { Menu } from 'ui/elements';
-import { AppstoreOutlined, SettingOutlined } from 'ui/elements/icons';
-
-const items: MenuProps['items'] = [
-  {
-    children: [
-      {
-        // icon: <HomeOutlined />,
-        key: '/',
-        label: <Link href="/">Главная</Link>,
-      },
-      {
-        // icon: <PlusSquareOutlined />,
-        key: '/unlimited',
-        label: <Link href="/unlimited">Без ограничений</Link>,
-      },
-    ],
-    icon: <AppstoreOutlined />,
-    key: 'home',
-    label: 'Приложение',
-  },
-  {
-    children: [
-      {
-        // icon: <DatabaseOutlined />,
-        key: '/admin/cache',
-        label: <Link href="/admin/cache">Управление кэшем</Link>,
-      },
-    ],
-    icon: <SettingOutlined />,
-    key: 'admin',
-    label: 'Панель управления',
-  },
-];
-
-const Wrapper = styled.div`
-  ${min('laptop')} {
-    height: calc(100vh - var(--height-header));
-    overflow-y: scroll;
-  }
-
-  ${min('desktop-xl')} {
-    height: calc(calc(100vh - var(--height-header)) - 16px);
-  }
-`;
-
-const MenuWrapper = styled(Wrapper)`
-  ${min('laptop')} {
-    > :first-child {
-      min-height: 100%;
-      width: 280px;
-    }
-  }
-`;
-
-const ContentWrapper = styled(Wrapper)`
-  flex: 1;
-`;
 
 const Flex = styled.div`
   display: flex;
@@ -70,30 +8,10 @@ const Flex = styled.div`
 
   ${min('laptop')} {
     flex-direction: row;
+    justify-content: center;
   }
 `;
 
 export function Layout({ children }: PropsWithChildren) {
-  const { pathname } = useRouter();
-
-  return (
-    <Flex>
-      <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>
-  );
+  return <Flex>{children}</Flex>;
 }

apps/web/Components/Layout/Logo.jsx

@@ -5,6 +5,7 @@ import getColors from '@/styles/colors';
 import { min } from '@/styles/mq';
 import { observer } from 'mobx-react-lite';
 import Image from 'next/image';
+import Link from 'next/link';
 import logo from 'public/assets/images/logo-primary.svg';
 import styled from 'styled-components';
 import { Tag } from 'ui/elements';
@@ -59,7 +60,9 @@ function Logo() {
   return (
     <Flex flexDirection="column" alignItems="flex-start" justifyContent="space-between">
       <ImageWrapper>
-        <Image priority className={styles.logo} alt="logo" src={logo} layout="responsive" />
+        <Link href="/">
+          <Image priority className={styles.logo} alt="logo" src={logo} layout="responsive" />
+        </Link>
       </ImageWrapper>
       <Flex justifyContent="space-between" alignItems="center">
         <LogoText>Лизинговый Калькулятор</LogoText>

apps/web/Components/Layout/Navigation.tsx

@@ -0,0 +1,53 @@
+import Background from './Background';
+import type { MenuProps } from 'antd';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { Menu } from 'ui/elements';
+import { AppstoreOutlined, SettingOutlined } from 'ui/elements/icons';
+
+const items: MenuProps['items'] = [
+  {
+    children: [
+      {
+        // icon: <HomeOutlined />,
+        key: '/',
+        label: <Link href="/">Главная</Link>,
+      },
+      {
+        // icon: <PlusSquareOutlined />,
+        key: '/unlimited',
+        label: <Link href="/unlimited">Без ограничений</Link>,
+      },
+    ],
+    icon: <AppstoreOutlined />,
+    key: 'home',
+    label: 'Приложение',
+  },
+  {
+    children: [
+      {
+        // icon: <DatabaseOutlined />,
+        key: '/admin/cache',
+        label: <Link href="/admin/cache">Управление кэшем</Link>,
+      },
+    ],
+    icon: <SettingOutlined />,
+    key: 'admin',
+    label: 'Панель управления',
+  },
+];
+
+const Wrapper = styled(Background)`
+  height: var(--height-navigation);
+`;
+
+export function AppNavigation() {
+  const { pathname } = useRouter();
+
+  return (
+    <Wrapper>
+      <Menu selectedKeys={[pathname]} mode="horizontal" items={items} />
+    </Wrapper>
+  );
+}

apps/web/Components/Layout/index.jsx

@@ -1,10 +1,15 @@
 import Header from './Header';
+import { AppNavigation } from './Navigation';
 import { min } from '@/styles/mq';
 import styled from 'styled-components';
 
 const Main = styled.main`
+  ${min('laptop')} {
+    margin: 8px 0;
+  }
+
   ${min('desktop-xl')} {
-    padding: 8px 10% !important;
+    margin: 8px 10%;
   }
 `;
 
@@ -12,6 +17,7 @@ export default function Layout({ children }) {
   return (
     <>
       <Header />
+      <AppNavigation />
       <Main>{children}</Main>
     </>
   );

apps/web/styles/global-style.js

@@ -10,6 +10,7 @@ export const GlobalStyle = createGlobalStyle`
     --color-primary: ${COLOR_PRIMARY};
     --color-secondary: ${COLOR_SECONDARY};
     --color-tertiarty: ${COLOR_TERTIARTY};
+    --height-navigation: 46px;
     --height-header: 60px;
     ${min('laptop')} {
     --height-header: 74px;