feat: separated header dropdown

packages/desktop/src/header-drop-down/HeaderDropDown.tsx

@@ -16,6 +16,7 @@ export interface HeaderDropDownProps {
   target: OverlayProps['target']
   container: OverlayProps['container']
   children: React.ReactElement
+  separated?: boolean
   onHide: () => void
 }
 
@@ -40,6 +41,7 @@ export const HeaderDropDown: FC<HeaderDropDownProps> = ({
   show,
   target,
   container,
+  separated,
   onHide,
   children,
 }) => (
@@ -75,6 +77,7 @@ export const HeaderDropDown: FC<HeaderDropDownProps> = ({
             width={1}
             pt={12}
             pb={12}
+            bt={separated ? 'solid 1px #e6e6e6' : undefined}
             s="0 0 16px 0 rgba(0, 0, 0, 0.12)"
           >
             {children}

packages/desktop/src/header-menu/HeaderMenuItem.tsx

@@ -1,6 +1,6 @@
 import React, {forwardRef, Ref} from 'react'
 
-import {LinkControl, Lnk, Flex, Pos, Card, LinkControlProps} from '@qiwi/pijma-core'
+import {LinkControl, Lnk, Flex, Pos, Card, LinkControlProps, Value} from '@qiwi/pijma-core'
 
 import {Text} from '../typography'
 
@@ -12,6 +12,7 @@ export interface HeaderMenuItemProps {
   rel?: LinkControlProps['rel']
   title?: string
   active?: boolean
+  underlineOffset?: Value
   ref?: Ref<HTMLAnchorElement>
   onClick?: LinkControlProps['onClick']
   onFocus?: LinkControlProps['onFocus']
@@ -62,7 +63,13 @@ export const HeaderMenuItem = forwardRef<HTMLAnchorElement, HeaderMenuItemProps>
           </Text>
         </Flex>
         {props.active ? (
-          <Pos type="absolute" height="4px" bottom={0} right={0} left={0}>
+          <Pos
+            type="absolute"
+            height="4px"
+            bottom={props.underlineOffset || 0}
+            right={0}
+            left={0}
+          >
             <Card bg="#ff8c00" height={1} width={1} rtr={4} rtl={4}/>
           </Pos>
         ) : null}