feat: add withBorderOnScroll prop for Navigation component (#862)

gravity-ui · Mar 15, 2024 · b172089 · b172089
1 parent 8f9d177
commit b172089
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/models/navigation.ts b/src/models/navigation.ts
@@ -92,6 +92,7 @@ export interface HeaderData {
     rightItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
+    withBorderOnScroll?: boolean;
 }
 
 export interface FooterColumn {

diff --git a/src/navigation/__stories__/Navigation.stories.tsx b/src/navigation/__stories__/Navigation.stories.tsx
@@ -32,6 +32,7 @@ NavigationWithBorder.args = {
         header: {
             ...data.navigation.header,
             withBorder: true,
+            withBorderOnScroll: true,
         },
     } as NavigationData,
 };

diff --git a/src/navigation/components/Navigation/Navigation.tsx b/src/navigation/components/Navigation/Navigation.tsx
@@ -20,7 +20,13 @@ export interface NavigationProps extends ClassNameProps {
 }
 
 export const Navigation: React.FC<NavigationProps> = ({data, logo, className}) => {
-    const {leftItems, rightItems, iconSize = 20, withBorder = false} = data;
+    const {
+        leftItems,
+        rightItems,
+        iconSize = 20,
+        withBorder = false,
+        withBorderOnScroll = true,
+    } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setActiveItemId] = useState<string | undefined>(undefined);
     const [showBorder, setShowBorder] = useState(withBorder);
@@ -43,6 +49,8 @@ export const Navigation: React.FC<NavigationProps> = ({data, logo, className}) =
     const onSidebarOpenedChange = (isOpen: boolean) => setIsSidebarOpened(isOpen);
 
     useEffect(() => {
+        if (!withBorderOnScroll) return () => {};
+
         const showBorderOnScroll = () => {
             if (!showBorder) {
                 setShowBorder(window.scrollY > 0);