recipe-app/frontend/app/Navigation.tsx

import Link from 'next/link';
import { auth } from '../auth';
import { signOutAction } from './actions/auth-actions';

const linkStyle: React.CSSProperties = {
  padding: '0.5rem 0.75rem',
  background: '#fff',
  border: '1px solid #ddd',
  borderRadius: '4px',
  textDecoration: 'none',
  color: '#0070f3',
  fontSize: '0.9rem',
  fontWeight: 500,
};

export default async function Navigation() {
  const session = await auth();

  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={linkStyle}>🏠 Hem</Link>
      <Link href="/inventory" style={linkStyle}>🛒 Varor</Link>
      <Link href="/recipes" style={linkStyle}>📖 Recept</Link>
      <Link href="/matplan" style={linkStyle}>📅 Matplan</Link>
      <Link href="/import" style={linkStyle}>📥 Importera</Link>
      <Link href="/baslager" style={linkStyle}>🏪 Baslager</Link>
      {(session?.user as any)?.role === 'admin' && (
        <>
          <Link href="/admin/products" style={linkStyle}>⚙️ Admin</Link>
          <Link href="/profil?tab=anvandare" style={linkStyle}>👥 Användare</Link>
        </>
      )}
      <span style={{ flex: 1 }} />
      {session?.user && (
        <>
          <Link
            href="/profil"
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '0.4rem',
              fontSize: '0.9rem',
              color: '#555',
              textDecoration: 'none',
              padding: '0.3rem 0.5rem',
              borderRadius: 4,
            }}
          >
            <span
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: 28,
                height: 28,
                borderRadius: '50%',
                background: '#2563eb',
                color: 'white',
                fontWeight: 700,
                fontSize: '0.85rem',
              }}
            >
              {session.user.name?.charAt(0).toUpperCase()}
            </span>
            {session.user.name}
          </Link>
          <form action={signOutAction}>
            <button
              type="submit"
              style={{
                ...linkStyle,
                cursor: 'pointer',
                color: '#dc2626',
                borderColor: '#dc2626',
              }}
            >
              Logga ut
            </button>
          </form>
        </>
      )}
    </nav>
  );
}