Work on ui

components/SideBar/SideBar.tsx

@@ -1,4 +1,4 @@
-import { VscAdd, VscTerminal } from "react-icons/vsc";
+import { VscAdd, VscCircuitBoard, VscCode, VscSettingsGear, VscSourceControl, VscTerminal } from "react-icons/vsc";
 import { ReactElement, ReactNode } from "react";
 
 const SideBar = () => {
@@ -6,8 +6,24 @@ const SideBar = () => {
     <div className="sidebar">
       <SideBarIcon
         tooltipText="Настройка Платы"
+        icon={<VscCircuitBoard size={40} />}
+      />
+      <SideBarIcon
+        tooltipText="No Code"
+        icon={<VscSourceControl size={40} />}
+      />
+      <SideBarIcon
+        tooltipText="Advence"
+        icon={<VscCode size={40} />}
+      />
+      <SideBarIcon
+        tooltipText="Terminal"
         icon={<VscTerminal size={40} />}
       />
+      <SideBarIcon
+        tooltipText="Setting"
+        icon={<VscSettingsGear size={40} />}
+      />
     </div>
   );
 };

styles/globals.css

@@ -5,17 +5,17 @@
 @layer components {
   .sidebar {
     @apply fixed top-0 left-0
-    h-screen w-16 m-0
+    h-screen w-20 m-0
     flex flex-col
-    bg-sidebar text-primary
+    bg-sidebar text-secondary
     z-40;
   }
 
   .sidebar-icon {
     @apply relative flex items-center justify-center
-                    h-14 w-14 my-2 mx-auto
+                    h-16 w-16 my-2 mx-auto
-                    shadow-lg bg-gray-800 text-primary
+                    shadow-lg bg-gray-800 text-secondary
-                    hover:bg-green-900 hover:text-white
+                    hover:bg-green-900 hover:text-primary
                     rounded-3xl hover:rounded-xl
                     transition-all duration-300 ease-linear
                     cursor-pointer;
@@ -38,6 +38,6 @@
     mx-2;
   }
   .content {
-    @apply ml-16;
+    @apply ml-20;
   }
 }

tailwind.config.js

@@ -7,7 +7,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: "#78b856",
+        primary: "#39ff14", //39ff14
+        secondary: "#008a00", //78b856
         sidebar: "#333333",
         panel: "#252526",
         content: "#1e1e1e",