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

     1  import {Tooltip} from 'argo-ui';
     2  import {Boundary, Placement} from 'popper.js';
     3  import {useData} from 'argo-ui/v2';
     4  import * as React from 'react';
     5  import {Context} from '../shared/context';
     6  import {services, ViewPreferences} from '../shared/services';
     7  
     8  require('./sidebar.scss');
     9  
    10  interface SidebarProps {
    11      onVersionClick: () => void;
    12      navItems: {path: string; iconClassName: string; title: string; tooltip?: string}[];
    13      pref: ViewPreferences;
    14  }
    15  
    16  export const SIDEBAR_TOOLS_ID = 'sidebar-tools';
    17  
    18  export const useSidebarTarget = () => {
    19      const sidebarTarget = React.useRef(document.createElement('div'));
    20  
    21      React.useEffect(() => {
    22          const sidebar = document.getElementById(SIDEBAR_TOOLS_ID);
    23          sidebar.appendChild(sidebarTarget?.current);
    24          return () => {
    25              sidebarTarget.current?.remove();
    26          };
    27      }, []);
    28  
    29      return sidebarTarget;
    30  };
    31  
    32  export const Sidebar = (props: SidebarProps) => {
    33      const context = React.useContext(Context);
    34      const [version, loading, error] = useData(() => services.version.version());
    35      const locationPath = context.history.location.pathname;
    36  
    37      const tooltipProps = {
    38          placement: 'right' as Placement,
    39          popperOptions: {
    40              modifiers: {
    41                  preventOverflow: {
    42                      boundariesElement: 'window' as Boundary
    43                  }
    44              }
    45          }
    46      };
    47  
    48      return (
    49          <div className={`sidebar ${props.pref.hideSidebar ? 'sidebar--collapsed' : ''}`}>
    50              <div className='sidebar__container'>
    51                  <div className='sidebar__logo'>
    52                      <div onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})} className='sidebar__collapse-button'>
    53                          <i className={`fas fa-arrow-${props.pref.hideSidebar ? 'right' : 'left'}`} />
    54                      </div>
    55                      {!props.pref.hideSidebar && (
    56                          <div className='sidebar__logo-container'>
    57                              <img
    58                                  onClick={() => context.history.push('/')}
    59                                  title={'Go to start page'}
    60                                  src='assets/images/argologo.svg'
    61                                  alt='Argo'
    62                                  className='sidebar__logo__text-logo'
    63                              />
    64                              <div className='sidebar__version' onClick={props.onVersionClick}>
    65                                  {loading ? 'Loading...' : error?.state ? 'Unknown' : version?.Version || 'Unknown'}
    66                              </div>
    67                          </div>
    68                      )}
    69                      <img onClick={() => context.history.push('/')} title={'Go to start page'} src='assets/images/logo.png' alt='Argo' className='sidebar__logo__character' />{' '}
    70                  </div>
    71  
    72                  {(props.navItems || []).map(item => (
    73                      <Tooltip key={item.path} content={<div className='sidebar__tooltip'>{item?.tooltip || item.title}</div>} {...tooltipProps}>
    74                          <div
    75                              key={item.title}
    76                              className={`sidebar__nav-item ${locationPath === item.path || locationPath.startsWith(`${item.path}/`) ? 'sidebar__nav-item--active' : ''}`}
    77                              onClick={() => context.history.push(item.path)}>
    78                              <div>
    79                                  <i className={item?.iconClassName || ''} />
    80                                  {!props.pref.hideSidebar && item.title}
    81                              </div>
    82                          </div>
    83                      </Tooltip>
    84                  ))}
    85  
    86                  {props.pref.hideSidebar && (
    87                      <Tooltip content='Show Filters' {...tooltipProps}>
    88                          <div
    89                              onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})}
    90                              className='sidebar__nav-item sidebar__filter-button'>
    91                              <div>
    92                                  <i className={`fas fa-filter`} />
    93                              </div>
    94                          </div>
    95                      </Tooltip>
    96                  )}
    97              </div>
    98              <div id={SIDEBAR_TOOLS_ID} />
    99          </div>
   100      );
   101  };