Header Layout

Control the header container with useFlexLayoutControl. Collapse the header based on the scroll direction and maintain the current exposure ratio on route changes.

root/head structure

To control the header, it must be configured as FlexLayoutContainer. Typically, place a head container inside the root layout, and compose the rest of the screen with a body container.

tsx

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

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

Control the Header

In the Header component, pass the current pathnameand the hide condition. Connect the returned contentRefto the actual header content wrapper.

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>
  );
}

Collapse on scroll

enableScrollHideOnScrollto trueWhen enabled, the header container collapses when scrolling down and expands again when scrolling up or returning to the top of the page.

does not manipulate height directly

The action is height, display, visibilitynot a direct change to. It changes the value of the target container. flex-grow value.

window scroll layout

direct descendants of bodyFlexLayoutto scrollMode="window"If used as FlexLayoutDynamicHeighta configuration that synchronizes the document/body height together is needed. Otherwise, the header will not resize. The current site is FlexLayoutDynamicHeight The component stabilizes the scroll height, and the action of collapsing the header is useFlexLayoutControlhandled by this.

Hide/Show based on route conditions

If you need to explicitly hide or show the header on a specific route, pass that condition hideContaineras. If the value is truetrue, the header container collapses, and if the value is falsefalse, the header container expands. In both cases, scroll-based automatic collapsing/expanding is disabled.

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 is a tri-state value

truewhich means forced hiding,falseand forced showing.null Orundefinedonly whenenableScrollHideOnScroll the setting allows scroll-based automatic collapsing/expanding to work.

Use Header size

If the current exposed size of the header is needed, create and use the same containerSizeKeyNamestate.

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입니다.