Work on SideBar

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;

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;

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

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

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>
+      <Layout>
         <Component {...pageProps} />
+      </Layout>
     </>
   );
 }

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>;
 }