ヘッダーレイアウト

useFlexLayoutControlでヘッダーコンテナを制御します。スクロール方向に応じてヘッダーを折りたたみ、ルート変更時に現在の表示比率を維持します。

root/head構造

ヘッダーを制御するには、ヘッダーが FlexLayoutContainerで構成されている必要があります。通常、ルートレイアウトの中に ヘッド コンテナを置き、残りの画面を ボディ コンテナで構成します。

tsx

<FlexLayout layoutName="root" direction="column">
  <FlexLayoutContainer containerName="head">
    <Header />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="body">
    {children}
  </FlexLayoutContainer>
</FlexLayout>

ヘッダーを制御

ヘッダーコンポーネントから現在の パス名と非表示条件を渡します。返される contentRefは実際のヘッダーコンテンツラッパーに接続してください。

tsx

"use client";

import { useFlexLayoutControl } from "@byeolnaerim/flex-layout";
import { usePathname } from "next/navigation";

export default function HeaderShell() {
  const pathname = usePathname();

  const hideHeaderByRoute =
    pathname.startsWith("/editor") || pathname.startsWith("/viewer");

  const { contentRef } = useFlexLayoutControl({
    layoutName: "root",
    containerName: "head",
    pathname,
    hideContainer: hideHeaderByRoute ? true : null,
    enableScrollHideOnScroll: true,
    containerSizeKeyName: "__root_headSize",
  });

  return (
    <header ref={contentRef}>
      <GlobalNavigation />
    </header>
  );
}

スクロールで折りたたむ

enableScrollHideOnScrollを true設定すると、下にスクロールする際にヘッダーコンテナが折りたたまれ、上にスクロールするかページのトップに戻ると再び展開されます。

heightを直接操作しません

動作は 高さ, display, visibilityを直接変更する方法ではありません。対象コンテナの flex-grow 値を変更します。

window scroll layout

bodyの直系の子要素であるFlexLayoutを scrollMode="window"を使用する場合は FlexLayoutDynamicHeightdocument/bodyの高さを同期させる構成が必要です。そうでなければ、ヘッダーはリサイズされません。現在のサイトは FlexLayoutDynamicHeight コンポーネントがスクロール高さを安定化させ、ヘッダーを折りたたむ動作は useFlexLayoutControlが担当しています。

ルート条件で隠す/表示する

特定のルートでヘッダーを明示的に隠したり表示したりする必要がある場合、その条件を hideContainerに渡します。値が trueの場合、ヘッダーコンテナを折りたたみ、値が falseの場合、ヘッダーコンテナを展開します。どちらの場合もスクロールベースの自動折りたたみ/展開は無効になります。

tsx

const pathname = usePathname();

const shouldForceHideHeader =
  pathname.startsWith("/editor") || pathname.startsWith("/viewer");

const { contentRef } = useFlexLayoutControl({
  layoutName: "root",
  containerName: "head",
  pathname,
  hideContainer: shouldForceHideHeader ? true : null,
  enableScrollHideOnScroll: true,
  containerSizeKeyName: "__root_headSize",
});

hideContainerは三状態の値です

trueは強制的に隠す、falseは強制的に表示します。null またはundefinedの時だけenableScrollHideOnScroll 設定に応じてスクロールベースの自動折りたたみ/展開が動作します。

ヘッダーサイズを使用

ヘッダーの現在の表示サイズが必要な場合、同じ containerSizeKeyNameで状態を生成して使用します。

tsx

import { createContainerSizeState } from "@byeolnaerim/flex-layout";

const [, , useHeaderSize] = createContainerSizeState({
  containerSizeKeyName: "__root_headSize",
});

function ContentLayout() {
  const headerSize = useHeaderSize();

  return (
    <main style={{ paddingTop: headerSize }}>
      Content
    </main>
  );
}

params

layoutName

제어할 container가 들어 있는 decomposition layout 이름입니다. header 예시에서는 root를 사용합니다.

containerName

flex-grow로 제어할 decomposition container 이름입니다. header 예시에서는 head를 사용합니다.

pathname

route 변경을 감지하고 현재 main-axis 노출 비율을 새 route에 동기화하는 데 사용합니다.

hideContainer

대상 container의 표시 상태를 명시적으로 제어하는 tri-state 값입니다. true이면 강제 숨김, false이면 강제 표시, null/undefined이면 명시적 제어 없이 enableScrollHideOnScroll 설정을 따릅니다.

enableScrollHideOnScroll

hideContainer가 null/undefined일 때 scroll 방향에 따라 대상 container를 자동으로 접거나 복원할지 여부입니다. hideContainer가 true 또는 false이면 이 설정은 적용되지 않습니다.

containerSizeKeyName

측정된 container main-axis size를 저장할 global-rx-state key입니다.

containerSizeStorageOptions

container size state에 적용할 global-rx-state storage 옵션입니다.

return value

contentRef

실제 content size를 측정할 wrapper에 연결하는 ref입니다.