recipe-app/frontend/app/Navigation.tsx

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>
  );
}