github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/shared/components/layout/layout.tsx (about)

     1  import * as React from 'react';
     2  import {Sidebar} from '../../../sidebar/sidebar';
     3  import {ViewPreferences} from '../../services';
     4  import {useTheme} from '../../utils';
     5  
     6  require('./layout.scss');
     7  
     8  export interface LayoutProps {
     9      navItems: Array<{path: string; iconClassName: string; title: string}>;
    10      onVersionClick?: () => void;
    11      children?: React.ReactNode;
    12      pref: ViewPreferences;
    13  }
    14  
    15  const getBGColor = (theme: string): string => (theme === 'light' ? '#dee6eb' : '#100f0f');
    16  
    17  export const ThemeWrapper = (props: {children: React.ReactNode; theme: string}) => {
    18      const [systemTheme] = useTheme({
    19          theme: props.theme
    20      });
    21      return <div className={'theme-' + systemTheme}>{props.children}</div>;
    22  };
    23  
    24  export const Layout = (props: LayoutProps) => {
    25      const [theme] = useTheme({theme: props.pref.theme});
    26      React.useEffect(() => {
    27          if (theme) {
    28              document.body.style.background = getBGColor(theme);
    29          }
    30      }, [theme]);
    31  
    32      return (
    33          <div className={`theme-${theme}`}>
    34              <div className={'cd-layout'}>
    35                  <Sidebar onVersionClick={props.onVersionClick} navItems={props.navItems} pref={props.pref} />
    36                  <div className={`cd-layout__content ${props.pref.hideSidebar ? 'cd-layout__content--sb-collapsed' : 'cd-layout__content--sb-expanded'} custom-styles`}>
    37                      {props.children}
    38                  </div>
    39              </div>
    40          </div>
    41      );
    42  };