Skip to content

F
frontend
Commit 989cb7c4 authored by tom's avatar tom
Browse files
Options

fix vertical navigation

parent 4ec38bb7
Show whitespace changes
Inline Side-by-side
Showing with 74 additions and 102 deletions
ui/pages/Chakra.tsx
View file @ 989cb7c4
......@@ -41,6 +41,8 @@ const ChakraShowcases = () => {
<Link>Primary</Link>
<Link visual="secondary">Secondary</Link>
<Link visual="subtle">Subtle</Link>
<Link visual="navigation">Navigation</Link>
<Link visual="navigation" data-selected p={ 3 } borderRadius="base">Navigation selected</Link>
</HStack>
</section>
......
ui/shared/layout/Layout.tsx
View file @ 989cb7c4
......@@ -5,8 +5,8 @@ import type { Props } from './types';
import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
import HeaderAlert from 'ui/snippets/header/HeaderAlert';
// TODO @tom2drum fix main layout
// import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
// import HeaderMobile from 'ui/snippets/header/HeaderMobile';
import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
import HeaderMobile from 'ui/snippets/header/HeaderMobile';
import * as Layout from './components';
......@@ -17,7 +17,7 @@ const LayoutDefault = ({ children }: Props) => {
<Layout.NavBar/>
{ /* <HeaderMobile/> */ }
<Layout.MainArea>
{ /* <Layout.SideBar/> */ }
<Layout.SideBar/>
<Layout.MainColumn>
<HeaderAlert/>
{ /* <HeaderDesktop/> */ }
......
ui/snippets/navigation/useColors.ts deleted 100644 → 0
View file @ 4ec38bb7
import { useColorModeValue } from 'toolkit/chakra/color-mode';
// TODO @tom2drum remove this
export default function useColors() {
return {
text: {
'default': useColorModeValue('gray.600', 'gray.400'),
active: useColorModeValue('blue.700', 'gray.50'),
hover: 'link_hovered',
},
bg: {
'default': 'transparent',
active: useColorModeValue('blue.50', 'gray.800'),
},
border: {
'default': 'border.divider',
active: useColorModeValue('blue.50', 'gray.800'),
},
};
}
ui/snippets/navigation/useNavLinkStyleProps.tsx
View file @ 989cb7c4
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
import useColors from './useColors';
type Props = {
isExpanded?: boolean;
isCollapsed?: boolean;
......@@ -9,15 +7,12 @@ type Props = {
};
export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: Props) {
const colors = useColors();
return {
itemProps: {
visual: 'navigation' as const,
py: '9px',
display: 'flex',
color: isActive ? colors.text.active : colors.text.default,
bgColor: isActive ? colors.bg.active : colors.bg.default,
_hover: { color: isActive ? colors.text.active : colors.text.hover },
...(isActive ? { 'data-selected': true } : {}),
borderRadius: 'base',
...getDefaultTransitionProps({ transitionProperty: 'width, padding' }),
},
......
ui/snippets/navigation/vertical/NavLink.tsx
View file @ 989cb7c4
import { Link, Text, HStack, Tooltip, Box, useBreakpointValue } from '@chakra-ui/react';
import { Link, HStack, Box, useBreakpointValue, chakra } from '@chakra-ui/react';
import NextLink from 'next/link';
import React from 'react';
......@@ -8,11 +8,11 @@ import { route } from 'nextjs-routes';
import useIsMobile from 'lib/hooks/useIsMobile';
import { isInternalItem } from 'lib/hooks/useNavItems';
import { Tooltip } from 'toolkit/chakra/tooltip';
import IconSvg from 'ui/shared/IconSvg';
import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from '../LightningLabel';
import NavLinkIcon from '../NavLinkIcon';
import useColors from '../useColors';
import useNavLinkStyleProps from '../useNavLinkStyleProps';
import { checkRouteHighlight } from '../utils';
......@@ -25,7 +25,6 @@ type Props = {
const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
const isMobile = useIsMobile();
const colors = useColors();
const isInternalLink = isInternalItem(item);
const href = isInternalLink ? route(item.nextRoute) : item.url;
......@@ -51,28 +50,36 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
onClick={ onClick }
_hover={{
[`& *:not(.${ LIGHTNING_LABEL_CLASS_NAME }, .${ LIGHTNING_LABEL_CLASS_NAME } *)`]: {
color: isDisabled ? 'inherit' : 'link_hovered',
color: isDisabled ? 'inherit' : 'link.primary.hover',
},
}}
>
<Tooltip
label={ item.text }
hasArrow={ false }
isDisabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
placement="right"
variant="nav"
gutter={ 20 }
color={ isInternalLink && item.isActive ? colors.text.active : colors.text.hover }
margin={ 0 }
content={ item.text }
showArrow={ false }
disabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
positioning={{ placement: 'right', offset: { crossAxis: 0, mainAxis: 20 } }}
visual="navigation"
contentProps={{
color: isInternalLink && item.isActive ? 'link.navigation.fg.selected' : 'link.navigation.fg.hover',
}}
interactive
>
<HStack spacing={ 0 } overflow="hidden">
<HStack gap={ 0 } overflow="hidden">
<NavLinkIcon item={ item }/>
<Text { ...styleProps.textProps } as="span" ml={ 3 }>
<chakra.span
{ ...styleProps.textProps }
ml={ 3 }
display={{ base: 'inline', lg: isExpanded ? 'inline' : 'none', xl: isCollapsed ? 'none' : 'inline' }}
>
<span>{ item.text }</span>
{ !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" verticalAlign="middle"/> }
</Text>
</chakra.span>
{ isHighlighted && (
<LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
<LightningLabel
iconColor={ isInternalLink && item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
isCollapsed={ isCollapsed }
/>
) }
</HStack>
</Tooltip>
......
ui/snippets/navigation/vertical/NavLinkGroup.tsx
View file @ 989cb7c4
import {
Text,
HStack,
Box,
PopoverTrigger,
PopoverContent,
PopoverBody,
VStack,
} from '@chakra-ui/react';
import { Text, HStack, Box, VStack } from '@chakra-ui/react';
import React from 'react';
import type { NavGroupItem } from 'types/client/navigation';
import Popover from 'ui/shared/chakra/Popover';
import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
import IconSvg from 'ui/shared/IconSvg';
import LightningLabel from '../LightningLabel';
......@@ -34,12 +26,12 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
return (
<Box as="li" listStyleType="none" w="100%">
<Popover
trigger="hover"
placement="right-start"
<PopoverRoot
// TODO @tom2drum fix trigger
// trigger="hover"
positioning={{ placement: 'right-start', offset: { crossAxis: 8, mainAxis: 8 } }}
// should not be lazy to help google indexing pages
isLazy={ false }
gutter={ 8 }
lazyMount={ false }
>
<PopoverTrigger>
<Box
......@@ -49,8 +41,9 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
aria-label={ `${ item.text } link group` }
position="relative"
bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
>
<HStack spacing={ 0 } overflow="hidden">
<HStack gap={ 0 } overflow="hidden">
<NavLinkIcon item={ item }/>
<Text
{ ...styleProps.textProps }
......@@ -59,7 +52,10 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
{ item.text }
</Text>
{ isHighlighted && (
<LightningLabel iconColor={ styleProps.itemProps.bgColor } isCollapsed={ isCollapsed }/>
<LightningLabel
iconColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
isCollapsed={ isCollapsed }
/>
) }
<IconSvg
name="arrows/east-mini"
......@@ -77,10 +73,10 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
</PopoverTrigger>
<PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
<PopoverBody p={ 4 }>
<Text variant="secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
<Text color="text.secondary" fontSize="sm" mb={ 1 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
{ item.text }
</Text>
<VStack spacing={ 1 } alignItems="start" as="ul">
<VStack gap={ 1 } alignItems="start" as="ul">
{ item.subItems.map((subItem, index) => Array.isArray(subItem) ? (
<Box
key={ index }
......@@ -101,7 +97,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
</VStack>
</PopoverBody>
</PopoverContent>
</Popover>
</PopoverRoot>
</Box>
);
};
......
ui/snippets/navigation/vertical/NavigationDesktop.tsx
View file @ 989cb7c4
import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
import { Flex, Box, VStack } from '@chakra-ui/react';
import React from 'react';
import config from 'configs/app';
......@@ -46,18 +46,12 @@ const NavigationDesktop = () => {
}
}, [ handleTogglerClick ]);
const chevronIconStyles = {
bgColor: useColorModeValue('white', 'black'),
color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
borderColor: 'border.divider',
};
const isExpanded = isCollapsed === false;
return (
<Flex
display={{ base: 'none', lg: 'flex' }}
role="group"
className="group"
position="relative"
flexDirection="column"
alignItems="stretch"
......@@ -88,7 +82,7 @@ const NavigationDesktop = () => {
{ Boolean(config.UI.navigation.featuredNetworks) && <NetworkMenu isCollapsed={ isCollapsed }/> }
</Box>
<Box as="nav" mt={ 6 } w="100%">
<VStack as="ul" spacing="1" alignItems="flex-start">
<VStack as="ul" gap="1" alignItems="flex-start">
{ mainNavItems.map((item) => {
if (isGroupItem(item)) {
return <NavLinkGroup key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
......@@ -100,7 +94,7 @@ const NavigationDesktop = () => {
</Box>
{ isAuth && (
<Box as="nav" borderTopWidth="1px" borderColor="border.divider" w="100%" mt={ 3 } pt={ 3 }>
<VStack as="ul" spacing="1" alignItems="flex-start">
<VStack as="ul" gap="1" alignItems="flex-start">
<NavLinkRewards isCollapsed={ isCollapsed }/>
{ accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
</VStack>
......@@ -110,10 +104,12 @@ const NavigationDesktop = () => {
name="arrows/east-mini"
width={ 6 }
height={ 6 }
border="1px"
_hover={{ color: 'link_hovered' }}
_hover={{ color: 'link.primary.hover' }}
borderRadius="base"
{ ...chevronIconStyles }
bgColor={{ base: 'white', _dark: 'black' }}
color={{ base: 'blackAlpha.400', _dark: 'whiteAlpha.400' }}
borderWidth="1px"
borderColor="border.divider"
transform={{ lg: isExpanded ? 'rotate(0)' : 'rotate(180deg)', xl: isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }}
{ ...getDefaultTransitionProps({ transitionProperty: 'transform, left' }) }
transformOrigin="center"
......
ui/snippets/networkMenu/NetworkMenu.tsx
View file @ 989cb7c4
import { PopoverTrigger } from '@chakra-ui/react';
import React from 'react';
import Popover from 'ui/shared/chakra/Popover';
import { PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
import NetworkMenuButton from './NetworkMenuButton';
import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
......@@ -15,18 +14,23 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
const menu = useNetworkMenu();
return (
<Popover openDelay={ 300 } placement="right-start" isLazy isOpen={ menu.isOpen } onClose={ menu.onClose }>
<PopoverRoot
positioning={{ placement: 'right-start', offset: { crossAxis: 0, mainAxis: 8 } }}
lazyMount
open={ menu.open }
onOpenChange={ menu.onOpenChange }
>
<PopoverTrigger>
<NetworkMenuButton
marginLeft="auto"
overflow="hidden"
width={{ base: 'auto', lg: isCollapsed === false ? 'auto' : '0px', xl: isCollapsed ? '0px' : 'auto' }}
isActive={ menu.isOpen }
width={{ base: 'auto', lg: isCollapsed === false ? '36px' : '0px', xl: isCollapsed ? '0px' : '36px' }}
isActive={ menu.open }
onClick={ menu.onToggle }
/>
</PopoverTrigger>
<NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>
</Popover>
</PopoverRoot>
);
};
......
ui/snippets/networkMenu/NetworkMenuButton.tsx
View file @ 989cb7c4
import { Button, chakra } from '@chakra-ui/react';
import { chakra } from '@chakra-ui/react';
import React from 'react';
import { useColorModeValue } from 'toolkit/chakra/color-mode';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
import { IconButton } from 'toolkit/chakra/icon-button';
import IconSvg from 'ui/shared/IconSvg';
interface Props {
......@@ -13,35 +12,28 @@ interface Props {
}
const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
const defaultIconColor = useColorModeValue('gray.600', 'gray.400');
const bgColorMobile = useColorModeValue('blue.50', 'gray.800');
const iconColorMobile = useColorModeValue('blue.700', 'blue.50');
return (
<Button
<IconButton
className={ className }
variant="unstyled"
visual="plain"
display="inline-flex"
alignItems="center"
ref={ ref }
h="36px"
h={ 9 }
borderRadius="base"
backgroundColor={ isActive ? bgColorMobile : 'none' }
backgroundColor={ isActive ? { _light: 'blue.50', _dark: 'gray.400' } : 'none' }
onClick={ onClick }
aria-label="Network menu"
aria-roledescription="menu"
>
<IconSvg
name="networks"
width="36px"
height="36px"
padding="10px"
color={ isActive ? iconColorMobile : defaultIconColor }
boxSize={ 4 }
color={ isActive ? { _light: 'blue.700', _dark: 'blue.50' } : { _light: 'gray.600', _dark: 'gray.400' } }
_hover={{ color: isMobile ? undefined : 'link_hovered' }}
cursor="pointer"
{ ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
/>
</Button>
</IconButton>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment