Added sidebar navigation & pages

components/SideBar/SideBar.tsx

@@ -1,29 +1,46 @@
-import { VscAdd, VscCircuitBoard, VscCode, VscSettingsGear, VscSourceControl, VscTerminal } from "react-icons/vsc";
+import {
+  VscCircuitBoard,
+  VscCode,
+  VscSettingsGear,
+  VscSourceControl,
+  VscTerminal,
+} from "react-icons/vsc";
 import { ReactElement, ReactNode } from "react";
+import ActiveLink from "../Navigation/ActiveLink";
 
 const SideBar = () => {
   return (
     <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} />}
-      />
+      <ActiveLink href="/board" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon
+          tooltipText="Настройка Платы"
+          icon={<VscCircuitBoard size={40} />}
+        />
+      </ActiveLink>
+      <ActiveLink href="/flow" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon
+          tooltipText="Визуальная среда"
+          icon={<VscSourceControl size={40} />}
+        />
+      </ActiveLink>
+      <ActiveLink href="/editor" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon tooltipText="Редактор кода" icon={<VscCode size={40} />} />
+      </ActiveLink>
+
+      <ActiveLink href="/console" activeClassName="sidebar-icon-active" shallow>
+        <SideBarIcon tooltipText="Консоль" icon={<VscTerminal size={40} />} />
+      </ActiveLink>
+
+      <ActiveLink
+        href="/settings"
+        activeClassName="sidebar-icon-active"
+        shallow
+      >
+        <SideBarIcon
+          tooltipText="Настройки"
+          icon={<VscSettingsGear size={40} />}
+        />
+      </ActiveLink>
     </div>
   );
 };
@@ -36,7 +53,7 @@ type SideBarIconProps = {
 
 const SideBarIcon = ({ icon, tooltipText, className }: SideBarIconProps) => {
   return (
-    <div className="sidebar-icon group">
+    <div className={`sidebar-icon group ${className}`}>
       {icon}
       <span className="sidebar-tooltip group-hover:visible">{tooltipText}</span>
     </div>

pages/board.tsx

@@ -0,0 +1,5 @@
+const Board = () => {
+  return "Настройки платы";
+};
+
+export default Board;

pages/console.tsx

@@ -0,0 +1,5 @@
+const Console = () => {
+  return "Консоль";
+};
+
+export default Console;

pages/editor.tsx

@@ -0,0 +1,5 @@
+const Editor = () => {
+  return "Редактор кода";
+};
+
+export default Editor;

pages/flow.tsx

@@ -0,0 +1,5 @@
+const Flow = () => {
+  return "Визуальная среда";
+};
+
+export default Flow;

pages/settings.tsx

@@ -0,0 +1,5 @@
+const Settings = () => {
+  return "Настройки";
+};
+
+export default Settings;

styles/globals.css

@@ -14,15 +14,16 @@
   .sidebar-icon {
     @apply relative flex items-center justify-center
                     h-16 w-16 my-2 mx-auto
-                    shadow-lg bg-gray-800 text-secondary
+                    shadow-lg bg-gray-800 text-secondary rounded-3xl
+
                     hover:bg-green-900 hover:text-primary
-                    rounded-3xl hover:rounded-xl
+                    hover:rounded-xl
                     transition-all duration-300 ease-linear
                     cursor-pointer;
   }
 
   .sidebar-icon-active {
-    @apply bg-green-900 text-white rounded-xl;
+    @apply bg-green-900 text-primary rounded-xl;
   }
 
   .sidebar-tooltip {