Simplify code

Graylog2 · Oct 3, 2024 · 051c724 · 051c724
1 parent c4cb7f5
commit 051c724
Showing 1 changed file with 29 additions and 47 deletions.
diff --git a/graylog2-web-interface/src/views/components/sidebar/NavItem.tsx b/graylog2-web-interface/src/views/components/sidebar/NavItem.tsx
@@ -16,24 +16,12 @@
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { DefaultTheme } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import Icon from 'components/common/Icon';
 import type { IconName } from 'components/common/Icon';
 import { Link } from 'components/common/router';
 
-export const containerBaseStyling = (fonts: DefaultTheme['fonts']) => css`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 40px;
-  cursor: pointer;
-  font-size: ${fonts.size.h3};
-`;
-
 type ContainerProps = {
   $isSelected: boolean,
   $sidebarIsPinned: boolean,
@@ -42,9 +30,14 @@ type ContainerProps = {
 };
 
 const Container = styled.button<ContainerProps>(({ theme: { colors, fonts }, $isSelected, $sidebarIsPinned, $disabled, $isLink }) => css`
-  ${containerBaseStyling(fonts)}
-  z-index: 4; /* to render over SidebarNav::before */
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  font-size: ${fonts.size.h3};
+  z-index: 4; /* to render over SidebarNav::before */
   cursor: ${$disabled ? 'not-allowed' : 'pointer'};
   color: ${colors.variant.darkest.default};
   background: transparent;
@@ -60,7 +53,7 @@ const Container = styled.button<ContainerProps>(({ theme: { colors, fonts }, $is
   }
 
   /* stylelint-disable selector-max-empty-lines, indentation */
-  ${(($isSelected && !$isLink) && !$sidebarIsPinned) && css`
+  ${$isSelected && !$isLink && !$sidebarIsPinned && css`
     &::before,
     &::after {
       content: '';
@@ -75,7 +68,7 @@ const Container = styled.button<ContainerProps>(({ theme: { colors, fonts }, $is
       transform: skewY(-45deg);
       top: calc(50% - 12px);
     }
-    
+
     &::after {
       transform: skewY(45deg);
       bottom: calc(50% - 12px);
@@ -85,57 +78,50 @@ const Container = styled.button<ContainerProps>(({ theme: { colors, fonts }, $is
 `);
 
 type IconWrapProps = {
-  $showTitleOnHover: boolean,
   $isSelected: boolean,
   $sidebarIsPinned?: boolean,
   $disabled: boolean,
   $isLink: boolean,
 }
 const IconWrap = styled.span<IconWrapProps>(({
-  $showTitleOnHover, $isSelected, $disabled, $isLink,
+  $isSelected, $disabled, $isLink,
   $sidebarIsPinned, theme: { colors },
 }) => css`
   display: flex;
-  width: 100%;
-  height: 100%;
+  width: ${$isLink ? '40px' : '100%'};
+  height: ${$isLink ? '40px' : '100%'};
   align-items: center;
   justify-content: center;
   position: relative;
   opacity: ${$disabled ? 0.65 : 1};
-  background: ${($isSelected) ? colors.gray[90] : colors.global.contentBackground};
-
+  background: ${$isSelected ? colors.gray[90] : colors.global.contentBackground};
+  border-radius: ${$isLink ? '50%' : '0'};
+  
   &:hover {
     color: ${$isSelected ? colors.variant.darkest.default : colors.variant.darker.default};
     background: ${$isSelected ? colors.gray[80] : colors.variant.lightest.default};
     + div {
-      display: ${($showTitleOnHover && ($isLink ? true : !$isSelected)) ? 'flex' : 'none'};
+      display: ${$isLink || !$isSelected ? 'flex' : 'none'};
     }
-
-    &::after {
-      display: ${($showTitleOnHover) ? 'block' : 'none'};
+  
+  &::after {
+      display: block;
     }
   }
-
+  
   &::after {
-    display: ${($isSelected && !$isLink) ? 'block' : 'none'};
-    box-shadow: ${($isSelected && !$sidebarIsPinned && !$isLink) ? `inset 2px -2px 2px 0 ${colors.global.navigationBoxShadow}` : 'none'};
-    background-color: ${($isSelected && !$isLink) ? colors.global.contentBackground : colors.variant.lightest.info};
-    border: ${($isSelected && !$isLink) ? 'none' : `1px solid ${colors.variant.light.info}`};
+    display: ${$isSelected && !$isLink ? 'block' : 'none'};
+    box-shadow: ${$isSelected && !$sidebarIsPinned && !$isLink ? `inset 2px -2px 2px 0 ${colors.global.navigationBoxShadow}` : 'none'};
+    background-color: ${$isSelected && !$isLink ? colors.global.contentBackground : colors.variant.lightest.info};
+    border: ${$isSelected && !$isLink ? 'none' : `1px solid ${colors.variant.light.info}`};
     content: ' ';
     position: absolute;
-    left: ${$isLink ? 89 : 82.5}%;
+    left: ${$isLink ? '89%' : '82.5%'};
     top: calc(50% - 9px);
     width: 18px;
     height: 18px;
     transform: rotate(45deg);
   }
-
-  ${$isLink ? css`
-    border-radius: 50%;
-    height: 40px;
-    width: 40px;
-  ` : ''}
-  
 `);
 
 const Title = styled.div(({ theme: { colors, fonts } }) => css`
@@ -167,14 +153,13 @@ export type Props = {
   title: string,
   icon: IconName,
   onClick?: () => void,
-  showTitleOnHover?: boolean,
   sidebarIsPinned: boolean,
   disabled?: boolean,
   ariaLabel: string,
   linkTarget?: string,
 };
 
-const NavItem = ({ isSelected, title, icon, onClick, showTitleOnHover, sidebarIsPinned, disabled, ariaLabel, linkTarget }: Props) => {
+const NavItem = ({ isSelected, title, icon, onClick, sidebarIsPinned, disabled, ariaLabel, linkTarget }: Props) => {
   const isLink = !!linkTarget;
   const containerProps = isLink ? { as: Link, to: linkTarget, $isLink: true } : { $isLink: false };
 
@@ -183,25 +168,23 @@ const NavItem = ({ isSelected, title, icon, onClick, showTitleOnHover, sidebarIs
                aria-label={ariaLabel}
                $isSelected={isSelected}
                onClick={!disabled ? onClick : undefined}
-               title={showTitleOnHover ? '' : title}
+               title={title}
                $sidebarIsPinned={sidebarIsPinned}
                $disabled={disabled}>
-      <IconWrap $showTitleOnHover={showTitleOnHover}
-                $isLink={isLink}
+      <IconWrap $isLink={isLink}
                 $isSelected={isSelected}
                 $sidebarIsPinned={sidebarIsPinned}
                 $disabled={disabled}>
         <Icon name={icon} type="regular" />
       </IconWrap>
-      {(showTitleOnHover && (isLink || !isSelected)) && <Title><span>{title}</span></Title>}
+      {(isLink ? true : !isSelected) && <Title><span>{title}</span></Title>}
     </Container>
   );
 };
 
 NavItem.propTypes = {
   icon: PropTypes.node.isRequired,
   isSelected: PropTypes.bool,
-  showTitleOnHover: PropTypes.bool,
   sidebarIsPinned: PropTypes.bool,
   title: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
@@ -211,7 +194,6 @@ NavItem.defaultProps = {
   onClick: undefined,
   linkTarget: undefined,
   isSelected: false,
-  showTitleOnHover: true,
   sidebarIsPinned: false,
   disabled: false,
 };