bubble-icon

Developer preview
This is a developer preview of GraphCommerce. The documentation will be updated as GraphCommerce introduces new features and refines existing functionality.

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.


  • 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

Reorder components

Reorder components

Remove DesktopNavBar

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

Remove navigation

Remove navigation

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>

Replace search input

Replace search input with Search Fab, remove Customer Service Fab

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'

Local copy of the MenuFab component

Local copy of the MenuFab component with Fab scroll animation removed

Next steps