From 7dccf77c7da3d27ad8df4b6bbac6d637d17a1842 Mon Sep 17 00:00:00 2001
From: Gustavo Lelis <galelis@gmail.com>
Date: Tue, 14 Apr 2020 09:11:34 -0300
Subject: [PATCH] =?UTF-8?q?Fix:=20Header=20shouldn=E2=80=99t=20be=20sticky?=
 =?UTF-8?q?=20on=20Viewer=20Route?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 platform/ui/src/components/NavBar/NavBar.jsx         | 8 ++++++--
 platform/ui/src/views/StudyList/StudyList.mdx        | 2 +-
 platform/ui/src/views/StudyList/components/Header.js | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/platform/ui/src/components/NavBar/NavBar.jsx b/platform/ui/src/components/NavBar/NavBar.jsx
index da20d2ca7..5ab60f626 100644
--- a/platform/ui/src/components/NavBar/NavBar.jsx
+++ b/platform/ui/src/components/NavBar/NavBar.jsx
@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const NavBar = ({ className, children }) => {
+const stickyClasses = 'sticky top-0 z-10';
+
+const NavBar = ({ className, children, isSticky }) => {
   return (
     <div
       className={classnames(
-        'flex flex-row items-center bg-secondary-dark px-3 py-1 sticky top-0 z-10 border-b-4 border-black',
+        'flex flex-row items-center bg-secondary-dark px-3 py-1 border-b-4 border-black',
+        isSticky && stickyClasses,
         className
       )}
     >
@@ -18,6 +21,7 @@ const NavBar = ({ className, children }) => {
 NavBar.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
+  isSticky: PropTypes.bool,
 };
 
 export default NavBar;
diff --git a/platform/ui/src/views/StudyList/StudyList.mdx b/platform/ui/src/views/StudyList/StudyList.mdx
index 8240ee0f5..1efd6ec7e 100644
--- a/platform/ui/src/views/StudyList/StudyList.mdx
+++ b/platform/ui/src/views/StudyList/StudyList.mdx
@@ -298,7 +298,7 @@ components.
             'h-screen': !hasStudies,
           })}
         >
-          <NavBar className="justify-between border-b-4 border-black">
+          <NavBar className="justify-between border-b-4 border-black" isSticky>
             <div className="flex items-center">
               <div className="mx-3">
                 <Svg name="logo-ohif" />
diff --git a/platform/ui/src/views/StudyList/components/Header.js b/platform/ui/src/views/StudyList/components/Header.js
index 42ce2f4a9..7da692290 100644
--- a/platform/ui/src/views/StudyList/components/Header.js
+++ b/platform/ui/src/views/StudyList/components/Header.js
@@ -12,7 +12,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
   };
 
   return (
-    <NavBar className="justify-between">
+    <NavBar className="justify-between" isSticky>
       <div className="flex items-center">
         <div className="mx-3">{appLogo}</div>
         <div>{children}</div>