Skip to main content

Page Navigation Components

The PageNavigation component is a navigation bar that provides a back button, a title, and a share button. It is designed to be responsive and adapts to different screen sizes.

Props​

  • title (optional): A string that represents the title to be displayed in the navigation bar.
  • hideTitleUntilScroll (optional): A boolean that determines whether the title should be hidden until the user scrolls past a certain point (100px by default). Defaults to false.
  • showIcon (optional): A boolean that determines whether the icon button should be displayed. Defaults to true.

Usage​

import { PageNavigation } from '@/components/complex/PageNavigation/PageNavigation';

const MyPage = () => {
  return (
    <PageNavigation
      title="My Page Title"
      hideTitleUntilScroll
      showIcon={false}
    />
  );
};

Customization​

How-to: Remove title hide by default​

Just remove the hideTitleUntilScroll prop usage for PageNavigation as it will default to false and it will display the title passed with title prop by default, without waiting for any scroll animation.

How-to: Update scroll limit​

If you want to update the scroll threshold (which by default is 100px) definition you have two ways:

  1. Update the DEFAULT_VERTICAL_LIMIT environment variable
  2. Do not set the DEFAULT_VERTICAL_LIMIT environment variable and set the VERTICAL_LIMIT constant in useVerticalScrollThreshold.tsx

For development environments, if you want to play with the adjustments, we recommend you to avoid setting the environment variable and update VERTICAL_LIMIT until you find a value that fits your implementation.

PlayerNav Component​

The PlayerNav component is a navigation bar for the Player Component that provides a back button and optionally displays a title and detail text. It is designed to be responsive and adapts to different screen sizes.

Props​

  • title (optional): A string that represents the title to be displayed in the navigation bar.
  • detail (optional): A string that represents additional detail text to be displayed below the title.

Usage​

import { PlayerNav } from '@/components/complex/PlayerNav/PlayerNav';

const MyPlayerPage = () => {
  return (
    <PlayerNav
      title="Player Title"
      detail="Additional details about the player"
    />
  );
};