Web for Duo.

<div class="app">
  <main class="app-content">…</main>
  <nav class="app-nav" aria-label="주 내비게이션">
    <a href="/" aria-current="page">Home</a>
    <a href="/search">Search</a>
    <a href="/saved">Saved</a>
  </nav>
</div>

.app {
  container-type: inline-size;
  --bar-size: 64px;
}

.app-content {
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--bar-size) + 32px
    + env(safe-area-inset-bottom, 0px));
}

.app-nav {
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  height: var(--bar-size);
  border: 1px solid #d8d8d8;
  border-radius: 24px;
  color: #202020;
  background: #f7f7f7;
}

.app-nav a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
}

/* A content breakpoint, not an iPhone Duo detector. */
@container (min-width: 48rem) {
  .app-content {
    padding-right: calc(var(--bar-size) + 32px
      + env(safe-area-inset-right, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  .app-nav {
    flex-direction: column;
    justify-content: center;
    top: max(16px, env(safe-area-inset-top, 0px));
    left: auto;
    width: var(--bar-size);
    height: auto;
  }
}

import { Glass } from '@samasante/liquid-glass';
import type { ReactNode } from 'react';

type Props = {
  scene: ReactNode;
  view: { width: number; height: number };
  x: number; y: number;
  scrollX?: number; scrollY?: number;
  label: string;
  onClick?: () => void;
  children: ReactNode;
};

export function GlassButton({ scene, view, x, y,
  scrollX = 0, scrollY = 0, label, onClick, children }: Props) {
  return (
    <div style={{ position: 'absolute', left: x, top: y,
      width: 44, height: 44 }}>
      <Glass width={44} height={44} radius={22}
        optics={{ strength: 0.14, frost: 0.65, bend: 0.55 }}
        style={{ width: 44, height: 44 }}
        refract={
          <div aria-hidden inert style={{ position: 'absolute',
            left: -x, top: -y, width: view.width,
            height: view.height, overflow: 'hidden' }}>
            <div style={{ position: 'absolute',
              left: -scrollX, top: -scrollY,
              width: view.width, height: view.height }}>
              {scene}
            </div>
          </div>
        }
      />
      <button type="button" aria-label={label} onClick={onClick}
        style={{ position: 'absolute',
        inset: 0, border: 0, borderRadius: 22,
        background: 'transparent', color: '#163644' }}>
        {children}
      </button>
    </div>
  );
}

/* Measure the viewport with ResizeObserver; pass its scroll offsets.
   scene is the same non-interactive backdrop used by the original. */

.toolbar {
  color: #202020;
  background: #f7f7f7; /* Opaque fallback. */
  border: 1px solid #dedede;
  border-radius: 24px;
}

/* Private WebKit material; gated by the host setting. */
@supports (-apple-visual-effect: -apple-system-glass-material) {
  .toolbar {
    background: transparent;
    -apple-visual-effect: -apple-system-glass-material;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .toolbar {
    -apple-visual-effect: none;
    background: #f7f7f7;
  }
}