Added simple navigation links and placeholder icons

package.json

@@ -602,7 +602,7 @@
     "react-final-form": "~3.7.0",
     "react-foreach": "~0.1.1",
     "react-ga": "~2.5.7",
-    "react-icons": "^4.6.0",
+    "react-icons": "^5.3.0",
     "react-infinite-tree": "~0.7.1",
     "react-markdown": "^8.0.3",
     "react-minimal-pie-chart": "^8.3.0",

src/app/src/features/navbar/components/NavbarLink.tsx

@@ -1,5 +1,21 @@
-export function PlaceHolderComponent() {
+import React from "react";
+
+interface NavbarLinkProps {
+    href: string;
+    icon: React.ComponentType<{
+        className?: string
+    }>;
+    label: string;
+    isActive?: boolean
+}
+
+export function NavbarLink(props: NavbarLinkProps) {
     return (
-        <div>This is a placeholder component</div>
+        <div className="flex flex-col items-center justify-center text-sm text-gray-500">
+            <a className="flex flex-col gap-0.5" href={props.href}>
+                <props.icon className="text-4xl text-gray-800"/>
+                { props.label }
+            </a>
+        </div>
     )
 }

src/app/src/features/navbar/index.tsx

@@ -1,14 +1,17 @@
-interface NavbarLinkProps {
-    href: string;
-    icon: string;
-    label: string;
-    isActive?: boolean
-}
+import {NavbarLink} from "./components/NavbarLink.tsx";
+import { FaTasks } from "react-icons/fa";
+import { HiOutlineChatBubbleOvalLeftEllipsis } from "react-icons/hi2";
+import { GiNeedleDrill } from "react-icons/gi";
+import { MdKeyboardCommandKey } from "react-icons/md";
+
 
-export function NavbarLink(props: NavbarLinkProps) {
+export function Navbar() {
     return (
-        <div>
-            links
+        <div className="flex flex-col no-padding no-margin gap-5 justify-end flex-grow self-stretch">
+            <NavbarLink href="/" icon={MdKeyboardCommandKey} label="Control" />
+            <NavbarLink href="/configuration" icon={FaTasks} label="Config" />
+            <NavbarLink href="/stats" icon={HiOutlineChatBubbleOvalLeftEllipsis} label="Info" />
+            <NavbarLink href="/tools" icon={GiNeedleDrill} label="Tools" />
         </div>
     )
 }

src/app/src/workspace/Sidebar/index.tsx

@@ -1,3 +1,7 @@
+import {Navbar} from "../../features/navbar";
+
 export const Sidebar = () => {
-    return <div className="border p-3 w-20">Sidebar</div>;
+    return <div className="border p-3 w-20">
+        <Navbar />
+    </div>;
 };