Build a custom header in GraphCommerce

Previously, you created a GraphCommerce app and started building your custom storefront with GraphCommerce. You're now ready to build a custom header for your app.

In this tutorial, you'll accomplish a series of tasks to add some specific functionality to your app. Your final app will be simple, but you'll learn where to find resources to build more complex features on your own.

After you've finished this tutorial, you'll have accomplished the following:

• Edited the layout component to remove components
• Add a simplified search Icon button
• Make a local copy of the MenuFab component and update its imports

Requirements

You've familiarized yourself with React ↗, Next.js ↗, and Mui ↗. GraphCommerce is a frontend React framework that uses Next.js for server-side rendering.

Move and justify the logo

• In /components/Layout/LayoutNavigation.tsx, move <Logo /> after <DesktopNavBar>...</DesktopNavBar>
• Wrap the <Logo /> component in a <Box> component:

<Box
  sx={{
    display: 'flex',
    justifyContent: 'center',
    flexGrow: 1,
    pointerEvents: 'none',
  }}
>
  <Logo />
</Box>

• Add the import of 'Box' to the list of the '@mui/material' imports at the top of the file
• Save the file to see your changes updated in real-time

Remove DesktopNavBar

• In /components/Layout/LayoutNavigation.tsx, remove the <DesktopNavBar>...</DesktopNavBar> component.

Replace Search input with Search Fab

• In /components/Layout/LayoutNavigation.tsx, replace <SearchLink href='/search' /> with:

<PageLink href='/search' passHref>
  <Fab aria-label={t`Search`} size='large' color='inherit'>
    <IconSvg src={iconSearch} size='large' />
  </Fab>
</PageLink>

• Add iconSearch to the existing imports from '@graphcommerce/next-ui' at the top of the file

Remove Customer Service Fab

• In /components/Layout/LayoutNavigation.tsx, remove the Customer Service floating action button by removing it completely:

<PageLink href='/service' passHref>
  <Fab aria-label={t`Account`} size='large' color='inherit'>
    <IconSvg src={iconCustomerService} size='large' />
  </Fab>
</PageLink>

Make a local copy of the MenuFab component

• In /components/Layout/LayoutNavigation.tsx, remove MenuFab from the '@graphcommerce/next-ui' import

• Add import { MenuFab } from './MenuFab' to the list of imports at the top of the file

• Make a copy of /node_modules/@graphcommerce/next-ui/LayoutParts/MenuFab.tsx and move it to the directory /components/Layout/MenuFab.tsx

• Remove the style={{...}} prop from both the <MotionDiv> components to remove the Fab scroll animation

• Remove const { opacity, scale, shadowOpacity } = useFabAnimation()

• Update all imports:

import {
  extendableComponent,
  responsiveVal,
  iconClose,
  iconMenu,
  IconSvg,
} from '@graphcommerce/next-ui'
import { styled, Box, Fab, Menu, ListItem, Divider, alpha } from '@mui/material'
import { useRouter } from 'next/router'
import React, { useEffect } from 'react'

Next steps

• Learn how to build pages in GraphCommerce
• Learn more about creating styled components with the styled() utility