Skip to content

Commit

Permalink
feat(NavigationBar): allow for transparent background when at the top…
Browse files Browse the repository at this point in the history 
… of the screen

This was requested on Slack.
  • Loading branch information
@RobinCsl
RobinCsl committed Dec 9, 2024
1 parent f4fbfc1 commit 4fca415
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 17 deletions.
1 change: 1 addition & 0 deletions packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const meta: Meta<typeof NavigationBar> = {
onShow: action("onShow"),
onHide: action("onHide"),
bottomStyle: "shadow",
transparentBgAtTop: false,
},

argTypes: {
Expand Down
23 changes: 12 additions & 11 deletions packages/orbit-components/src/NavigationBar/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@ After adding import into your project you can use it simply like:

Table below contains all types of the props available in the NavigationBar component.

| Name | Type | Default | Description |
| :----------- | :---------------------- | :----------------------- | :---------------------------------------------------------------------------------------------------- |
| **children** | `React.Node` | | The content of the NavigationBar. |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Set `id` for `NavigationBar`. |
| onMenuOpen | `() => void \| Promise` | | Function for handling onClick event on HamburgerMenu icon. If `null`, the HamburgerMenu won't appear. |
| onHide | `() => void \| Promise` | | Function for handling event when the NavigationBar disappears. |
| onShow | `() => void \| Promise` | | Function for handling event when the NavigationBar appears. |
| hideOnScroll | `boolean` | `true` | Turn on or off hiding navigation bar on scroll |
| openTitle | `string` | `"Open navigation menu"` | Property for passing translation string to open Button. |
| bottomStyle | `"shadow" \| "border"` | `"shadow"` | Property for setting bottom style of NavigationBar. |
| Name | Type | Default | Description |
| :----------------- | :---------------------- | :----------------------- | :---------------------------------------------------------------------------------------------------------- |
| **children** | `React.Node` | | The content of the NavigationBar. |
| dataTest | `string` | | Optional prop for testing purposes. |
| id | `string` | | Set `id` for `NavigationBar`. |
| onMenuOpen | `() => void \| Promise` | | Function for handling onClick event on HamburgerMenu icon. If `null`, the HamburgerMenu won't appear. |
| onHide | `() => void \| Promise` | | Function for handling event when the NavigationBar disappears. |
| onShow | `() => void \| Promise` | | Function for handling event when the NavigationBar appears. |
| hideOnScroll | `boolean` | `true` | Turn on or off hiding navigation bar on scroll |
| openTitle | `string` | `"Open navigation menu"` | Property for passing translation string to open Button. |
| bottomStyle | `"shadow" \| "border"` | `"shadow"` | Property for setting bottom style of NavigationBar. |
| transparentBgAtTop | `boolean` | `false` | Property for setting the background to be transparent when the NavigationBar is at the top of the viewport. |
23 changes: 17 additions & 6 deletions packages/orbit-components/src/NavigationBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const NavigationBar = ({
onHide,
hideOnScroll = true,
bottomStyle = "shadow",
transparentBgAtTop = false,
}: Props) => {
const resolveCallback = React.useCallback(
state => {
Expand All @@ -31,13 +32,18 @@ const NavigationBar = ({
const [shown, setShown] = useStateWithCallback<boolean>(true, resolveCallback);

const [prevScrollPosition, setPrevScrollPosition] = React.useState(0);
const [isTransparentBg, setTransparentBg] = React.useState(transparentBgAtTop);

const handleNavigationBarPosition = React.useCallback(() => {
const currentScrollPosition =
window.scrollY ||
window.pageYOffset ||
(document.documentElement && document.documentElement.scrollTop);

if (transparentBgAtTop) {
setTransparentBg(currentScrollPosition <= 0);
}

if (!hideOnScroll) return;

if (
Expand All @@ -50,7 +56,7 @@ const NavigationBar = ({
}

setPrevScrollPosition(currentScrollPosition);
}, [prevScrollPosition, setShown, hideOnScroll]);
}, [prevScrollPosition, setShown, hideOnScroll, transparentBgAtTop, setTransparentBg]);

React.useEffect(() => {
window.addEventListener("scroll", handleNavigationBarPosition);
Expand All @@ -64,12 +70,17 @@ const NavigationBar = ({
data-test={dataTest}
id={id}
className={cx(
"bg-white-normal p-300 z-navigation-bar fixed inset-x-0 top-0 box-border flex w-full translate-x-0 items-center",
"duration-normal transform-gpu transition-transform ease-in-out",
"p-300 z-navigation-bar fixed inset-x-0 top-0 box-border flex w-full translate-x-0 items-center",
"duration-normal transform-gpu ease-in-out",
transparentBgAtTop
? "transition-[transform,background-color,border-color]"
: "transition-transform",
"tb:h-1600 h-[52px]", // As defined on the const above
shown ? "translate-y-0" : "tb:-translate-y-1600 translate-y-[-52px]", // As defined on the const above
bottomStyle === "shadow" && "shadow-fixed",
bottomStyle === "border" && "border-cloud-normal border-b",
shown ? "translate-y-0" : "tb:-translate-y-1600 -translate-y-xxxl", // As defined on the const above
!isTransparentBg && bottomStyle === "shadow" && "shadow-fixed",
isTransparentBg && bottomStyle === "border" && "border-transparent", // important for the transition to work well
!isTransparentBg && bottomStyle === "border" && "border-cloud-normal border-b",
isTransparentBg ? "bg-transparent" : "bg-white-normal",
)}
>
<div className="me-200 block w-full">{children}</div>
Expand Down
1 change: 1 addition & 0 deletions packages/orbit-components/src/NavigationBar/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ export interface Props extends Common.Globals {
readonly openTitle?: string;
readonly hideOnScroll?: boolean;
readonly bottomStyle?: "shadow" | "border";
readonly transparentBgAtTop?: boolean;
}

0 comments on commit 4fca415

Please sign in to comment.