Flexbox

import { Menu } from '@base-ui/react/menu';

const LINKS = [
  { href: '/product', label: 'Product' },
  { href: '/pricing', label: 'Pricing' },
  { href: '/docs', label: 'Docs' }
];

export function Navbar() {
  return (
    // One row: items centered vertically, pushed to the ends and the middle.
    <header className='flex h-16 items-center justify-between gap-4 px-6'>
      <a href='/' className='font-semibold'>
        Tripmate
      </a>
      <nav className='hidden gap-8 text-sm sm:flex'>
        {LINKS.map((link) => (
          <a key={link.href} href={link.href} className='hover:underline'>
            {link.label}
          </a>
        ))}
      </nav>
      <div className='flex items-center gap-2'>
        <a
          href='/signin'
          className='rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
        >
          Sign in
        </a>
        <Menu.Root>
          <Menu.Trigger className='rounded-full border px-4 py-2 text-sm sm:hidden'>
            Menu
          </Menu.Trigger>
          <Menu.Portal>
            <Menu.Positioner sideOffset={8} align='end'>
              <Menu.Popup className='flex min-w-40 flex-col rounded-xl border bg-background p-1 shadow-lg'>
                {LINKS.map((link) => (
                  <Menu.LinkItem
                    key={link.href}
                    href={link.href}
                    className='rounded-lg px-3 py-2 text-sm outline-none data-highlighted:bg-muted'
                  >
                    {link.label}
                  </Menu.LinkItem>
                ))}
              </Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        </Menu.Root>
      </div>
    </header>
  );
}