Nils-Johan Gynther
92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
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="/matsedel" style={linkStyle}>📅 Matsedel</Link>
|
|
<Link href="/import" style={linkStyle}>📥 Importera</Link>
|
|
<Link href="/baslager" style={linkStyle}>🏪 Baslager</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>
|
|
);
|
|
}
|
|
|