Work on SideBar

components/SideBar/SideBar.tsx

@@ -1,10 +1,13 @@
-import { VscAdd } from "react-icons/vsc";
+import { VscAdd, VscTerminal } from "react-icons/vsc";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 
 const SideBar = () => {
   return (
     <div className="sidebar">
-      <SideBarIcon tooltipText="Настройка Платы" icon={<VscAdd size={40} />} />
+      <SideBarIcon
+        tooltipText="Настройка Платы"
+        icon={<VscTerminal size={40} />}
+      />
     </div>
   );
 };
@@ -12,17 +15,14 @@ const SideBar = () => {
 type SideBarIconProps = {
   className?: string;
   tooltipText: string;
-  icon: ReactNode;
+  icon: ReactElement;
 };
 
-const SideBarIcon = ({ className, tooltipText, icon }: SideBarIconProps) => {
+const SideBarIcon = ({ icon, tooltipText, className }: SideBarIconProps) => {
   return (
     <div className="sidebar-icon group">
       {icon}
-
+      <span className="sidebar-tooltip group-hover:visible">{tooltipText}</span>
-      <span className="sidebar-icon-tooltip group-hover:visible">
-        {tooltipText}
-      </span>
     </div>
   );
 };

styles/globals.css

@@ -1,3 +1,43 @@
-@tailwind base
+@tailwind base;
-@tailwind components
+@tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .sidebar {
+    @apply fixed top-0 left-0
+    h-screen w-16 m-0
+    flex flex-col
+    bg-sidebar text-primary
+    z-40;
+  }
+
+  .sidebar-icon {
+    @apply relative flex items-center justify-center
+                    h-14 w-14 my-2 mx-auto
+                    shadow-lg bg-gray-800 text-primary
+                    hover:bg-green-900 hover:text-white
+                    rounded-3xl hover:rounded-xl
+                    transition-all duration-300 ease-linear
+                    cursor-pointer;
+  }
+
+  .sidebar-icon-active {
+    @apply bg-green-900 text-white rounded-xl;
+  }
+
+  .sidebar-tooltip {
+    @apply absolute w-auto p-2 m-2 min-w-max left-14
+    rounded-md shadow-md text-white bg-sidebar
+    text-sm font-bold
+    transition-all duration-100 invisible origin-left;
+  }
+
+  .sidebar-hr {
+    @apply bg-gray-600 
+    border border-gray-600 rounded-full
+    mx-2;
+  }
+  .content {
+    @apply ml-16;
+  }
+}

tailwind.config.js

@@ -5,7 +5,14 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: "#78b856",
+        sidebar: "#333333",
+        panel: "#252526",
+        content: "#1e1e1e",
+      }
+    },
   },
   plugins: [],
 };