From ad451351fb812227aedf248d741e3bfb239e2bea Mon Sep 17 00:00:00 2001
From: krrrr38 <k.kaizu38@gmail.com>
Date: Sun, 12 Dec 2021 17:03:37 +0900
Subject: [PATCH] feat: customize nav bar background color style

Signed-off-by: krrrr38 <k.kaizu38@gmail.com>
---
 src/components/layout/layout.tsx   |  5 +++--
 src/components/nav-bar/nav-bar.tsx | 10 +++++++++-
 stories/page.tsx                   | 14 ++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index abd57653..41869361 100644
--- a/src/components/layout/layout.tsx
+++ b/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>
 );
diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
index cb920926..8b7f1289 100644
--- a/src/components/nav-bar/nav-bar.tsx
+++ b/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>
diff --git a/stories/page.tsx b/stories/page.tsx
index 4b7b859c..b708c51b 100644
--- a/stories/page.tsx
+++ b/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>
     ));