github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/navigation/navListItem.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import classNames from 'classnames';
    17  import { cloneElement, useEffect, useRef } from 'react';
    18  import { MDCRipple } from '@material/ripple';
    19  import { Link, useLocation } from 'react-router-dom';
    20  import { useNavigateWithSearchParams } from '../../utils/store';
    21  
    22  export const NavbarIndicator = (props: { pathname: string; to: string }): JSX.Element => {
    23      const { pathname, to } = props;
    24      return (
    25          <div
    26              className={classNames('mdc-list-item-indicator', {
    27                  'mdc-list-item-indicator--activated': pathname.startsWith(`/${to}`),
    28              })}></div>
    29      );
    30  };
    31  
    32  export const NavListItem = (props: { className?: string; to: string; icon?: JSX.Element }): JSX.Element => {
    33      const MDComponent = useRef<MDCRipple>();
    34      const control = useRef<HTMLAnchorElement>(null);
    35      const { className, to, icon } = props;
    36      const { pathname } = useLocation();
    37      const { navURL } = useNavigateWithSearchParams(to);
    38  
    39      useEffect(() => {
    40          if (control.current) {
    41              MDComponent.current = new MDCRipple(control.current);
    42          }
    43          return (): void => MDComponent.current?.destroy();
    44      }, []);
    45  
    46      const allClassNames = classNames(
    47          'mdc-list-item',
    48          { 'mdc-list-item--activated': pathname.startsWith(`/${to}`) },
    49          className
    50      );
    51  
    52      return (
    53          <div className="mdc-list-item-container">
    54              <NavbarIndicator pathname={pathname} to={to} />
    55              <Link
    56                  aria-label={to}
    57                  className={allClassNames}
    58                  ref={control}
    59                  to={navURL}
    60                  tabIndex={pathname.startsWith(`/${to}`) ? 0 : -1}>
    61                  <div className="mdc-list-item__ripple" />
    62                  {icon &&
    63                      cloneElement(icon, {
    64                          key: 'icon',
    65                      })}
    66              </Link>
    67          </div>
    68      );
    69  };