Adding NavBag into Header

platform/ui/src/components/NavBar/NavBag.jsx

@@ -1,7 +1,23 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
-const NavBag = ({}) => {
-  return <></>;
+const NavBag = ({ className, children }) => {
+  return (
+    <div
+      className={classnames(
+        'flex flex-row items-center bg-custom-navy px-3 py-1 sticky top-0 z-10',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+NavBag.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
 };
 
 export default NavBag;

platform/ui/src/views/StudyList/components/Header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { IconButton, Icon } from '@ohif/ui';
+import { IconButton, Icon, NavBar } from '@ohif/ui';
 
 import OHIFLogo from './OHIFLogo.js';
 
@@ -12,7 +12,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
   };
 
   return (
-    <div className="bg-custom-navy flex flex-row justify-between px-3 py-1 text-white sticky top-0 z-10 border-b-4 border-black">
+    <NavBar className="justify-between border-b-4 border-black">
       <div className="flex items-center">
         <div className="mx-3">{appLogo}</div>
         <div>{children}</div>
@@ -33,7 +33,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
           </React.Fragment>
         </IconButton>
       </div>
-    </div>
+    </NavBar>
   );
 }