From bd80434b8336d2822fb1834a1861ab8f2d9a81ec Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 23 Nov 2022 20:57:49 +0100 Subject: [PATCH] Mobile menu (#39) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add MobileMenu component * implement MobileMenu via Header * close menu with links * move all menu logic to MobileMenu component * refactor MobileMenu to use Modals * remove unneeded motion params * remove animation on fixed modal * abstract out a HeaderButtons component * abstract out Search component * move BORDER_WIDTH to constants * hover fixes * change requests * fix: Link should wrap header buttons Co-authored-by: Corwin Smith Co-authored-by: Nicolás Quiroz --- src/components/UI/Header.tsx | 89 +++++++-------------------- src/components/UI/HeaderButtons.tsx | 48 +++++++++++++++ src/components/UI/index.ts | 1 + src/components/UI/search/Search.tsx | 30 +++++++++ src/components/UI/search/index.ts | 1 + src/components/layouts/Layout.tsx | 2 +- src/components/layouts/MobileMenu.tsx | 71 +++++++++++++++++++++ src/components/layouts/index.ts | 2 + src/constants.ts | 2 + src/theme/foundations/textStyles.ts | 10 +++ 10 files changed, 187 insertions(+), 69 deletions(-) create mode 100644 src/components/UI/HeaderButtons.tsx create mode 100644 src/components/UI/search/Search.tsx create mode 100644 src/components/UI/search/index.ts create mode 100644 src/components/layouts/MobileMenu.tsx diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 4df7e9ad65..e87a2edcf1 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -1,15 +1,24 @@ -import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@chakra-ui/react'; import { FC } from 'react'; +import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react'; import NextLink from 'next/link'; -import { HamburgerIcon, LensIcon, MoonIcon, SunIcon } from '../UI/icons'; -import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; +import { MoonIcon, SunIcon } from '../UI/icons'; +import { Search } from './search'; +import { HeaderButtons } from './'; +import { MobileMenu } from '../layouts'; export const Header: FC = () => { const { colorMode, toggleColorMode } = useColorMode(); const isDark = colorMode === 'dark'; + return ( - + { - {/* DOWNLOADS */} - - - - - downloads - - - - - - {/* DOCUMENTATION */} - - - - - documentation - - - + {/* HEADER BUTTONS */} + + {/* SEARCH */} - - - - - - - + {/* DARK MODE SWITCH */} @@ -107,12 +61,11 @@ export const Header: FC = () => { > {isDark ? : } - - {/* HAMBURGER MENU */} - - - + + {/* MOBILE MENU */} + + ); }; diff --git a/src/components/UI/HeaderButtons.tsx b/src/components/UI/HeaderButtons.tsx new file mode 100644 index 0000000000..1c1d7f2cde --- /dev/null +++ b/src/components/UI/HeaderButtons.tsx @@ -0,0 +1,48 @@ +import { FC, MouseEventHandler } from 'react'; +import { Flex, Link, Stack, Text } from '@chakra-ui/react'; +import NextLink from 'next/link'; + +import { BORDER_WIDTH, DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; + +interface Props { + close?: MouseEventHandler; +} + +export const HeaderButtons: FC = ({ close }) => { + const menuItemStyles = { + p: { base: 8, md: 4 }, + borderBottom: { base: BORDER_WIDTH, md: 'none' }, + borderRight: { base: 'none', md: BORDER_WIDTH }, + borderColor: { base: 'bg', md: 'primary' }, + color: { base: 'bg', md: 'primary' }, + alignItems: 'center', + _hover: { + textDecoration: 'none', + bg: 'primary', + color: 'bg !important' + } + }; + return ( + + {/* DOWNLOADS */} + + + + downloads + + + + + {/* DOCUMENTATION */} + + + + + documentation + + + + + + ); +}; diff --git a/src/components/UI/index.ts b/src/components/UI/index.ts index edd3e095a6..38fb98e813 100644 --- a/src/components/UI/index.ts +++ b/src/components/UI/index.ts @@ -1,4 +1,5 @@ export * from './ButtonLinkSecondary'; export * from './DataTable'; export * from './Header'; +export * from './HeaderButtons'; export * from './PageMetadata'; diff --git a/src/components/UI/search/Search.tsx b/src/components/UI/search/Search.tsx new file mode 100644 index 0000000000..e6e14c5d33 --- /dev/null +++ b/src/components/UI/search/Search.tsx @@ -0,0 +1,30 @@ +import { FC } from 'react'; +import { Input, InputGroup, Stack } from '@chakra-ui/react' + +import { BORDER_WIDTH } from '../../../constants' +import { LensIcon } from '../icons'; + +export const Search: FC = () => { + return ( + + + + + + + + + ); +}; \ No newline at end of file diff --git a/src/components/UI/search/index.ts b/src/components/UI/search/index.ts new file mode 100644 index 0000000000..14c382eab6 --- /dev/null +++ b/src/components/UI/search/index.ts @@ -0,0 +1 @@ +export * from './Search'; \ No newline at end of file diff --git a/src/components/layouts/Layout.tsx b/src/components/layouts/Layout.tsx index 81d2621ea4..46e8bed8ab 100644 --- a/src/components/layouts/Layout.tsx +++ b/src/components/layouts/Layout.tsx @@ -12,7 +12,7 @@ interface Props { export const Layout: FC = ({ children }) => { return ( - +
{children} diff --git a/src/components/layouts/MobileMenu.tsx b/src/components/layouts/MobileMenu.tsx new file mode 100644 index 0000000000..8dbc08e324 --- /dev/null +++ b/src/components/layouts/MobileMenu.tsx @@ -0,0 +1,71 @@ +import { Box, Flex, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; +import { CloseIcon } from '@chakra-ui/icons'; + +import { HamburgerIcon } from '../UI/icons'; +import { Search } from '../UI/search'; +import { HeaderButtons } from '../UI'; + +import { BORDER_WIDTH } from '../../constants'; + +export const MobileMenu: React.FC = () => { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + {/* HAMBURGER MENU ICON */} + + + + + {/* MODAL */} + + + + {/* MOBILE MENU */} + + + {/* CLOSE ICON */} + + + + + + {/* HEADER BUTTONS */} + + + {/* SEARCH */} + + + + + + ); +}; diff --git a/src/components/layouts/index.ts b/src/components/layouts/index.ts index 9fc685e2aa..fe0d61edd7 100644 --- a/src/components/layouts/index.ts +++ b/src/components/layouts/index.ts @@ -1 +1,3 @@ export { Layout } from './Layout'; +export { Footer } from './Footer'; +export { MobileMenu } from './MobileMenu'; diff --git a/src/constants.ts b/src/constants.ts index 61fecffb85..a101798e18 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -2,6 +2,8 @@ import React from 'react'; import { IconProps } from '@chakra-ui/react'; import { WindowsLogo, MacosLogo, LinuxPenguin, SourceBranch } from './components/UI/icons'; +export const BORDER_WIDTH = '2px'; + // internal pages export const DOWNLOADS_PAGE = '/downloads'; export const DOCS_PAGE = '/docs'; diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index 720ef0f97f..fff19508d4 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -90,6 +90,16 @@ export const textStyles = { textAlign: 'center', fontSize: 'sm' }, + 'header-button': { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 700, + fontSize: { base: '0.86rem', sm: '1rem' }, + }, + 'header-mobile-button': { + fontFamily: '"JetBrains Mono", monospace', + textTransform: 'uppercase', + fontSize: '2xl' + }, 'inline-code-snippet': { fontFamily: '"JetBrains Mono", monospace', fontWeight: 400,