diff --git a/components/app/header/Header.less b/components/app/header/Header.less index 787a91e..f254bc1 100644 --- a/components/app/header/Header.less +++ b/components/app/header/Header.less @@ -46,10 +46,10 @@ color: #fff; &:hover { - color: var(--sq-primary-blue); + color: var(--sq-blue600); } &--active { - color: var(--sq-primary-blue); + color: var(--sq-blue600); } } } @@ -59,6 +59,7 @@ .@{middle} { margin-left: 24px; &__menu { + &--dark.@{middle}__menu--dark.@{middle}__menu--dark { background-color: var(--dark-mode-card); padding: 0; @@ -115,15 +116,15 @@ &:hover { text-decoration: underline; - color: var(--sq-primary-blue); + color: var(--sq-blue600); } &--active { - color: var(--sq-primary-blue); + color: var(--sq-blue600); } } -@media screen and (max-width: 700px) { +@media screen and (max-width: 768px) { .@{left} { margin-left: 0; @@ -133,6 +134,7 @@ &__wrapper { width: 100%; margin-top: 4px; + margin-right: 0; } &--dark { @@ -184,7 +186,13 @@ } &-item.@{middle}__menu-item.@{middle}__menu-item { - padding: 16px 0; + padding: 10px 32px; + width: 100vw; + margin-left: -24px; + + &--active { + background: #4388DD1A; + } } } @@ -211,10 +219,38 @@ } &__menu { + .ant-drawer-header { + padding: 20px; + } + + .ant-drawer-header-title { + display: none; + } + .ant-drawer-extra { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + + .ant-drawer-body { + padding: 0; + } + + .@{left} { + border-bottom: 1px solid var(--sq-gray200); + } + + .@{middle} { + &__item { + border-bottom: 1px solid var(--sq-gray200); + } + } + &--dark { .@{middle} { &__item { - border-bottom: 1px solid #34414B; + border-bottom: 1px solid var(--dark-mode-border); } } } @@ -226,11 +262,11 @@ color: #fff; &:hover { text-decoration: underline; - color: var(--sq-primary-blue); + color: var(--sq-blue600); } &--active { - color: var(--sq-primary-blue); + color: var(--sq-blue600); } } } diff --git a/components/app/header/Header.tsx b/components/app/header/Header.tsx index bb52f15..a97290c 100644 --- a/components/app/header/Header.tsx +++ b/components/app/header/Header.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import clsx from 'clsx'; -import { Space } from 'antd'; +import { Drawer, Space } from 'antd'; import useScreen from 'use-screen'; import { matchPath } from 'react-router-dom'; import { AiOutlineMenu } from 'react-icons/ai'; @@ -128,7 +128,11 @@ const MiddleHeader = ({ <> <>{middleElement} {!middleElement && appNavigation && ( - + {appNavigation.map((nav, index) => { if (nav.dropdown) { return ( @@ -139,9 +143,19 @@ const MiddleHeader = ({ menuitem={nav.dropdown.map((menu) => ({ key: menu.link, label: {menu.label}, - className: clsx(bem('menu-item'), theme === 'dark' && bem('menu-item', { dark: 'dark' })), // should refoctor + className: clsx( + bem('menu-item', { + active: active?.(menu.link) ? 'active' : undefined, + dark: theme === 'dark' ? 'dark' : undefined, + }), + ), // should refoctor }))} label={nav.label} + active={ + nav.dropdown + ? active?.(nav.link || '????') || nav.dropdown.some((i) => active?.(i.link)) + : active?.(nav.link || '????') + } trigger={[isMobile ? 'click' : 'hover']} onMenuItemClick={({ key }) => { if (nav.onClick) { @@ -193,6 +207,7 @@ export interface HeaderProps extends MiddleHeaderProps { leftElement?: React.ReactElement; rightElement?: React.ReactElement; className?: string; + closeDrawerAfterNavigate?: boolean; } export const Header: React.FC> = ({ @@ -207,6 +222,7 @@ export const Header: React.FC> = ({ children, navigate, active, + closeDrawerAfterNavigate, }) => { const { theme } = React.useContext(Context); const bem = useBem('subql-header'); @@ -241,19 +257,52 @@ export const Header: React.FC> = ({ style={{ cursor: 'pointer' }} /> - {showMenu && ( -
- - - <>{rightElement} -
- )} + { + setShowMenu(false); + }} + width={'100vw'} + rootClassName={clsx(mobileHeaderBem('menu', { dark: theme === 'dark' ? 'dark' : null }))} + extra={ + <> +
+ {customLogo ? ( + customLogo + ) : ( + + SubQuery Logo + + )} +
+ + { + setShowMenu(!showMenu); + }} + size={40} + style={{ cursor: 'pointer' }} + /> + + } + > + + { + if (closeDrawerAfterNavigate) { + navigate?.(link); + setShowMenu(false); + } + navigate?.(link); + }} + active={active} + /> + <>{rightElement} + ) : (
diff --git a/components/common/dropdown/Dropdown.less b/components/common/dropdown/Dropdown.less new file mode 100644 index 0000000..8cb54a9 --- /dev/null +++ b/components/common/dropdown/Dropdown.less @@ -0,0 +1,30 @@ +.subql-dropdown { + cursor: pointer; + height: 100%; + + &__icon { + font-size: 12px; + color: var(--sq-gray600); + + &--dark { + color: #fff; + } + } + + &--active { + color: var(--sq-blue600); + .subql-typography { + color: var(--sq-blue600); + } + + .subql-dropdown__icon { + color: var(--sq-blue600); + } + } + + &-desc { + &__title { + margin: 0.25rem 0; + } + } +} diff --git a/components/common/dropdown/Dropdown.module.css b/components/common/dropdown/Dropdown.module.css deleted file mode 100644 index 0125a63..0000000 --- a/components/common/dropdown/Dropdown.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.pointer { - cursor: pointer; -} - -.colorInherit { - color: inherit; -} - -.dropdownLabel { - height: 100%; -} - -.isOnHover { - color: var(--sq-primary-blue); -} - -.menuOverlay { - max-width: 40%; - padding: 1rem; -} - -.title { - margin: 0.25rem 0; -} - -.description { - color: var(--sq-gray600); -} - -.menuWithDesc { - width: max-content; -} diff --git a/components/common/dropdown/Dropdown.tsx b/components/common/dropdown/Dropdown.tsx index 336171d..e899a77 100644 --- a/components/common/dropdown/Dropdown.tsx +++ b/components/common/dropdown/Dropdown.tsx @@ -6,9 +6,10 @@ import clsx from 'clsx'; import { DropDownProps as AntdDropdownProps, Dropdown as AntdDropdown, Menu, Space } from 'antd'; import DownOutlined from '@ant-design/icons/DownOutlined'; import { ItemType, MenuClickEventHandler } from 'rc-menu/lib/interface'; -import styles from './Dropdown.module.css'; +import './Dropdown.less'; import { Typography } from '../typography'; import { Context } from '../provider'; +import { useBem } from 'components/utilities/useBem'; export interface DropdownProps extends Partial { label?: string; @@ -33,9 +34,10 @@ export const Dropdown: React.FC = ({ ...props }) => { const { theme } = React.useContext(Context); - const [isOpen, setIsOpen] = React.useState(false); + const [, setIsOpen] = React.useState(false); + const bem = useBem('subql-dropdown'); const sortedLabel = ( - + {LeftLabelIcon} { @@ -48,12 +50,7 @@ export const Dropdown: React.FC = ({ {LeftLabelIcon ? undefined : RightLabelIcon ? ( RightLabelIcon ) : ( - + )} @@ -91,9 +88,11 @@ export interface MenuWithDescProps { width?: string | number; } export const MenuWithDesc = ({ title, description, className, width }: MenuWithDescProps) => { + const bem = useBem('subql-dropdown-desc'); + return ( -
- +
+ {title} diff --git a/components/common/subqlCard/subqlCard.less b/components/common/subqlCard/subqlCard.less index d7c8abe..70bcb98 100644 --- a/components/common/subqlCard/subqlCard.less +++ b/components/common/subqlCard/subqlCard.less @@ -20,7 +20,7 @@ padding-top: 12px; } - &--split { + &__split { width: 100%; height: 1px; background: var(--sq-gray300); diff --git a/components/common/subqlCard/subqlCard.tsx b/components/common/subqlCard/subqlCard.tsx index 3cc7128..94cab2b 100644 --- a/components/common/subqlCard/subqlCard.tsx +++ b/components/common/subqlCard/subqlCard.tsx @@ -52,7 +52,7 @@ export const SubqlCard: FC = ({ } style={{ width: width ? `${width}px` : 'auto', ...style }} > - {children &&
} + {children &&
} {children} );