diff --git a/src/components/appHeader/MenuMobile.tsx b/src/components/appHeader/MenuMobile.tsx new file mode 100644 index 0000000..d87101c --- /dev/null +++ b/src/components/appHeader/MenuMobile.tsx @@ -0,0 +1,105 @@ +import {Box, Text} from "grommet"; +import {useHistory} from "react-router-dom"; +import {useState} from "react"; +import {CaretDownFill, CaretUpFill, Sun, Moon, Clock, Calendar} from "grommet-icons"; +import {setThemeMode, useThemeMode} from "../../hooks/themeSwitcherHook"; +import {DateFormat, setDateFormatMode, useDateFormatMode} from "../../hooks/dateFormatSwitcherHook"; + +interface MenuRowItem { + title: string + route?: string + content?: any +} + +interface MenuRowProps { + title: string + items: MenuRowItem[] + route?: string + onSelect?: (title: string, route?: string) => void +} + +const MenuItem = (props: { item: MenuRowItem, onSelect?: (title: string, route?: string) => void }) => { + const { item: { title, route, content }, onSelect } = props + const onClick = (e: any) => { + e.stopPropagation() + if(onSelect) { + onSelect(title, route) + } + } + return + {title} + {!!content && + content + } + +} + +const MenuRow = (props: MenuRowProps) => { + const [isItemsVisible, setItemsVisible] = useState(false) + const {title, items, route, onSelect} = props + + const onClick = () => { + if(route && onSelect) { + onSelect(title, route) + } + if(items.length > 0) { + setItemsVisible(!isItemsVisible) + } + } + + return + + {title} + {items.length > 0 && !isItemsVisible && } + {items.length > 0 && isItemsVisible && } + + {isItemsVisible && + + + {items.map((item, i) => )} + + } + +} + +export const MenuMobile = (props: { isOpened: boolean; onClose: () => void }) => { + const history = useHistory(); + + const onSelect = (title: string, route?: string) => { + if(route) { + history.push(route); + props.onClose() + } + } + + const ThemeSwitch = () => { + const theme = useThemeMode(); + return setThemeMode(theme === 'light' ? 'dark' : 'light')}> + {theme === 'light' ? : } + {theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'} + + } + + const DateFormatSwitch = () => { + const dateFormat = useDateFormatMode(); + return setDateFormatMode(dateFormat === DateFormat.EXACT ? DateFormat.RELATIVE : DateFormat.EXACT)} + > + {dateFormat === DateFormat.EXACT ? : } + {dateFormat === DateFormat.EXACT ? 'Switch to relative dates' : 'Switch to exact dates'} + + } + + return + + + + + }, { title: '', content: }]} /> + +} diff --git a/src/components/appHeader/ResourcesButton.tsx b/src/components/appHeader/ResourcesButton.tsx new file mode 100644 index 0000000..b6680dc --- /dev/null +++ b/src/components/appHeader/ResourcesButton.tsx @@ -0,0 +1,70 @@ +import React, { useState } from "react"; +import { CaretDownFill } from "grommet-icons"; +import { Box, DropButton, Anchor, Text } from "grommet"; +import { useHistory } from "react-router-dom"; + +export function ResourcesButton() { + const history = useHistory(); + const [isOpen, setIsOpen] = useState(false); + + return ( + + + Resources + + + + } + onOpen={() => { + setIsOpen(true); + }} + onClose={() => { + setIsOpen(false); + }} + open={isOpen} + dropProps={{ round: '4px' }} + dropAlign={{ top: "bottom", right: "right" }} + dropContent={ + + { + setIsOpen(false); + history.push("/charts"); + }} + > + + Charts & Stats + (new) + + + { + setIsOpen(false); + history.push("/topstat"); + }} + > + + Top Statistics + (new) + + + + } + style={{ + border: "none", + boxShadow: "none", + paddingRight: "6px" + }} + /> + ); +} diff --git a/src/components/appHeader/ToolsButton.tsx b/src/components/appHeader/ToolsButton.tsx index 8f7a33d..99af2ef 100644 --- a/src/components/appHeader/ToolsButton.tsx +++ b/src/components/appHeader/ToolsButton.tsx @@ -61,30 +61,6 @@ export function ToolsButton() { > Proxy verification - { - setIsOpen(false); - history.push("/charts"); - }} - > - - Charts & Stats - (new) - - - { - setIsOpen(false); - history.push("/topstat"); - }} - > - - Top Statistics - (new) - - } style={{ diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx index e6d9029..8a64d8b 100644 --- a/src/components/appHeader/index.tsx +++ b/src/components/appHeader/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useState} from "react"; import { Box, Heading, Text } from "grommet"; import { useMediaQuery } from 'react-responsive' import { FiatPrice, BaseContainer } from "src/components/ui"; @@ -9,6 +9,9 @@ import { useThemeMode } from "src/hooks/themeSwitcherHook"; import styled, { CSSProperties } from "styled-components"; import { AddressFormatSwitch } from "./AddressFormatSwitch"; import { ToolsButton } from "./ToolsButton"; +import { ResourcesButton } from "./ResourcesButton"; +import {MenuMobile} from "./MenuMobile"; +import {Menu, Close} from "grommet-icons"; const HeaderLine = (props: any) => { //@ts-ignore @@ -37,49 +40,64 @@ const ProjectName = styled(Box)` export function AppHeader(props: { style: CSSProperties }) { const history = useHistory(); + const [isMenuMobileOpened, setMenuMobileOpened] = useState(false) const isTabletOrMobile = useMediaQuery({ query: '(max-width: 960px)' }) return ( - - - history.push("/")} - > - - + + + + history.push("/")} + > + + + {!isTabletOrMobile && + + Harmony + Block Explorer + + } + + + + + {!isTabletOrMobile && + + Address Format + + } + + {!isTabletOrMobile && - - Harmony - Block Explorer - + + + + + + } - - - - - {!isTabletOrMobile && - - Address Format - + {isTabletOrMobile && + + {isMenuMobileOpened && setMenuMobileOpened(false)} /> } + {!isMenuMobileOpened && setMenuMobileOpened(true)} /> } + } - - - - - - - - - + + + {isTabletOrMobile && + setMenuMobileOpened(false)} /> + } + ); } diff --git a/src/pages/TopStatsPage/CommonTopTable.tsx b/src/pages/TopStatsPage/CommonTopTable.tsx index c7eb3f9..d166c9e 100644 --- a/src/pages/TopStatsPage/CommonTopTable.tsx +++ b/src/pages/TopStatsPage/CommonTopTable.tsx @@ -42,7 +42,7 @@ const TopTableHeader = (props: { columns: string[] }) => { direction={'row'} gap={'8px'} pad={'8px'} - border={{ size: '2px', side: 'bottom' }} + // border={{ size: '2px', side: 'top' }} style={{ fontWeight: 'bold' }} > @@ -82,7 +82,7 @@ const TopTableRow = (props: TopTableRowProps) => { direction={'row'} gap={'8px'} pad={'8px'} - border={{ size: '1px', side: 'bottom' }} + border={{ size: '1px', side: 'top' }} > {rank}