feat(NavigationBar): allow for transparent background when at the top…

… of the screen This was requested on Slack.
kiwicom · Dec 5, 2024 · b35a63b · b35a63b
1 parent e64f49f
commit b35a63b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git 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<typeof NavigationBar> = {
     onShow: action("onShow"),
     onHide: action("onHide"),
     bottomStyle: "shadow",
+    transparentBgAtTop: false,
   },
 
   argTypes: {

diff --git 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,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 (
@@ -50,7 +56,7 @@ const NavigationBar = ({
     }
 
     setPrevScrollPosition(currentScrollPosition);
-  }, [prevScrollPosition, setShown, hideOnScroll]);
+  }, [prevScrollPosition, setShown, hideOnScroll, transparentBgAtTop, setTransparentBg]);
 
   React.useEffect(() => {
     window.addEventListener("scroll", handleNavigationBarPosition);
@@ -64,12 +70,14 @@ 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]" : "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",
+        !isTransparentBg && bottomStyle === "shadow" && "shadow-fixed",
+        !isTransparentBg && bottomStyle === "border" && "border-cloud-normal border-b",
+        isTransparentBg ? "bg-transparent" : "bg-white-normal",
       )}
     >
       <div className="me-200 block w-full">{children}</div>

diff --git a/packages/orbit-components/src/NavigationBar/types.d.ts b/packages/orbit-components/src/NavigationBar/types.d.ts
@@ -12,4 +12,5 @@ export interface Props extends Common.Globals {
   readonly openTitle?: string;
   readonly hideOnScroll?: boolean;
   readonly bottomStyle?: "shadow" | "border";
+  transparentBgAtTop?: boolean;
 }