From 97709311c4b0ca8bfafe7c43e949fb7ce7c458cd Mon Sep 17 00:00:00 2001 From: Robin Cussol Date: Thu, 5 Dec 2024 15:09:53 +0100 Subject: [PATCH] feat(NavigationBar): allow for transparent background when at the top of the screen This was requested on Slack. --- .../NavigationBar/NavigationBar.stories.tsx | 1 + .../src/NavigationBar/README.md | 23 +++++------ .../src/NavigationBar/index.tsx | 39 ++++++++++++++++--- .../src/NavigationBar/types.d.ts | 1 + 4 files changed, 48 insertions(+), 16 deletions(-) diff --git a/packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx b/packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx index bf7f88ce48..4c32fa35a6 100644 --- a/packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx +++ b/packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx @@ -33,6 +33,7 @@ const meta: Meta = { onShow: action("onShow"), onHide: action("onHide"), bottomStyle: "shadow", + transparentBgAtTop: false, }, argTypes: { diff --git a/packages/orbit-components/src/NavigationBar/README.md b/packages/orbit-components/src/NavigationBar/README.md index 5de3cb3803..12fc79a8ea 100644 --- a/packages/orbit-components/src/NavigationBar/README.md +++ b/packages/orbit-components/src/NavigationBar/README.md @@ -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. | diff --git a/packages/orbit-components/src/NavigationBar/index.tsx b/packages/orbit-components/src/NavigationBar/index.tsx index 907bb9ee83..54dbd72b0b 100644 --- a/packages/orbit-components/src/NavigationBar/index.tsx +++ b/packages/orbit-components/src/NavigationBar/index.tsx @@ -20,6 +20,7 @@ const NavigationBar = ({ onHide, hideOnScroll = true, bottomStyle = "shadow", + transparentBgAtTop = false, }: Props) => { const resolveCallback = React.useCallback( state => { @@ -31,6 +32,7 @@ const NavigationBar = ({ const [shown, setShown] = useStateWithCallback(true, resolveCallback); const [prevScrollPosition, setPrevScrollPosition] = React.useState(0); + const [isTransparentBg, setTransparentBg] = React.useState(transparentBgAtTop); const handleNavigationBarPosition = React.useCallback(() => { const currentScrollPosition = @@ -38,6 +40,10 @@ const NavigationBar = ({ window.pageYOffset || (document.documentElement && document.documentElement.scrollTop); + if (transparentBgAtTop) { + setTransparentBg(currentScrollPosition <= 0); + } + if (!hideOnScroll) return; if ( @@ -50,7 +56,7 @@ const NavigationBar = ({ } setPrevScrollPosition(currentScrollPosition); - }, [prevScrollPosition, setShown, hideOnScroll]); + }, [prevScrollPosition, setShown, hideOnScroll, transparentBgAtTop, setTransparentBg]); React.useEffect(() => { window.addEventListener("scroll", handleNavigationBarPosition); @@ -59,17 +65,40 @@ const NavigationBar = ({ }; }); + React.useEffect(() => { + const currentScrollPosition = + window.scrollY || + window.pageYOffset || + (document.documentElement && document.documentElement.scrollTop); + if (transparentBgAtTop) { + setTransparentBg(currentScrollPosition <= 0); + } else { + setTransparentBg(false); + } + }, [transparentBgAtTop]); + + React.useEffect(() => { + if (!hideOnScroll) { + setShown(true); + } + }, [hideOnScroll, setShown]); + return (