feat: customize nav bar background color style

src/components/layout/layout.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import { NavBar } from '../nav-bar/nav-bar';
+import {NavBar, NavBarStyle} from '../nav-bar/nav-bar';
 
 require('./layout.scss');
 
 export interface LayoutProps {
     navItems: Array<{ path: string; iconClassName: string; title: string; }>;
     version?: () => React.ReactElement;
+    navBarStyle?: NavBarStyle;
     children?: React.ReactNode;
 }
 
 export const Layout = (props: LayoutProps) => (
     <div className='layout'>
-        <NavBar items={props.navItems} version={props.version}/>
+        <NavBar items={props.navItems} version={props.version} style={props.navBarStyle} />
         {props.children}
     </div>
 );

src/components/nav-bar/nav-bar.tsx

@@ -10,6 +10,11 @@ require('./nav-bar.scss');
 export interface NavBarProps {
     items: Array<{ path: string; iconClassName: string; title: string; }>;
     version?: () => React.ReactElement;
+    style?: NavBarStyle;
+}
+
+export interface NavBarStyle {
+    backgroundColor?: string;
 }
 
 export function isActiveRoute(locationPath: string, path: string) {
@@ -18,10 +23,13 @@ export function isActiveRoute(locationPath: string, path: string) {
 
 export const NavBar: React.FunctionComponent<NavBarProps> = (props: NavBarProps, context: AppContext) => {
     const locationPath = context.router.route.location.pathname;
+    const navBarStyle = {
+        ...(props.style?.backgroundColor && {background: `linear-gradient(to bottom, ${props.style?.backgroundColor}, #999`}),
+    };
     return (
         <div className={classNames('nav-bar', {
             'nav-bar--compact': (props.items || []).length >= 10,
-        })}>
+        })} style={navBarStyle}>
             <div className='nav-bar__logo'>
                 <img src='assets/images/logo.png' alt='Argo'/>
                 <div className='nav-bar__version'>{props.version && props.version()}</div>

stories/page.tsx

@@ -138,4 +138,18 @@ storiesOf('Page', module)
                 </Layout>
             </Route>
         </Router>
+    )).add('background color', () => (
+        <Router history={history}>
+            <Route path={location.pathname}>
+                <Layout navItems={navItems} navBarStyle={{backgroundColor: 'red'}}>
+                    <Page title='Hello world!'>
+                        <div style={{padding: '1em'}}>
+                            <div className='white-box'>
+                                Hello world!
+                            </div>
+                        </div>
+                    </Page>
+                </Layout>
+            </Route>
+        </Router>
     ));