Dark nav with white page header (Tailwind to Chakra UI)

StackedLayout.js

import {
  Box,
  Flex,
  Image,
  Link,
  IconButton,
  Button,
  Heading,
  Icon,
  HStack,
  VStack,
} from '@chakra-ui/core';
import React, { useState } from 'react';
import { MdMenu, MdClose, MdNotificationsNone } from 'react-icons/md';
import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/core';

const links = ['Dashboard', 'Team', 'Projects', 'Calendar', 'Reports'];
const menu = ['Your Profile', 'Settings', 'Sign out'];
const profPic =
  'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80';

const StackedLayout = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <React.Fragment>
      <Box as="nav" bg="gray.700">
        <Box maxW="7xl" mx="auto" px={{ base: 6, lg: 8 }}>
          <Flex align="center" justify="space-between" h={16}>
            <Flex align="center">
              <Box flexShrink={0}>
                <Image
                  h={8}
                  w={8}
                  src="https://tailwindui.com/img/logos/workflow-mark-on-dark.svg"
                  alt="Workflow logo"
                />
              </Box>
              <Box display={{ base: 'none', md: 'block' }}>
                <HStack ml={10} spacing={4}>
                  {links.map((link, idx) => (
                    <Link
                      key={idx}
                      px={3}
                      py={2}
                      rounded="md"
                      fontSize="sm"
                      fontWeight="medium"
                      color="white"
                      bg={!idx ? 'gray.800' : null}
                      _focus={{ color: 'white', bg: 'gray.600' }}
                      style={{ textDecoration: 'none' }}
                      _hover={{ color: 'white', bg: idx ? 'gray.600' : null }}
                    >
                      {link}
                    </Link>
                  ))}
                </HStack>
              </Box>
            </Flex>
            <Box display={{ base: 'none', md: 'block' }}>
              <IconButton
                _focus={{ outline: 'none' }}
                variant="link"
                icon={
                  <Icon
                    _hover={{ color: 'white' }}
                    as={MdNotificationsNone}
                    boxSize={6}
                    color="gray.300"
                  />
                }
              />
              <Menu>
                <MenuButton ml={3} as={Button} variant="link" _focus={{ outline: 'none' }}>
                  <Image h={8} w={8} src={profPic} alt="image pic" rounded="full" />
                </MenuButton>
                <MenuList>
                  {menu.map((item, idx) => (
                    <MenuItem key={idx} fontSize="sm" color="gray.600" as="a" href="#">
                      {item}
                    </MenuItem>
                  ))}
                </MenuList>
              </Menu>
            </Box>

            <Flex mr={-2} display={{ md: 'none' }}>
              <IconButton
                _focus={{ outline: 'none' }}
                _hover={{ bg: 'gray.600' }}
                onClick={() => setIsOpen(!isOpen)}
                variant="link"
                icon={<Icon as={isOpen ? MdClose : MdMenu} boxSize={6} color="gray.300" />}
              />
            </Flex>
          </Flex>
        </Box>

        {isOpen && (
          <Box display={{ md: 'none' }}>
            <VStack align="stretch" spacing={1} pt={2} pb={3} px={{ sm: 3, md: 2 }}>
              {links.map((link, idx) => (
                <Link
                  key={idx}
                  px={3}
                  py={2}
                  rounded="md"
                  fontSize="sm"
                  fontWeight="medium"
                  color="white"
                  bg={!idx ? 'gray.800' : null}
                  _focus={{ color: 'white', bg: 'gray.600' }}
                  style={{ textDecoration: 'none' }}
                  _hover={{ color: 'white', bg: idx ? 'gray.600' : null }}
                >
                  {link}
                </Link>
              ))}
            </VStack>
            <Box pt={4} pb={3} borderTopWidth="1px" borderTopColor="gray.600">
              <Flex align="center" px={5}>
                <Box flexShrink={0}>
                  <Image h={10} w={10} src={profPic} alt="image pic" rounded="full" />
                </Box>
                <Box ml={3}>
                  <Box fontWeight="medium" color="white">
                    Tom Cook
                  </Box>
                  <Box fontSize="sm" fontWeight="medium" color="gray.300">
                    [email protected]
                  </Box>
                </Box>
              </Flex>
              <VStack spacing={1} align="stretch" mt={3} px={2}>
                {menu.map((item, idx) => (
                  <Link
                    key={idx}
                    display="block"
                    px={3}
                    py={2}
                    rounded="md"
                    color="gray.300"
                    _focus={{ outline: 'none', color: 'white', bg: 'gray.600' }}
                    _hover={{ color: 'white', bg: 'gray.600' }}
                  >
                    {item}
                  </Link>
                ))}
              </VStack>
            </Box>
          </Box>
        )}
      </Box>

      <Box as="header" bg="white" boxShadow="base">
        <Box maxW="7xl" mx="auto" py={6} px={{ base: 4, lg: 8 }}>
          <Heading as="h1" fontSize="3xl" fontWeight="bold" color="gray.800">
            Dashboard
          </Heading>
        </Box>
      </Box>
      <Box as="main">
        <Box maxW="7xl" mx="auto" py={6} px={{ base: 6, lg: 8 }}>
          <Box px={{ md: 4 }} py={6}></Box>
        </Box>
      </Box>
    </React.Fragment>
  );
};

export default StackedLayout;