Added ui

ui/src/components/Topbar/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import './topbar.css';
+
+const headerItems = [
+  {
+    name: 'Races',
+    link: '/races'
+  },
+  {
+    name: 'Classes',
+    link: '/classes'
+  },
+  {
+    name: 'Feats',
+    link: '/feats'
+  },
+  {
+    name: 'Options & Features',
+    link: '/options'
+  },
+  {
+    name: 'Backgrounds',
+    link: '/backgrounds'
+  },
+  {
+    name: 'Items',
+    link: '/items'
+  },
+  {
+    name: 'Spells',
+    link: '/spells'
+  }
+];
+
+export default function Topbar() {
+  const pathName = usePathname();
+
+  return (
+    <nav className='navbar'>
+      <div className='left'>
+        <Link href={'/'} className='title'>
+          Siren
+        </Link>
+        <div className='header-items'>
+          {headerItems.map((item) => (
+            <Link className={`header-item ${pathName == item.link && 'active'}`} href={item.link} key={item.name}>
+              {item.name}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}