All files / src/components nav-dropdown.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {Absolute, BorderBox, StyledOcticon, Text, themeGet} from '@primer/components'
import {ChevronDownIcon} from '@primer/octicons-react'
import React from 'react'
import styled from 'styled-components'
import Details from './details'
 
function NavDropdown({title, children}) {
  return (
    <Details overlay={true}>
      {({toggle}) => (
        <>
          <summary style={{cursor: 'pointer'}} onClick={toggle}>
            <Text>{title}</Text>
            <StyledOcticon icon={ChevronDownIcon} ml={1} />
          </summary>
          <Absolute>
            <BorderBox
              bg="white"
              py={1}
              mt={2}
              boxShadow="medium"
              color="gray.8"
            >
              {children}
            </BorderBox>
          </Absolute>
        </>
      )}
    </Details>
  )
}
 
export const NavDropdownItem = styled.a`
  display: block;
  padding: ${themeGet('space.2')} ${themeGet('space.3')};
  color: inherit;
  text-decoration: none;
 
  &:hover {
    color: ${themeGet('colors.white')};
    background-color: ${themeGet('colors.blue.5')};
    text-decoration: none;
  }
`
 
export default NavDropdown