// @flow
import * as React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import SvgIcon, { IconEnum } from '../svg-icon';

type Props = {
  headerTitle: string,
  toggleSection: (toggle: SyntheticKeyboardEvent<HTMLButtonElement>) => void,
  toggleFilter?: () => void,
  sectionVisible: boolean,
  children?: React.Node,
};

const StyledHeader: React.ComponentType<{}> = styled.li`
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:hover {
    background-color: var(--hl-xs);
  }

  h6 {
    font-size: var(--font-size-sm);
    display: flex;
    flex-grow: 1;
    &:hover {
      cursor: default;
    }
  }

  h6:hover {
    text-decoration: underline;
  }

  label {
    color: red !important;
    position: absolute;
    padding-top: var(--padding-xs);
  }

  & > * {
    padding: var(--padding-md) var(--padding-md) var(--padding-md) var(--padding-md);
    font-size: var(--font-size-md);

    svg {
      margin-left: var(--padding-sm);
      font-size: var(--font-size-xl);

      &:hover {
        fill: var(--color-font);
        opacity: 1;
      }
    }
  }
`;

const SidebarHeader = ({
  headerTitle,
  toggleSection,
  toggleFilter,
  sectionVisible,
  children,
}: Props) => (
  <StyledHeader>
    <h6 onClick={toggleSection}>{headerTitle}</h6>
    <div>
      {children || (
        <motion.span
          onClick={toggleFilter}
          initial={{ opacity: sectionVisible ? 0.6 : 0 }}
          animate={{ opacity: sectionVisible ? 0.6 : 0 }}>
          <SvgIcon icon={IconEnum.search} />
        </motion.span>
      )}
    </div>
  </StyledHeader>
);

export default SidebarHeader;

@@ -1261,34 +1261,298 @@
  =%3E 
-(%0A  %3CStyledHeader%3E%0A    %3Ch6
+%7B%0A  const handleFilterClick =%0A    sectionVisible && toggleFilter // only handle a click if the section is open%0A      ? e =%3E %7B%0A          e.stopPropagation(); // Prevent a parent from also handling the click%0A          toggleFilter();%0A        %7D%0A      : undefined;%0A%0A  return (%0A    %3CStyledHeader
  onC
@@ -1572,16 +1572,27 @@
 ection%7D%3E
+%0A      %3Ch6%3E
 %7BheaderT
@@ -1602,16 +1602,18 @@
 e%7D%3C/h6%3E%0A
+  
     %3Cdiv
@@ -1620,16 +1620,18 @@
 %3E%0A      
+  
 %7Bchildre
@@ -1645,16 +1645,18 @@
         
+ 
+ 
 %3Cmotion.
@@ -1670,16 +1670,18 @@
         
+  
 onClick=
@@ -1681,28 +1681,28 @@
 nClick=%7B
-togg
+hand
 leFilter
 %7D%0A      
@@ -1693,18 +1693,25 @@
 leFilter
-%7D%0A
+Click%7D%0A  
         
@@ -1760,16 +1760,18 @@
  : 0 %7D%7D%0A
+  
         
@@ -1831,16 +1831,18 @@
         
+  
 %3CSvgIcon
@@ -1876,16 +1876,18 @@
         
+  
 %3C/motion
@@ -1903,11 +1903,15 @@
     
+ 
+ 
 )%7D%0A
+  
     
@@ -1917,16 +1917,18 @@
  %3C/div%3E%0A
+  
   %3C/Styl
@@ -1937,17 +1937,22 @@
 Header%3E%0A
-)
+  );%0A%7D
 ;%0A%0Aexpor

Fix design sidebar filter hitbox (#2873)