Header A5

Home

WorkBlogAboutContact

<header
  sx={{
    py: 4,
    variant: 'styles.header',
  }}>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'center',
      mb: 3,
    }}>
    <Link to='/' title='Home'>
      <img
        alt='UI Logo'
        src='https://contrast.now.sh/cff/40f?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI'
      />
      <span
        sx={{
          position: 'absolute',
          width: 1,
          height: 1,
          overflow: 'hidden',
          top: -9999,
        }}>
        Home
      </span>
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'center',
    }}>
    <Link to='/work'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Work
    </Link>
    <Link to='/blog'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Blog
    </Link>
    <Link to='/about'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      About
    </Link>
    <Link to='/contact'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Contact
    </Link>
  </div>
</header>
<header
  sx={{
    py: 4,
    variant: 'styles.header',
  }}>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'center',
      mb: 3,
    }}>
    <Link to='/' title='Home'>
      <img
        alt='UI Logo'
        src='https://contrast.now.sh/cff/40f?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI'
      />
      <span
        sx={{
          position: 'absolute',
          width: 1,
          height: 1,
          overflow: 'hidden',
          top: -9999,
        }}>
        Home
      </span>
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      justifyContent: 'center',
    }}>
    <Link to='/work'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Work
    </Link>
    <Link to='/blog'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Blog
    </Link>
    <Link to='/about'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      About
    </Link>
    <Link to='/contact'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Contact
    </Link>
  </div>
</header>