From f6a370cc0aeba366d0987f0e6f8c0aa4054fabde Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Thu, 14 Jul 2022 13:31:58 +0000
Subject: [PATCH] Work on SideBar

---
 components/SideBar/SideBar.tsx | 30 ++++++++++++++++++++++++++++++
 components/layout.tsx          | 17 +++++++++++++++++
 package-lock.json              | 17 ++++++++++++++++-
 package.json                   |  3 ++-
 pages/_app.tsx                 |  5 ++++-
 pages/index.tsx                |  8 +-------
 6 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 components/SideBar/SideBar.tsx
 create mode 100644 components/layout.tsx

diff --git a/components/SideBar/SideBar.tsx b/components/SideBar/SideBar.tsx
new file mode 100644
index 0000000..f1a4aa2
--- /dev/null
+++ b/components/SideBar/SideBar.tsx
@@ -0,0 +1,30 @@
+import { VscAdd } from "react-icons/vsc";
+import { ReactNode } from "react";
+
+const SideBar = () => {
+  return (
+    <div className="sidebar">
+      <SideBarIcon tooltipText="Настройка Платы" icon={<VscAdd size={40} />} />
+    </div>
+  );
+};
+
+type SideBarIconProps = {
+  className?: string;
+  tooltipText: string;
+  icon: ReactNode;
+};
+
+const SideBarIcon = ({ className, tooltipText, icon }: SideBarIconProps) => {
+  return (
+    <div className="sidebar-icon group">
+      {icon}
+
+      <span className="sidebar-icon-tooltip group-hover:visible">
+        {tooltipText}
+      </span>
+    </div>
+  );
+};
+
+export default SideBar;
diff --git a/components/layout.tsx b/components/layout.tsx
new file mode 100644
index 0000000..b0cb4ee
--- /dev/null
+++ b/components/layout.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import SideBar from "./SideBar/SideBar";
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <SideBar />
+      <div className="content">{children}</div>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/package-lock.json b/package-lock.json
index 5b5a27a..eacd137 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
         "next": "latest",
         "next-pwa": "^5.4.1",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-icons": "^4.4.0"
       },
       "devDependencies": {
         "@types/node": "17.0.4",
@@ -4480,6 +4481,14 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -8747,6 +8756,12 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 61a74cf..7733ede 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "next": "latest",
     "next-pwa": "^5.4.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "17.0.4",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1c52276..34a3148 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import Head from "next/head";
 import "../styles/globals.css";
 import { AppProps } from "next/app";
+import Layout from "../components/layout";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -32,7 +33,9 @@ export default function MyApp({ Component, pageProps }: AppProps) {
         <link rel="apple-touch-icon" href="/apple-icon.png"></link>
         <meta name="theme-color" content="#317EFB" />
       </Head>
-      <Component {...pageProps} />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index c56e7cf..07a82b0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,9 +1,3 @@
 export default function Home() {
-  return (
-    <div className="">
-      <main className="">
-        <div className="">Привет мир!</div>
-      </main>
-    </div>
-  );
+  return <div className="">Привет мир!</div>;
 }