Add Navigation component and integrate it into multiple pages for consistent navigation

2026-04-10 20:03:43 +02:00
parent 3dc63c0641
commit 8fce96e1ce
7 changed files with 95 additions and 4 deletions
@@ -0,0 +1,79 @@
+import Link from 'next/link';
+
+export default function Navigation() {
+  return (
+    <nav
+      style={{
+        background: '#f9f9f9',
+        borderBottom: '1px solid #ddd',
+        padding: '0.75rem 1rem',
+        display: 'flex',
+        gap: '0.5rem',
+        flexWrap: 'wrap',
+        marginBottom: '1.5rem',
+        alignItems: 'center',
+      }}
+    >
+      <Link
+        href="/"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        🏠 Hem
+      </Link>
+      <Link
+        href="/inventory"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        🛒 Varor
+      </Link>
+      <Link
+        href="/recipes"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        📖 Recept
+      </Link>
+      <Link
+        href="/admin/products"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        ⚙️ Admin
+      </Link>
+    </nav>
+  );
+}