diff --git a/src/models/navigation.ts b/src/models/navigation.ts index 4b4caa685..7fd00c5cd 100644 --- 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 index f32750620..1cedf4664 100644 --- 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 index bf7eb481d..1f260ac19 100644 --- 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 = ({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(undefined); const [showBorder, setShowBorder] = useState(withBorder); @@ -43,6 +49,8 @@ export const Navigation: React.FC = ({data, logo, className}) = const onSidebarOpenedChange = (isOpen: boolean) => setIsSidebarOpened(isOpen); useEffect(() => { + if (!withBorderOnScroll) return () => {}; + const showBorderOnScroll = () => { if (!showBorder) { setShowBorder(window.scrollY > 0);