add vertical navbar

Author: Kraysent

src/components/ui/Layout.tsx

@@ -1,10 +1,14 @@
 import { Footer } from "./Footer";
+import { Navbar } from "./Navbar";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen flex flex-col">
-      <div className="flex-grow p-8">{children}</div>
-      <Footer />
+    <div className="min-h-screen flex">
+      <Navbar />
+      <div className="ml-12 flex flex-col flex-grow min-h-screen">
+        <div className="flex-grow p-8">{children}</div>
+        <Footer />
+      </div>
     </div>
   );
 }

src/components/ui/Navbar.tsx

@@ -0,0 +1,31 @@
+import { NavLink } from "react-router-dom";
+import { MdSearch, MdTableChart } from "react-icons/md";
+
+const navItems = [
+  { to: "/", icon: <MdSearch size={20} />, label: "Object search" },
+  { to: "/tables", icon: <MdTableChart size={20} />, label: "Tables" },
+];
+
+export function Navbar() {
+  return (
+    <nav className="fixed left-0 top-0 h-screen w-12 flex flex-col items-center pt-4 gap-2 bg-[#1a1a1a] z-20">
+      {navItems.map((item) => (
+        <NavLink
+          key={item.to}
+          to={item.to}
+          end
+          title={item.label}
+          className={({ isActive }) =>
+            `w-9 h-9 flex items-center justify-center rounded-md transition-colors duration-200 ${
+              isActive
+                ? "bg-green-600 text-white"
+                : "text-neutral-400 hover:bg-neutral-700 hover:text-white"
+            }`
+          }
+        >
+          {item.icon}
+        </NavLink>
+      ))}
+    </nav>
+  );
+}