From 715647773146e78549a054b2289d7b37138196b3 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 10 Apr 2024 22:20:03 +0300
Subject: [PATCH] add global app navigation

---
 apps/web/Components/Admin/Cache/index.tsx |  2 +-
 apps/web/Components/Admin/Layout.tsx      | 86 +----------------------
 apps/web/Components/Layout/Logo.jsx       |  5 +-
 apps/web/Components/Layout/Navigation.tsx | 53 ++++++++++++++
 apps/web/Components/Layout/index.jsx      |  8 ++-
 apps/web/styles/global-style.js           |  1 +
 6 files changed, 68 insertions(+), 87 deletions(-)
 create mode 100644 apps/web/Components/Layout/Navigation.tsx

diff --git a/apps/web/Components/Admin/Cache/index.tsx b/apps/web/Components/Admin/Cache/index.tsx
index b90300d..e344a54 100644
--- a/apps/web/Components/Admin/Cache/index.tsx
+++ b/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;
   }
 `;
 
diff --git a/apps/web/Components/Admin/Layout.tsx b/apps/web/Components/Admin/Layout.tsx
index 540495f..7858dfe 100644
--- a/apps/web/Components/Admin/Layout.tsx
+++ b/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>;
 }
diff --git a/apps/web/Components/Layout/Logo.jsx b/apps/web/Components/Layout/Logo.jsx
index 9488349..45c5a50 100644
--- a/apps/web/Components/Layout/Logo.jsx
+++ b/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>
diff --git a/apps/web/Components/Layout/Navigation.tsx b/apps/web/Components/Layout/Navigation.tsx
new file mode 100644
index 0000000..044bf94
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/web/Components/Layout/index.jsx b/apps/web/Components/Layout/index.jsx
index 10926a8..258e048 100644
--- a/apps/web/Components/Layout/index.jsx
+++ b/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>
     </>
   );
diff --git a/apps/web/styles/global-style.js b/apps/web/styles/global-style.js
index b95d232..fa78d86 100644
--- a/apps/web/styles/global-style.js
+++ b/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;