argo-cd

1
import * as React from 'react';
2
import {Sidebar} from '../../../sidebar/sidebar';
3
import {ViewPreferences} from '../../services';
4

5
require('./layout.scss');
6

7
export interface LayoutProps {
8
    navItems: Array<{path: string; iconClassName: string; title: string}>;
9
    onVersionClick?: () => void;
10
    children?: React.ReactNode;
11
    pref: ViewPreferences;
12
    isExtension?: boolean;
13
}
14

15
const getBGColor = (theme: string): string => (theme === 'light' ? '#dee6eb' : '#100f0f');
16

17
export const Layout = (props: LayoutProps) => {
18
    React.useEffect(() => {
19
        if (props.pref.theme) {
20
            document.body.style.background = getBGColor(props.pref.theme);
21
        }
22
    }, [props.pref.theme]);
23

24
    return (
25
        <div className={props.pref.theme ? 'theme-' + props.pref.theme : 'theme-light'}>
26
            <div className={`cd-layout ${props.isExtension ? 'cd-layout--extension' : ''}`}>
27
                <Sidebar onVersionClick={props.onVersionClick} navItems={props.navItems} pref={props.pref} />
28
                <div className={`cd-layout__content ${props.pref.hideSidebar ? 'cd-layout__content--sb-collapsed' : 'cd-layout__content--sb-expanded'} custom-styles`}>
29
                    {props.children}
30
                </div>
31
            </div>
32
        </div>
33
    );
34
};
35