|
|
@ -1,29 +1,29 @@ |
|
|
import React from 'react'; |
|
|
import React from 'react'; |
|
|
import { |
|
|
import { |
|
|
Flex, |
|
|
|
|
|
Box, |
|
|
Box, |
|
|
BlockstackIcon, |
|
|
|
|
|
Stack, |
|
|
|
|
|
color, |
|
|
|
|
|
space, |
|
|
|
|
|
BoxProps, |
|
|
BoxProps, |
|
|
ChevronIcon, |
|
|
ChevronIcon, |
|
|
FlexProps, |
|
|
color, |
|
|
Fade, |
|
|
Fade, |
|
|
|
|
|
Flex, |
|
|
|
|
|
FlexProps, |
|
|
|
|
|
space, |
|
|
|
|
|
Stack, |
|
|
|
|
|
StacksLogo, |
|
|
|
|
|
StxInline, |
|
|
} from '@stacks/ui'; |
|
|
} from '@stacks/ui'; |
|
|
import { Link, LinkProps, Text } from '@components/typography'; |
|
|
import { Link, LinkProps, Text } from '@components/typography'; |
|
|
import MenuIcon from 'mdi-react/MenuIcon'; |
|
|
import MenuIcon from 'mdi-react/MenuIcon'; |
|
|
import CloseIcon from 'mdi-react/CloseIcon'; |
|
|
import CloseIcon from 'mdi-react/CloseIcon'; |
|
|
import { useMobileMenuState } from '@common/hooks/use-mobile-menu'; |
|
|
import { useMobileMenuState } from '@common/hooks/use-mobile-menu'; |
|
|
|
|
|
|
|
|
import { css, ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; |
|
|
import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core'; |
|
|
import NextLink from 'next/link'; |
|
|
import NextLink from 'next/link'; |
|
|
import { ColorModeButton } from '@components/color-mode-button'; |
|
|
import { ColorModeButton } from '@components/color-mode-button'; |
|
|
import { PAGE_WIDTH } from '@common/constants'; |
|
|
import { PAGE_WIDTH } from '@common/constants'; |
|
|
import { border, transition } from '@common/utils'; |
|
|
import { border, transition } from '@common/utils'; |
|
|
import { getCapsizeStyles } from '@components/mdx/typography'; |
|
|
import { getCapsizeStyles } from '@components/mdx/typography'; |
|
|
import { useTouchable } from '@common/hooks/use-touchable'; |
|
|
import { useTouchable } from '@common/hooks/use-touchable'; |
|
|
import { useRouter } from 'next/router'; |
|
|
|
|
|
|
|
|
|
|
|
const MenuButton = ({ ...rest }: any) => { |
|
|
const MenuButton = ({ ...rest }: any) => { |
|
|
const { isOpen, handleOpen, handleClose } = useMobileMenuState(); |
|
|
const { isOpen, handleOpen, handleClose } = useMobileMenuState(); |
|
|
@ -86,8 +86,6 @@ const nav: NavItem[] = [ |
|
|
{ label: 'Discover apps', href: 'https://app.co/' }, |
|
|
{ label: 'Discover apps', href: 'https://app.co/' }, |
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
export const HEADER_HEIGHT = 132; |
|
|
|
|
|
|
|
|
|
|
|
const HeaderTextItem: ForwardRefExoticComponentWithAs<BoxProps & LinkProps, 'a'> = forwardRefWithAs< |
|
|
const HeaderTextItem: ForwardRefExoticComponentWithAs<BoxProps & LinkProps, 'a'> = forwardRefWithAs< |
|
|
BoxProps & LinkProps, |
|
|
BoxProps & LinkProps, |
|
|
'a' |
|
|
'a' |
|
|
@ -96,14 +94,14 @@ const HeaderTextItem: ForwardRefExoticComponentWithAs<BoxProps & LinkProps, 'a'> |
|
|
color={color('invert')} |
|
|
color={color('invert')} |
|
|
{...{ |
|
|
{...{ |
|
|
...getCapsizeStyles(16, 26), |
|
|
...getCapsizeStyles(16, 26), |
|
|
color: 'currentColor', |
|
|
|
|
|
...rest, |
|
|
|
|
|
fontWeight: '400', |
|
|
fontWeight: '400', |
|
|
|
|
|
color: 'currentColor', |
|
|
_hover: { |
|
|
_hover: { |
|
|
cursor: 'pointer', |
|
|
cursor: href ? 'pointer' : 'unset', |
|
|
textDecoration: href ? 'underline' : 'none', |
|
|
textDecoration: href ? 'underline' : 'none', |
|
|
color: href ? color('accent') : 'currentColor', |
|
|
color: href ? color('accent') : 'currentColor', |
|
|
}, |
|
|
}, |
|
|
|
|
|
...rest, |
|
|
}} |
|
|
}} |
|
|
as={as} |
|
|
as={as} |
|
|
href={href} |
|
|
href={href} |
|
|
@ -201,28 +199,28 @@ const Navigation: React.FC<BoxProps> = props => { |
|
|
); |
|
|
); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const LogoLink = () => { |
|
|
const LogoLink = React.memo(() => { |
|
|
const { hover, active, bind } = useTouchable(); |
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<NextLink href="/" passHref> |
|
|
<NextLink href="/" passHref> |
|
|
<Link _hover={{ textDecoration: 'none' }} as="a" display="flex" {...bind}> |
|
|
<Link _hover={{ textDecoration: 'none' }} as="a" display="flex"> |
|
|
<Flex as="span" alignItems="center"> |
|
|
<Flex as="span" alignItems="center"> |
|
|
<Box |
|
|
<StacksLogo color={color('text-title')} /> |
|
|
as="span" |
|
|
<HeaderTextItem |
|
|
opacity={hover || active ? 0.75 : 1} |
|
|
fontWeight="500" |
|
|
color={color('invert')} |
|
|
fontSize={1} |
|
|
mr={space('tight')} |
|
|
ml="tight" |
|
|
|
|
|
pt="5px" |
|
|
|
|
|
textTransform="uppercase" |
|
|
|
|
|
color={color('text-caption')} |
|
|
|
|
|
_hover={{ color: color('text-caption') }} |
|
|
> |
|
|
> |
|
|
<BlockstackIcon size="20px" /> |
|
|
Docs |
|
|
</Box> |
|
|
|
|
|
<HeaderTextItem as="span" transform="translateY(1px)"> |
|
|
|
|
|
Blockstack |
|
|
|
|
|
</HeaderTextItem> |
|
|
</HeaderTextItem> |
|
|
</Flex> |
|
|
</Flex> |
|
|
</Link> |
|
|
</Link> |
|
|
</NextLink> |
|
|
</NextLink> |
|
|
); |
|
|
); |
|
|
}; |
|
|
}); |
|
|
|
|
|
|
|
|
const Header = ({ hideSubBar, ...rest }: any) => { |
|
|
const Header = ({ hideSubBar, ...rest }: any) => { |
|
|
return ( |
|
|
return ( |
|
|
|
Thomas Osmonson
4 years ago